Awesome Expand Social Follow Me Widgets for Blogger

Almost every blog or website has some kind of social follow us buttons. Such buttons great for getting your readers involved in your social networks and obviously it will increase your social reputation and brand name. But that is only possible if the reader clicks on the button and follow your blog on social networks. Obviously the reader will follow only if he/she finds your blog useful; hence, we cannot control that with any widget. But we can at least make the reader to click on the button by increasing the sexiness of the buttons. The social buttons widget we are going to share today will do the same to a certain extent. There is no JavaScript or jQuery involved in this widget. It's pure CSS. The widget looks neat and clean in your sidebar or anywhere else with a smooth sexy expand on hover effect which will tempt the reader to click the button at least once. The effect once again comes with help of our favorite CSS3 transitions. Make sure that we are not going to force the readers to click on the buttons. We are just trying to increase of the chances of clicking by giving some cool effects to the buttons. Have a look at the demo and if you find it amazing or just want to give it a try, then get on with the tutorial to add it on your blog.

You can see the LIVE DEMO of this widget on MBN Sidebar.

Features:

The widget is pretty straightforward but still here are some of the main features of this widget:

• Covers the most used four social networking buttons plus an RSS icon
• Smooth Sexy expand on hover
• Use of CSS sprites
• Very neat and clean
• No JavaScript. No jQuery. It's pure CSS

The CSS sprites technique is pretty cool and useful especially when you have too many images. In this widget you will think that one image or icon is used for each button which makes a total of 5 images. But actually there is only one image used which contains all the icons. This technique is useful because instead of 5 HTTP requests, you are just making one request which speeds up the loading time. This technique is not very common in Blogger blogs but in WordPress blogs it is used often.

Now let's add this widget on your blog.

Note: If you want to add the widget on a specific place, then use the separate HTML and CSS and if you want the widget to appear somewhere in your sidebar, then jump directly at the Alternative section at the bottom.

How to Install it: 

If you want to add this widget somewhere in your sidebar, then follow these steps.

1. Go to Blogger -> Layout
2. Click Add a Gadget in your sidebar
3. Select HTML/JavaScript from the list and paste the following code in that gadget:

<!--Sexy Social Buttons Widget By MyBloggerNews.com-->
<style>
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbisose .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/AVvXsEjVXHrzm6lggWWZeqmR3W-PdJbfWCjCPoNAsWodTwnlf8JfgvJcSDY8Fi9OTmI11ljrQBDI2GK6wLKAj-DXaGe5wHIIZZu9kqvt5_Gksjr2gp7dt_Tkjv9tnVbvB6SyrnxCqOyRgjqDjiM/s800/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;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;}
#tbisose .icon{overflow:hidden; color:#fafafa;}
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon, 
.touch #tbisose li .icon{width:210px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>

<ul id="tbisose">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li>
</ul>
<!--Sexy Social Buttons Widget By MyBloggerNews.com-->

Replace all # with your respective social networking URLs.

Enjoy!

Peace and Happy Blogging.