Floating Social icons with Hover effect for Blogger

Today I am going to show how you can add floating social icons (Twitter and Facebook) on Blogger. As already stated these icons are floating i.e. there position remains same after scrolling. This widget also also Hover effect in it. When hovered with a mouse on these buttons the opacity increases.

After the configuration the icons will be displayed on the left hand side of the template. On clicking on these buttons you will be redirected to the Twitter / Facebook Page you want. You can see the working demo of these buttons by clicking the link below and seeing on the left of the template.

Live Demo

Adding this widget to Blogger

Go to Blog Title → Layout → Add Widget → HTML/JavaScript. Paste the below code and save the widget.

<style type="text/css">
    a.abt-hover img { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5;} a.abt-hover:hover img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; -khtml-opacity: 1.0; }
    </style>
    <div style="display: scroll; left: 30px; position: fixed; top: 200px;">
    <a class="abt-hover" href="http://twitter.com/AllBloggerTrick" imageanchor="1" rel="nofollow" style="margin-left: 1em; margin-right: 1em;" target="_blank" title="Follow Us"><img border="0" src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/Images/Twitter-abt.png" /></a>
    <a class="abt-hover" href="http://www.facebook.com/AllBloggerTricks" imageanchor="1" rel="nofollow" style="margin-left: 1em; margin-right: 1em;" target="_blank" title="Like Us"><img border="0" src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/Images/Facebook-abt.png" /></a>
    </div>

Change  AllBloggerTrick and AllBloggerTricks with your desired ID.

Save the Template. You are done now. In blogs with wider template the placement may not be correct. If it is so comment below with your blog URL. I will re-write the code for you.