20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

Unique Hover Effect Social Media Follow Us Widget

Hover Effect Social Media Follow Us Widget for blogger,connect,join us,social sharing counter widget gadget for blogspot best hover effect social sharing box with html and css
Unique Hover Effect Social Media Follow Us Widget
In  this  tutorial i'm going to  explain how to add unique hover effect join/follow/connect us widget with social media  profile  icons and social followers or fans counter. By using this widget you can link your social media profile Facebook,Twitter and Rss and YouTube.You have to update the counter manually.

1. Log in to blogger account.
2. Now select "Layout"
3. Click Add Gadget and select 'HTML/Javascript
4. Paste below code
clear: both;
border: 1px solid black;
width: 300px;
.btrix_widget li{
padding:7px 0 10px;
-moz-transition:.4s linear; -webkit-transition:.4s ease-out; transition:.4s linear;
.btrix_widget li a{display:block;text-align:center;}
.btrix_widget li a strong{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHuRQ3ckMsc_TWPDCp0yTuB06uFDf-sqAqsa9ziEPxXrcoxsmKr5RNdTHLxN3xH7tN7WB4NH28QIZQeKpbb9JTJ2mSZOo_Ps4ZfrziakwE2I9L20wGxesCCd6OiDPuWkuJ6GYSrVhWTiMj/s1600/bt-icons.png) no-repeat;display:block; opacity:0.7; height:51px; margin-bottom:5px; -webkit-transition: opacity ease-in-out 0.4s;  -moz-transition: opacity ease-in-out 0.4s;  -o-transition: opacity ease-in-out 0.4s;  transition: opacity ease-in-out 0.4s;}
.btrix_widget li a:hover strong{opacity:1;}
.btrix_widget li:hover a{text-decoration: none;}
.btrix_widget li.rss-subscribers a strong{ background-position:center -1084px ;}
.btrix_widget li.rss-subscribers a:hover strong{ background-position:center -1139px ;}
.btrix_widget li.rss-subscribers span{display:block;font-size:21px;}
.btrix_widget li.facebook-fans a strong { background-position:center -1192px ;}
.btrix_widget li.facebook-fans a:hover strong { background-position:center -1246px ;}
.btrix_widget li.twitter-followers a strong{ background-position:center -868px;}
.btrix_widget li.twitter-followers a:hover strong{ background-position:center -922px;}
.btrix_widget li.youtube-subs a strong{ background-position:center -976px;}
.btrix_widget li.youtube-subs a:hover strong{ background-position:center -1030px;}
.btrix_widget li span{display:block;font-size:21px;}
.btrix_widget li a small{color:#777;}
<br />
<div class="widget btrix_widget">
<ul style="margin-left: -40px;">
<center><h1>Connect with Us</h1></center>
<li class="rss-subscribers">
<a href="http://feeds.feedburner.com/bloggersstand">
<small>RSS Feed</small>
<li class="twitter-followers">
<a href="http://www.twitter.com/bloggersstand">
<li class="facebook-fans">
<a href="http://facebook.com/bloggersstand">
<li class="youtube-subs">
<a href="http://www.youtube.com/username">
  • Change bloggersstand with your Feedburner ID 
  • Change bloggersstand with your Facebook username
  • Change bloggersstand with your Twitter Username
  • Change Username with your youtube username
5. Now save your 'HTML/Javascript'. Done !

Post a Comment