Add Sexy Social Media Follow Us Widget in Blogger Template

We can see in almost every blog or website has a follow Us widget with social media icons with a variety of buttons or icons. By installing a social media widget on your blog, you can invite your readers / visitors of the blog to get involved in your social network, and thus can enhance the reputation of your blog.

I won't say that this widget will automatically increase your blog followers in different social net but at least we can attract them to at least click once on the button to create / display the widget.

This widget made without Javascript and JQuery , purely with CSS . Widget will look neat and clean in your blog sidebar. But It won't suit in black background.

So please see the widget demo first, if you find it amazing or interesting then add it to your blog.

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.

<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
#bssose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#bssose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#bssose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#bssose .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/AVvXsEgqv-vSHEI6aknLjGg8dOJumuDVFSkUWcPTarxRSvL-Y75_eKM5qtfwezYaXeICamsIwyD9r4Kgbw48Cbjp5JjRaQDiMJeR4hrZIofL0cGSOaof6BOSALKfi9_cIsTO31rwGhI2Z_zmk96X/s320/sprites.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;}
#bssose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#bssose .icon{overflow:hidden; color:#fafafa;}
#bssose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#bssose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#bssose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#bssose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#bssose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#bssose li:hover .icon,
.touch #bssose li .icon{width:210px;}
.touch #bssose li .facebook, #bssose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #bssose li .twitter, #bssose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #bssose li .googleplus, #bssose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #bssose li .pinterest, #bssose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #bssose li .rss, #bssose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<br />
<ul id="bssose">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="http://www.blogger.com/blogger.g?blogID=4756312408149898454#">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="http://www.blogger.com/blogger.g?blogID=4756312408149898454#">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="http://www.blogger.com/blogger.g?blogID=4756312408149898454#">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="http://www.blogger.com/blogger.g?blogID=4756312408149898454#">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="http://www.blogger.com/blogger.g?blogID=4756312408149898454#">Subscribe with RSS</a></li>
</ul>
</div>

• Change http://www.blogger.com/blogger.g?blogID=4756312408149898454# with your name or ID