Add animated social widget in blogger Sidebar easily.

Posted by Android Market on -


Hi friends now add best animated style social bookmarking widget in blogger sidebar easily.












Follow simple and easy step to adding this social widget in your blogger blog---->>>>

* First go to your blogger Dashboard.

* Click in design tab and edit HTML.

* Click in small box to expand your blogger template.

* Now find this code ]]</b:skin> by CTRL+F key easily.

* Copy below code and paste before ]]</b:skin>
#social-box {
overflow:hidden;
}
#social-box ul li {
display:block;
background:#EBF4FB;
border:#b6daf6 1px solid;
padding:10px;
-moz-border-radius: 6px;
border-radius: 6px;
margin-bottom:10px;
}
#social-box ul li:hover {
border:#276dc1 1px solid;
background:#d3e6f5;
}
.soc-icons-bar {
list-style:none;
margin:0px 0 0px;
padding:0
}
.soc-icons-bar a {
font:18px Arial, Helvetica;
padding:4px 28px 16px 43px;
background:none;
text-decoration:none;
font-weight:bold;
text-shadow:1px 1px #fff;
}
.soc-icons-bar a:hover {
color:#276dc1;
}
.soc-icons-bar li{
display:block;
padding:5px 10px 5px 0;
height:25px;
background:none;
}
.soc-icons-bar li.tw a{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrI3Bf4QmKDP57i6pu-khBmPJ1AfX_zsDzOykfsWVkV-B9Nwiw3f2CEKsvICgw0Wz1DizC4ezs8GM_kQ1xIadwgfMeWhLw9oANDailPkZWUYd2bcle119tSnLyGP1KSJfK3Zdd4C60T78/) no-repeat scroll 0 0}
.soc-icons-bar li.fb a{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigVWFE1IQ2r5Dn3_r4PmvAuB1LFri0BT336MdRh-_Zal_1xItB4RbEmkemyWYVQdZaJdsJ2sRLKB6R-rUOJOAgJL70XPzQM2jLlTzJjcwHhoBatFfRni3Cg11gyGz5tm54C3PmoX9GUsI/) no-repeat scroll 0 0}
.soc-icons-bar li.rss a{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBCAyeV7Guf9ZYGqL5YHp2TIRCeGFFtVqdqKuOJ3HNe3nc3R61AKeM0M8vyHf2XHQRG7WAGNF3pLdfmR5tuWCLkcNjL4_j8S6NGptHVQjxzgvOsGzMehPTPQVzawCCwxrghH1U-601-yQ/) no-repeat scroll 0 0}
.soc-icons-bar li.email a{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTfD9NzeSdO7N9P22EI2mcWfMWteXtc4Sc5yFYrhV8W5a24R34YS6Ei3YITKys1MAU7XhSdb9ZyjwpSkEcwub2JlIh5wYmYOQpEIVaSTdyLj8U0CskDZuElpuuHHCxzs3i58iVL-fXqf4/) no-repeat scroll 0 0}
#sidebar-banners img {
margin-bottom:5px;
}

* Now save your blogger template .

* Again go to your blogger dashboard.

* Click in design tab and  you are here--->>> Page element.

* Click in add Gadget which is in sidebar and when open new window click in HTML/javascript from list.

* And when open new blank box copy below code and paste in blank box.
<!-- Subscribe Options -->
<div id='social-box'>
<ul class='soc-icons-bar clearfix'>
<li class='rss'><a href='YOUR FEEDBURNER URL HERE'>Subscribe via RSS</a></li>
<li class='tw'><a href='YOUR TWITTER URL HERE' title='Spread the word on Twitter!'>Follow us on Twitter</a></li>
<li class='email'><a href='YOUR FEEDBURNER EMAIL URL HERE'>Subscribe via Email</a></li>
</ul>
</div>

<!-- End of #social-box -->

NOTE:- Change Highlighted text in above code with your own ok.

* Now click to save your HTML/Javascript and now  you are done.

Categories: , , , , , ,

Leave a Reply