Wednesday, March 20, 2013

Floating Social Bookmarking Widget With Easing Effect

Author: Gagan Masoun
Floating Social Bookmarking Widget With Easing EffectI have shared many floating widgets for your blog on Blogs Daddy. Today, I'm going to share something different floating type social bookmarking widget with all of you, the widget will follow the movement up and down. I used jquery and easing effects library and of course with a little more use of the image (only 1).

When you hover the cursor on one of the social bookmark icon, it would be out the plans, softer as the new Solo daughter out of the palace. It contains popular social icons such as: Facebook, Twitter, Google+, Pinterest, YouTube and RSS feed. Following-up steps:

You May Like To Read:

Floating Social Bookmarking Widget Screenshot

Floating Social Bookmarking Widget With Easing Effect

How to Add New Floating Bar To Blogger Blog

  • Go to Blogger Dashboard » Layout
  • Click On Add a Gadget
  • Choose HTML/JavaScript and Paste The Below Code In It.
<style>
.BD-Tricks{ background:url('http://1.bp.blogspot.com/-8jSY5hG1zoI/Ufk84W26NpI/AAAAAAAA72A/d4597BoIQLY/s1600/FB.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:200px; z-index:1000;}
.BD-Tricksc{ background:url('http://3.bp.blogspot.com/-PaH7jXXwx7s/Ufk84Z-wvXI/AAAAAAAA71M/3FqBMiMmhGw/s1600/FB-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:200px; z-index:1100;}
.BDTricks-isiblogger{margin:0px 0 0 43px}
.BDTricks-kanantwitter{background:url('http://1.bp.blogspot.com/-DtYayTweL0Y/Ufk85jVi2cI/AAAAAAAA71s/6jrb6JBEXqI/s1600/TW.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:245px;z-index:1000;}
.BDTricks-kanantwitterc{background:url('http://4.bp.blogspot.com/-BcJVBIWx950/Ufk85Luc-YI/AAAAAAAA71g/r544TuS_mbE/s1600/TW-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:245px; z-index:1100;}
.BDTricks-isitwitter{margin:0px 0 0 43px}
.BDTricks-kananfacebook{background:url('http://3.bp.blogspot.com/-ejWqoLtMFW8/Ufk84w-mQ-I/AAAAAAAA71c/LFA2VTaXKCU/s1600/G+.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:290px; z-index:1000;}
.BDTricks-kananfacebookc{background:url('http://2.bp.blogspot.com/-l1v9hmjhc14/Ufk84RbEQiI/AAAAAAAA71Q/wacsCRhbTNs/s1600/G+-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:290px; z-index:1100;}
.BDTricks-isifacebook{margin:0px 0 0 43px}
.BDTricks-kananrss{background:url('http://1.bp.blogspot.com/-YREEnAfmVcY/Ufk86b1LBmI/AAAAAAAA718/fvBwaE5XtLY/s1600/rss.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:335px; z-index:1000;}
.BDTricks-kananrssc{background:url('http://1.bp.blogspot.com/-9YCPpKPNDzA/UflESk1J0FI/AAAAAAAA73U/qWNnQ_RXHlU/s1600/rss-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:335px; z-index:1100;}
.BDTricks-isirss{margin:0px 0 0 43px}
</style>
<div class="BD-Tricks" onmouseout="this.className='BD-Tricks'" onmouseover="this.className='BD-Tricksc'">
<div class="BDTricks-isiblogger">
<a href="https://www.facebook.com/BlogsDaddy" target="_blank" style=""><img alt="Like us on Facebook" src="http://2.bp.blogspot.com/-P8n8nDmTT_M/Ufk_pguergI/AAAAAAAA72Y/4vq-NQ89xzU/s1600/FB-open-new.png" title="Like us on Facebook" /></a><br />
</div>
</div>
<div class="BDTricks-kanantwitter" onmouseout="this.className='BDTricks-kanantwitter'" onmouseover="this.className='BDTricks-kanantwitterc'">
<div class="BDTricks-isitwitter">
<a href="https://twitter.com/BlogsDaddy" target="_blank" style=""><img alt="Follow us on Twitter" src="http://3.bp.blogspot.com/-M3IjmhXgAhI/Ufk_pj2XnRI/AAAAAAAA72o/V8x9_sUFyc8/s1600/TW-open-new.png" title="Follow us on Twitter" /></a><br />
</div>
</div>
<div class="BDTricks-kananfacebook" onmouseout="this.className='BDTricks-kananfacebook'" onmouseover="this.className='BDTricks-kananfacebookc'">
<div class="BDTricks-isifacebook">
<a href="https://plus.google.com/106217413057730068740" target="_blank" style=""><img alt="Recommend us on Google Plus" src="http://3.bp.blogspot.com/-2wnu8RRTqzI/Ufk_pvmAXTI/AAAAAAAA72U/kXKj5qp2Kgc/s1600/G+-open-new.png" title="Recommend us on Google Plus" /></a><br />
</div>
</div>
<div class="BDTricks-kananrss" onmouseout="this.className='BDTricks-kananrss'" onmouseover="this.className='BDTricks-kananrssc'">
<div class="BDTricks-isirss">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=BlogsDaddy" target="_blank" style=""><img alt="Subscribe me on RSS" src="http://2.bp.blogspot.com/-bqzO6NGjTYM/UflEtvLeD6I/AAAAAAAA73c/2iiSnp_4FZo/s1600/rss-open.png" title="Subscribe me" /></a><br /><br />
<p style=' line-height:0px; font-size:10px; font-weight:bold; '>
<a href='http://www.blogsdaddy.com/2013/03/floating-social-widget-with-easing-effect.html' rel='nofollow' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</div>
Remember Notes : The social and feed links are highlighted in red color, you need to change these to your own.

Read Also:
I hope you liked this tutorial about floating social bookmark with easing effects. If you need any help then please leave a message in the comment box at the bottom. But please do not spam.

Author
Author - is the owner of Blogs Daddy Blog. Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can follow him on twitter @BlogsDaddyYou can also follow him on Google+.

5 comments:

  1. its not floating buddy.its just fix the button not work as in or out as i saw in your post...please help me....send me the solution at rahulkrajput@gmail.com.i am waiting
    for quick and positive response form your desk..


    thanks
    regard..

    ReplyDelete
  2. http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png

    Background is not working gagan you have backup this Png Image

    ReplyDelete
    Replies
    1. Hello,

      I updates this widget with new style please check updated code above.!!

      Thanks

      Delete