Attractive Social Media Widget For Blogger

By : Follow Trends

On : 9/01/2015

In : Blogger Tips

0 comments

In  this  tutorial im gonna explain how to add unique Connect with us widget with social media  profile  icons. By using this widget you can link your social media profile Facebook,Twitter and Rss and YouTube.You have to update counter manually. You can check it from below demo link.

Demo

 1. Log in to blogger account and Click drop down. 

2. Now select "Layout" Like Below.

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/AVvXsEhf67Ej0FxEP92ZM9iPm0vYm4beaYLwsSNRPNeCbmYlcqUIU4TkkJhThsnE9vREPlxYxbPLZWHjZ5-WPWnf5HSF8lczAnLRU0cmWkd1ogTPdbKwC_1VZaWvg_MS1PY2b53G9WijVDaWjkRZ/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/tiwcher ">

<strong></strong>
<span>548</span>
<small>RSS Feed</small>
</a>
</li>
<li class="twitter-followers">
<a href="http://www.twitter.com/tiwcher ">

<strong></strong>
<span>5,245</span>
<small>Followers</small>
</a>
</li>
<li class="facebook-fans">
<a href="http://facebook.com/tiwcher ">

<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>

You have to change the counters manually, just change red color number according to profile.

Replace tiwcher with your Feedburner ID 
Replace tiwcher with your Facebook username
Replace tiwcher with your Twitter Username
Replace Username with your Youtube Username

5. Now save your HTML/Javascript'. You are done...