Best Stylish Follow me Button for Blogger with cool Effects

Best Stylish Follow me Button for Blogger with cool Effects

in published on May 27, 2016 2 comments posted by


Best Stylish Follow me Button for Blogger with cool Effects 

Every blogger want to increase their followers in social media Like Facebook,Twitter etc. So we can Increase our traffic even more and get to know our visitors even better.

So this widget is one of the best Follow us Widget for blogger with cool design, and it work properly.

I use this widget now and my followers increase up to 30% that's why i really love this Widget







Live Preview




INSTALLATION 

  • First log-in to Blogger.com
  • Proceed to your blogger Dashboard
  • Click Layout and Add Gadget
Now Select HTML/JavaScript
SELECT THIS CODE BELOW AND PASTE IN Html/Javascript Widget box



<style>
#abt{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#abt a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#abt li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#abt .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz32vJ-bIM_eAGj9HApoBC7DGt2fS_08b4cZTCrgNmQD5HwBaQh7uTulE_yoGVlBW8SvHJPgYVPEKfyqGgwJH6P8iblZT5iqK2K_dELiQohGV82QqTmWqLyJOKSLjdtfOCU2kwfyZg2P8/w35-h158-no/facebook+and+google%252B+.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#abt li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#abt .icon{overflow:hidden; color:#fafafa;}
#abt .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#abt .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#abt .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#abt .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#abt .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#abt li:hover .icon,
.touch #abt li .icon{width:210px;}
.touch #abt li .facebook, #abt li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #abt li .twitter, #abt li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #abt li .googleplus, #abt li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #abt li .pinterest, #abt li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #abt li .rss, #abt li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id="abt">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="http://www.facebook.com/Rhonznet"target="blank">Follow us on Facebook</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/+Rhonznet"target="blank">Follow us on Google+</a></li>
<li data-alt="Follow us on twitter"><a class="icon twitter" href="https://www.twitter.com/Rhonznet"target="blank">Follow us on Twitter</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="http://pinterest.com/rhonznet"target="blank">Follow us on Pinterest</a></li>
<li data-alt="Subscribe via RSS"><a class="icon rss" href="http://feeds.feedburner.com/rhonznet"target="blank">Follow us on Pinterest</a></li>
</ul>  <small><div style="font-size:50%; text-align:right;"><a href="https://rhonznet.blogspot.com/2016/05/best-stylish-follow-me-button-for.html" target="_blank" title="Get This Widgets">Get this Widget</a></div></small>

Now Change RhonzNet with your Google+,Facebook,Twitter,Pinterest,Feedburner  username ! . 

FINAL WORD :
I hope you like this tutorial , for Question and suggestion please don't forget to comment down below , and if you like this article be kind and share ♥


Previous Post
Next Post
Dale

post written by:

2 comments: