Cool Fixed Position Slide Open Egg Social Bookmarking Gadget For Blogger

Posted : Tuesday, April 03, 2012 | Post Author : Paul Crowe | 33 comments

A few weeks ago i published “Add An Awesome Fixed Position Slide Open Heart Bookmarking Gadget To Blogger“.In this post we have the same social bookmarking gadget but this time it will not be shaped as a heart but instead an ovel egg shape.The share egg sits in the bottom corner of your blog and remains fixed as the reader scrolls the page.On hover the egg slides open to reveal bookmarking buttons for your readers to share posts on Facebook, Twitter, Google +, Blogger, LinkedIn, Stumble Upon, Email and the Share This Icon Offers hundreds more bookmarking choices.This is a great gadget to get the attention of your readers and have them bookmarking your posts.I have the tutorial to add the gadget to your Blogger blog below but first check out the screenshot and live demo.

Share Bookmarking Gadget Blogger

View Demo Button

Add The Share This Egg To Your Blog


Remember Always Back Up Your Template Before You Make Changes – How To Back Up A Blogger Template

Step 1. In The New Blogger Dashboard Click The Drop Down Menu For Your blog And Choose > Template > Under your blogs screenshot choose “Edit Html” > Then Proceed, as shown in the video below.

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – How To Find Code In Blogger Template Template)

  • </head>

Step 3. Copy and Paste the following code Directly Above / Before </head>

<!-- Start Heart Bookmarking Gadget Code From http://www.spiceupyourblog.com/ --><script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: "bea50586-2b9f-448d-947a-01385f28e305", onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/><!-- End Heart Bookmarking Gadget Code From http://www.spiceupyourblog.com/ -->

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – How To Find Code In Blogger Template Template)

  • </body>

Step 5. Now Copy And Paste This Code Directly Above / Before </body>

<!-- Start Heart Share Code From http://www.spiceupyourblog.com/ --><div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareEgg', ['facebook','twitter','googleplus','linkedin','blogger','stumbleupon','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareegg'});</script><a href="http://www.spiceupyourblog.com/">Blogger WordPress Gadgets</a><!-- End Heart Share Code From http://www.spiceupyourblog.com/ -->

Important, Move The Position Of The Gadget :

The Gadget is currently set to be in the bottom right corner of your blog but you can easily change this.In yellow above you can see bottom: 2%; left: 2%;.You can change Bottom to top for it to be at the top of the page and left to right for it to be on the right of the page.You can also change the percentages to have it further from the bottom/top and left/right.

Step 6. Save Your Template.

That’s it the gadget has been added to your blog.Make sure to check out more of our Blog Gadgets and Social Bookmarking Gadgets.

33 comments:

  1. I tried to install the heart one previously, but it actually came out as an egg, which i preferred anyway. But when i put the exact same cosde into another blog, it came out as a heart that time.

    ReplyDelete

  2. Whatta great idea ! But, can you please make this gadget without javascript, only CSS I mean.

    ReplyDelete

  3. My heart turned into an egg. How do I change it back?

    ReplyDelete

  4. Varinder Pal SinghApril 4, 2012 at 5:09 AM

    Great it looks too pretty. Thanks for this amazing sharing widget.

    ReplyDelete

  5. Jafar @ Trace TricksApril 4, 2012 at 6:43 AM

    WOW! Nice widget. Amazed after watching it.

    ReplyDelete

  6. Very cute egg, thanks for the share!

    ReplyDelete

  7. Thanks, I did for my blog, it’s really great!

    ReplyDelete

  8. Wow! works perfectly to me 🙂

    ReplyDelete

  9. wow …. good info 🙂

    ReplyDelete

  10. Kelab Pengguna SMK MembakutApril 7, 2012 at 10:09 AM

    I like to add it to my blog. Unfortunately, my blog doesn’t have body tags. Can you tell me how to do it in my case?

    ReplyDelete

  11. I love it,it is working very fine… thanks.

    ReplyDelete

  12. karensomethingorotherApril 16, 2012 at 7:58 PM

    Hi, I added the gadget a while ago as a HEART, and it has changed to an egg on its own. Help! How do I change it back to a HEART??? Why did it change, when I never changed the code myself? Truly I am a bit of an HTML idiot, but damn it, I want the heart back!

    ReplyDelete

  13. I added this gadget on my blog.Its being shown on the home page but not on any other pages…any help???

    ReplyDelete

  14. Did everything. Nothing happened. Oh well…

    ReplyDelete

     

    Replies

     

  15. The code is working Vickie so I’m afraid you must be making an error somewere.Gotta keep trying ..

    Delete

  16.  

  17. Hi, I prest Ctrl f and then searched for < / body > but for some reason it didn’t show up. I’ve searched for it several times with the same result each time. Any suggestions?

    ReplyDelete

     

    Replies

     

  18. It has to be there Nicky, if you scroll to the end of the code it will be very close to the bottom..

    Delete

  19.  

  20. It didn’t work for me, I don’t know what I’m doing wrong :/

    ReplyDelete

  21. It worked for me thanks for sharing…now my blog become more attractive…thank u very much….great job 🙂

    ReplyDelete

  22. Two Steps From HomeJune 9, 2012 at 10:20 AM

    This is really nice post thank you.

    ReplyDelete

  23. its really cool gadget…thanks:-)

    ReplyDelete

  24. le nouveau voleurJuly 30, 2012 at 10:56 AM

    thanks
    for this cool fixed

    ReplyDelete

  25. Can I add multiple eggs on the same webpage?
    If yes, how.
    Thanks
    Hajni

    ReplyDelete

  26. thanks it worked for me

    ReplyDelete

  27. Ama @TipsTrikBlogging.ComNovember 22, 2012 at 1:47 PM

    wow nice one egg, thanks for sharing this widget.

    ReplyDelete

  28. got it now!!!!!!really cool and working,thanks for posting

    ReplyDelete

  29. The Left Side Of HereDecember 28, 2012 at 5:23 AM

    This works perfectly for me! Thank you! It looks great…I love it!!

    ReplyDelete

  30. good work nice code

    ReplyDelete

  31. Alexander SmoljanovićFebruary 21, 2013 at 11:37 AM

    thanks. nice gadget

    ReplyDelete

  32. awesome……done!!! thnx

    ReplyDelete

  33. Do you know if you can get the egg to open from right to left instead of left to right?

    ReplyDelete

  34. This is awesome. Great widget 🙂

    ReplyDelete

  35. Where can i find this widget? How could i install this and from where

    ReplyDelete