Floating Social icons with Hover effect

Posted by Yuga irgi on Friday, May 09, 2014 in Blogging Tips, Social Media | No comments

social icon

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.

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/#" 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/#" 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  # 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.