How To Add Floating Social Bookmark with Easing Effect

Social bookmarking is admittedly helpful for those those who have web site or journal. Due to minimize the use of javascript, I deliberately made ​​it plain widget without the use of a certain effect with the consequences of using images to create widgets that more and more. Well, now i’ll provides a tutorial or a way to produce a floating social bookmarking appliance with extra easing result jquery library and after all with the employment of a smaller image.

With the addition of jquery, if you set the indicator on one in every of the social bookmarker icon, it’ll pop out slowly, Solo softer sort of a blue blood taking off of the palace, it had been thanks to the result of easing the present on jquery-ui.min . additionally to easing the results that I add the appliance, also because the sort of social media that I place lots a lot of. This appliance is galvanized from Johny Asal Responsive Template Blogger Asal Jadi.

How To Add Floating Social Bookmark with Easing Effect

Live Demo

Add Floating Social Bookmark with Easing Effect To Blogger/Blog

  • Log in to Blogger
  • Go to Template >> Edit HTML (tick expand widget templates )
  • Put the following CSS code above ]]></b:skin>

For jquery library blue above, if the template you are using is installed, only abandoned.

  • Further calling widget, place the HTML code below before </ body> :

Change the color blue above, with each ID should not be confused with the neighbor ID.

  • Finally, Save Templates and your done!
  • If you have any doubts don’t hesitate to ask.Please Comment.
  • Now If  You Enjoy This Post! Please Take 5 Seconds To Share It.

BLOGGER HEROE runs on the Genesis framework

Genesis Framework

Genesis empowers you to quickly and easily build incredible websites with WordPress.Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go. It's that simple - start using Genesis now!

The following two tabs change content below.
Adrian Lucernas is the founder of Blogger Heroe.. his appreciation about our technology. He is open minded who's willing to explore beyond his knowledge, And God is the center of his being.

Be sure to subscribe to the Blogger Heroe newsletter and get regular updates about awesome posts just like this one and more!


  1. Innocence says:

    wow, thank you! I tried it so often and now it finally worked!!! Greetings from Germany

  2. Bishnu Subedi says:

    nice one bro, keep rocking !

    Greetings from

  3. adrian lucernas says:


    @Bishnu Subedi:

    ;;;It was my pleasure

  4. Ben Dizon says:

    It’s not actually working. Even in your live demo. Hope you’ll fixed it. I’ll be back tomorrow.

  5. adrian lucernas says:

    @Ben Dizonupon checking my live demo Its working fine. What kind of error did you encountered? Please check this blog for another demo:
    Let me know if you have any problems again.

  6. Ben Dizon says:

    @adrian lucernasThanks! I forgot to put the jquery code before the /head tag. Thanks again and more power to your blog! :)

  7. H.R. Bradford says:

    Is there any way to add it on the opposite side?

  8. adrian lucernas says:

    @H.R. BradfordIf you want this to add on oposite side simply find this code:

  9. a i m e e says:

    Hi, I would like to make it wider? change the width maybe. Since I placed it on the left and when I hover it, it does not show the complete phrase like “Follow on Facebook”.

    I would like to widen it to show the whole phrase. Thanks! :) This has been very useful.

  10. Adrian Lucernas says:

    @a i m e e
    Add the jquery and javascript code, mabey you didn’t add the code.. :)

  11. Leonsius Sompotan says:

    I have problems with this. At the time of the blue script above put, successful but I did not get a display bloggers other than that. After the blue script above deleted, nothing has changed on my blog. for info, I use dynamic templates blogger.

  12. Adrian Lucernas says:

    @Leonsius SompotanMaybe you forgot to add the jquery and javascript code, try to install the code correctly, and let me know if you faced another problem. Happy blogging.. :)

  13. Muhammad Ehsan Qureshi says:

Speak Your Mind