Floating Social Bookmarking Widget With Easing Effect

I 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:

• Make Floating Social Bar For Blogger Blog
• Slide Out Floating Sharing Buttons For Blogger Blog
• Floating Social Media Share Buttons On Blogger Sidebar

Floating Social Bookmarking Widget Screenshot

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Vduo4yK0StPCK6KHBjTj6vKGlc8Wib3yT94neOEpzI_JK4qs1aMCPtnUU9IHEVjHZr00o4VmafsnbStZTMEEX9h25tWO2PMiBkdwlo6_6T5WbtLXmnPlB8xIyt5XMm7f7YCjkDV_t2bw/s1600/FB.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:200px; z-index:1000;}
.BD-Tricksc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3aZgmgSCNPETOzwBjW8rlzqSr2GNBmFQyZqgjPPxacSM1nWweN6peAGAI1UHohCnbTFkLzekojkuntVSfKE5OSs-0tEmcFuCWbEWEIxv6RGQiHcWXfYutgJpbwoAImAGaGB6NxMAQL2QF/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfN7Bgb7rcdqd5tQKNWp3gyvkHOkbUPtsLNal-vq_ps0cVDSD6O8RIlUuFvBt560KLd7okUg9h3FK98fpChjk7VpP_FR4TZiWtJG3FIROUdRuu_o5xZkatym0p_mRBxkNf2KdHVNS9JXk/s1600/TW.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:245px;z-index:1000;}
.BDTricks-kanantwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVxX5KnDSwyhYwRG1EE_9IjGJY7M7UU-kePRhFY49Qj_vIVpOSnqVsDhVj02HAahph2mgqRB-0KgEFBGVWyiFTKQ4-FDA81DL2XwrfZeckFjh5pZmrxN6vCiIP7HlquSDYQmb9FWeWyYQ8/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgniCJjnyzxDK_RVMWOYVOZ_yXPKMLFIfWQZ1q1az9Jy2FP-w_-tqSiT0KIRjTYxeolshl9ALWbs-91Cg6B2Hp6Y07ry5z7r1Meqjq8g30cFls84bMhbVGtllIf_xUiyejBNPEtW7IifF3b/s1600/G+.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:290px; z-index:1000;}
.BDTricks-kananfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik5DHU71paqHSK9YG_J0cdaBHCuu7DCKRxmERH0FoejkqyEawNpvWBY7C2biG453HQvcwVnrGVvZY_eN7CV_9-svExQi0_QyM_xhk0P2RxAIZMmE2i1Oo8hwT254wwd2uci0w_617QHOWm/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDdQG5CRfyWo1dSWQuLuB6KpNozCidtVEGqMxTzYjK4PGYz-AVPINPGIDUQSauCaFwP9hybAKrBzzwknMFgJHZmrDLuRevsGXZE3nwzYuAqKUxJal99nJYJ6G5HsYVtnFy83OistQTEPlQ/s1600/rss.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:335px; z-index:1000;}
.BDTricks-kananrssc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJY30hJQ9S0fQ_kqFIAOH8bAqzNTcpH0tdVoo-1WtXejsAHuTyscs9GozIeUurnalJta_KanfK-N5NZ9TQwVqSybfVJq0iw3pRn1p3Th7Cnjqvk5AsQJcxo2Et-hJ1YoCcCOP0Irb9pTzt/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMELlBmoNQSSBD_lQcX_CW9BSSy8eMYmrpzADSk-Z2F7IOofYfyTfR0asuqyr3gAzllO2Xfh0IgnTbKoOljQFpbft6Cn_IRyNR4ypWF6ijpE2DyRfqbnahyqf_OJjmOL3js-NaqutgmrsK/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvEZAFeGe1A7_YQNgOptaEHpgvaP0WOY-00JNhofeAd57-jPb2GojLstZh6x5H8QATXSnHGuP6c_lx0nrbm1O4AxKVKhcXAK03LnCntdy_PnjxrqkZHPJEG9LjyTEgNbX_MjTKXKRzn3qP/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzfb9AgUT_DZDPn3WOZ7bsK01YfMBr9Pq20O2KobPmZigOjmkvsyc1bMU8dnBwuOUCShxYTcLHm4YCETvhFAs7TBCz0MZqLaMD_9Y1q6EITPfdYtjm545LYxdF3wHRHMnFnU8LgnvlRi7l/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh20jCTrtTCfO7kKz0WJNmB8oe8ZOvT_pg5XMQ5VWADHSkq9ppPPfdXRT9GI1VRAmWNNY6d9_H0CxbXvnLnbkolQ_EJ-p5BSNVWI-3lW-YK6yil4p1YTD7rgGRDlT3LPQ-bXJIIQgJvKzFo/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:

• Add Floating Subscribe Buttons To Blogger Blog
• Floating Recent Tweets Widget For Blogger & WordPress Blog

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 - Gagan Masoun 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 @BlogsDaddy. You can also follow him on Google+.