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
<style>
.btrix_widget{
margin-bottom:20px;
overflow:hidden;
clear: both;
border: 1px solid black;
width: 300px;
}
.btrix_widget li{
line-height:15px;
float:left;
width:75px;
height:87px;
padding:7px 0 10px;
-moz-transition:.4s linear; -webkit-transition:.4s ease-out; transition:.4s linear;
list-style:none;
}
.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;}
</style>
<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">
<strong></strong>
<span>548</span>
<small>RSS Feed</small>
</a>
</li>
<li class="twitter-followers">
<a href="http://www.twitter.com/bloggersstand">
<strong></strong>
<span>5,245</span>
<small>Followers</small>
</a>
</li>
<li class="facebook-fans">
<a href="http://facebook.com/bloggersstand">
<strong></strong>
<span>2,298</span>
<small>Fans</small>
</a>
</li>
<li class="youtube-subs">
<a href="http://www.youtube.com/username">
<strong></strong>
<span>1,202</span>
<small>Subscribers</small>
</a>
</li>
</ul>
</div>
- Change bloggersstand with your Feedburner ID
- Change bloggersstand with your Facebook username
- Change bloggersstand with your Twitter Username
- Change Username with your youtube username