Add Stylish Social Buttons with Hover Effect

Today I came up with another beautiful widget for blogger users. I will share you how to add social follow us buttons with hover effect. This looks simple but it looks very attractive and stylish too. You have seen many social follow us buttons in many websites but this follow us buttons widget is different and designed with hover effect. This widget is designed with advanced CSS3 without any javascript. So it will doesn't take much time to load in your blog. This Social Follow Us Buttons widget helps you to increase followers of your page in social networking sites.

Recommended : Add Awesome 4 in 1 widget for Blogger

This widget is made with four social follow us buttons which are Facebook, Twitter, Google+ and Feedburner. This widget looks very attractive and made with transform CSS3. You can add this widget easily with just one step.

Preview :

Add Follow Us Buttons To Blogger

Its very easy to add this social follow us buttons to blogger. You can add this widget anywhere like in sidebar or in posts. I will show you how yow add this widget in sidebar.

Step 1 : Goto your blogger Account. Then Layout >> Add a Gadget >> HTML/Javascript.

Step 2 : Add the following code in HTML/Javascript.

<div class="container"> <ul class="action-bar clearfix"> <li> <a href="http://twitter.com/TWITTERUSERNAME" class="like"> <span class="zocial-twitter"></span> <span class="tooltip">Follow</span> </a> </li> <li> <a href="https://plus.google.com/GOOGLEPLUSID" class="favourite"> <span class="zocial-googleplus"></span> <span class="tooltip">Circle us</span> </a> </li> <li> <a href="https://www.facebook.com/FACEBOOKID" class="comment"> <span class="zocial-facebook"></span> <span class="tooltip">Like us</span> </a> </li> <li> <a href="http://feeds.feedburner.com/YOURURI" class="share"> <span class="zocial-rss"></span> <span class="tooltip">Subscribe</span> </a> </li> </ul> </div> <style> @charset "utf-8"; @import urlundefinedhttp://weloveiconfonts.com/api/?family=zocial); /* zocial */ [class*="zocial-"]:before { font-family: 'zocial', sans-serif; } /* ---------- GENERAL ---------- */ a { text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .container { display: block; height: 64px; position: relative; width: 256px; } /* ---------- Action Bar ---------- */ .action-bar li { float: left; } .action-bar a { -webkit-box-shadow: inset 0 -2px rgbaundefined0, 0, 0, .5); box-shadow: inset 0 -2px rgbaundefined0, 0, 0, .5); color: #e7e7e7; display: block; font-size: 32px; height: 64px; line-height: 64px; position: relative; text-align: center; -webkit-transition: background .3s; -moz-transition: background .3s; -ms-transition: background .3s; -o-transition: background .3s; transition: background .3s; width: 64px; } .action-bar a:hover .tooltip { margin-top: 16px; opacity: 1; } .tooltip { border-radius: 3px; font-size: 14px; height: 28px; left: 50%; line-height: 28px; margin: 0 0 0 -50px; opacity: 0; position: absolute; top: 100%; -webkit-transition: margin-top .3s, opacity .3s; -moz-transition: margin-top .3s, opacity .3s; -ms-transition: margin-top .3s, opacity .3s; -o-transition: margin-top .3s, opacity .3s; transition: margin-top .3s, opacity .3s; width: 100px; } .tooltip:before { content: ""; height: 8px; left: 50%; margin: -4px 0 0 -4px; position: absolute; -webkit-transform: rotateundefined45deg); -moz-transform: rotateundefined45deg); -ms-transform: rotateundefined45deg); -o-transform: rotateundefined45deg); transform: rotateundefined45deg); width: 8px; } .like, .like .tooltip, .like .tooltip:before { background: #65B1F8; } .like:hover { background: #65B1F8; } .favourite, .favourite .tooltip, .favourite .tooltip:before { background: #c93037; } .favourite:hover { background: #b02b32; } .comment, .comment .tooltip, .comment .tooltip:before { background: #43438e; } .comment:hover { background: #393978; } .share, .share .tooltip, .share .tooltip:before { background: #FF8000; } .share:hover { background: #FF8000; } </style>

Step 3 : Replace the highlighted Red Colours with your links.

This is it. You have successfully added this widget in your blog. Share your opinions below.

If you like this widget and my blog, don't forget to subscribe below.

Recommended : Add Vertical Social Sharing Buttons For Blogger 

Subscribe Today And Discover All Tips And Tricks !

Note : Don't forget to click the confirmation link in youe email inbox!