Search Box by All Blogger Tricks

Sunday 8 September 2013

Floating Social icons with Hover effect


Freelance Jobs
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/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.
<<<<<****************************************************************>>>>>
We hope you have Enjoyed this Widget & find it useful for you. If you have any Problem or Issue with this Widget, Please do visit the Official page of this Widget here and directly ask the developer of this Widget for the Solution by Commenting there.

Need more Customisations ? Comment your combinations
Below and We will add that in this post as soon as Possible


0 comments

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Support: Contact Us | Feedback & Support | About Us
Links: Developer | Request/Publish/Remove Widget | Widgets by Widgets Bay
Donate Us via: PayPal Powered by: Blogger
Published by: Widgets Bay | Privacy Policy | Terms of Service
Copyright © 2013Widgets Bay - All Rights Reserved