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; } 
    <a class=”abt-hover” href=”http://twitter.com/AllBloggerTrick” imageanchor=”1″ rel=”nofollow” target=”_blank” title=”Follow Us”><img border=”0″ src=”https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/Images/Twitter-abt.png&#8221; /></a> 
    <a class=”abt-hover” href=”http://www.facebook.com/AllBloggerTricks” imageanchor=”1″ rel=”nofollow” target=”_blank” title=”Like Us”><img border=”0″ src=”https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/Images/Facebook-abt.png&#8221; /></a> 

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.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s