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.
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:
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
Whatta great idea ! But, can you please make this gadget without javascript, only CSS I mean.
ReplyDelete
My heart turned into an egg. How do I change it back?
ReplyDelete
Great it looks too pretty. Thanks for this amazing sharing widget.
ReplyDelete
WOW! Nice widget. Amazed after watching it.
ReplyDelete
Very cute egg, thanks for the share!
ReplyDelete
Thanks, I did for my blog, it’s really great!
ReplyDelete
Wow! works perfectly to me 🙂
ReplyDelete
wow …. good info 🙂
ReplyDelete
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
I love it,it is working very fine… thanks.
ReplyDelete
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
I added this gadget on my blog.Its being shown on the home page but not on any other pages…any help???
ReplyDelete
Did everything. Nothing happened. Oh well…
ReplyDelete
Replies
The code is working Vickie so I’m afraid you must be making an error somewere.Gotta keep trying ..
Delete
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
It has to be there Nicky, if you scroll to the end of the code it will be very close to the bottom..
Delete
It didn’t work for me, I don’t know what I’m doing wrong :/
ReplyDelete
It worked for me thanks for sharing…now my blog become more attractive…thank u very much….great job 🙂
ReplyDelete
This is really nice post thank you.
ReplyDelete
its really cool gadget…thanks:-)
ReplyDelete
thanks
for this cool fixed
ReplyDelete
Can I add multiple eggs on the same webpage?
If yes, how.
Thanks
Hajni
ReplyDelete
thanks it worked for me
ReplyDelete
wow nice one egg, thanks for sharing this widget.
ReplyDelete
got it now!!!!!!really cool and working,thanks for posting
ReplyDelete
This works perfectly for me! Thank you! It looks great…I love it!!
ReplyDelete
good work nice code
ReplyDelete
thanks. nice gadget
ReplyDelete
awesome……done!!! thnx
ReplyDelete
Do you know if you can get the egg to open from right to left instead of left to right?
ReplyDelete
This is awesome. Great widget 🙂
ReplyDelete
Where can i find this widget? How could i install this and from where
ReplyDelete