Awesome Slide Heart Shape Bookmarking Gadget For Blogger




| 77 comments

Blogger Bookmarking Gadget
In this post i want to show you a cool new way to have visitors sharing your blog posts.Share This has always been my Bookmark tool of choice and recently they added a cool new interactive Bookmarking gadget.The gadget in question is a love heart with the share this logo and on hover the heart splits to reveal a selection of bookmarking buttons.It looks awesome and the slide effect is very cool while still being practical.When the heart opens it reveals icons for Facebook, Twitter, Pinterest, LinkedIn, Stumble Upon, Email and the Share This Icon Offers hundreds more bookmarking choices.I think this gadget fixed in the corner of the page on your blog will grab the attention of visitors and generate lots more shares.So below is a tutorial showing you just how to do that, first check out the live demo.

View Demo Button

Add The Split Heart Bookmarking Gadget Top Your Blog


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

Step 1. In Your Blogger Dashboard Click Design > Edit Html

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: &quot;ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee&quot;, 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='shareThisShareHeart'/>
</div>
<script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareHeart&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;pinterest&#39;,&#39;linkedin&#39;,&#39;stumbleupon&#39;,&#39;email&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareheart&#39;});</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.

Drop Your Comments And Questions Below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

77 comments:

  1. Replies
    1. Thanks Ayoola, If you have already added this there was an error in step 5.Change the code from step 5 you added earlier with the updated code there now..

      Delete
  2. this gadget is not working properly ...... i put it to my blog http://governmentandpvtnaukri.blogspot.in/ but when i press this share button its take me anothe site ...its not sharing my blog or post

    ReplyDelete
    Replies
    1. nitindwiveddi - Thanks for the heads up, i had forgot to make a change to the code in step 5.It's updated now so replace the code from step 5 earlier with th code in step 5 now..

      Delete
  3. It works great, nice and easy to install too
    http://sylviacookphotography-seniors.blogspot.com/

    ReplyDelete
  4. you are the best. luv this post.

    ReplyDelete
  5. I can't able to find this code: < slash body >

    ReplyDelete
    Replies
    1. The closing body tag is in every site on the web, if you cant find it with the search bar you can try to manually fint it.It will be near the bottom of your template code..

      Delete
    2. how can i add that coding area (where you write the codes, that black area) in my blog.

      Tell me I needs it.

      Delete
    3. First Tick to Expand Widget Templates

      Delete
  6. Replies
    1. Hi Sue, I see that on the demo, it is not picking up an image.You can remove the pinterest button by removing this code from step 5 - 'pinterest',

      Delete
  7. the best blog theere is and there will beeeeeeeeee www.gadgetfiles.tk

    ReplyDelete
  8. Hi. This is cute. Do I need to replace your blog name/url with mine in the code?

    ReplyDelete
  9. This Was a great Tutorial! Easy to follow *I am a newbie, and I had no troubles at all* Thanks!

    ReplyDelete
  10. Thanks for this blog :) One of my blog's background turned to white and it is not looking good now. I tried correcting it by edit htlm option but I was unable to do so. Please help. Thanks in advance and if you need my blog's address then please ask:)

    ReplyDelete
  11. its good job dude,thanx very much!!!!!!!!!!

    ReplyDelete
  12. That's simply awesome!
    Buddy, I've shared this gadget with my readers at
    http://www.mybloggertips.com/2012/03/slide-open-heart-bookmarking-gadget-for.html
    I gave you full credits. :)
    Cheers!

    ReplyDelete
  13. Not sure if my question was received before...can you tell me if this works with Dynamic Views templates? Thank YOU!

    ReplyDelete
  14. oops i did as you told but i got an ovel shape widget http://www.colombozone.com/ What do i have to do now?

    ReplyDelete
    Replies
    1. The ovel shape is another theme for this gadget but I'm not sure why you are getting this not the heart.Try removing the code and adding it again..

      Delete
  15. Hey Paul,
    this is great, but I was wondering is there a way to add the heart at the end bottom of each post?

    ReplyDelete
  16. Hi, Paul I tried a lot but I have get a Round Ball Shape not the heart shape. Please tell me what to do.

    ReplyDelete
  17. This gadget makes my blog very very fast from 3.80 s to 10.96s
    Thanks very beatiful but no..

    ReplyDelete
  18. Awesome Widget Can We Replace Heart With Any Other Image ??

    ReplyDelete
  19. Hi Paul. A couple of days back, I was Googling for new gadgets & widgets. But didn't know really how to edit the template. But your instructions were so fantastic that I successfully installed it......most important, I have learnt the process of editing html. Thanks a ton. Great work.

    My blog address is http://thirstydesires.blogspot.in/

    ReplyDelete
  20. Hi paul, I Need A Random Post Widget Like 2 rows*2 coloumns(Like LinkWithin)...I cannot Find these type of widget On The Web ...Please Make This Widget For Me If Possible....Thankyou...

    ReplyDelete
  21. Looks great, thank you!
    I only have the problem that it kinda disappears beyond the post background. I have this problem with every gadget that is static, like back to top buttons and so on. And i just cant figure out what I have to change.

    ReplyDelete
  22. demo is really very good , i will try it soon as possible

    ReplyDelete
  23. Is there a way to put this one every post and not just the homepage?

    ReplyDelete
  24. Is there a way to change the color of the heart to pink?

    ReplyDelete
    Replies
    1. Rachel, you could if you went into the javascript but that's a lot of work :(

      Delete
  25. Hi Paul, thank you for the widget. I installed it on my blog and also shared this with my readers. I gave you full credit and you can see it at

    http://www.craftymeldesigns.com/2012/03/slideout-heart-bookmarking-gadget.html

    Thanks again,
    Melissa

    ReplyDelete
    Replies
    1. Glad you liked it Mel and thanks for sharing :)

      Delete
  26. Just appear at homepage? How about inside posts?

    ReplyDelete
    Replies
    1. This gadget is set to appear on all pages..

      Delete
  27. OMG thank uuuuu!!! i love this widget!

    ReplyDelete
  28. Cool Widget... I really love it... Will leave it on my blog permanently ;)
    http://the-dirt-farmer.blogspot.com/

    ReplyDelete
  29. this is to good but donot use hart
    use egg

    ReplyDelete
  30. how do i link my interest page and Facebook home page to open up when icons are clicked?
    Thanks

    ReplyDelete
  31. Is there a way to fix this so that pinterest is showing images when clicked, rather than just removing the button altogether?

    ReplyDelete
  32. like this widget, but why use egg instead of heart :(

    ReplyDelete
  33. I just found your site and i added the widget, it"s really cool.

    ReplyDelete
  34. Hello, I followed these directions today and ended up with the egg not the heart. What do I need to do to change it? Otherwise this is really good. Thanks

    ReplyDelete
  35. I follow the instructions but my Heart isn't visible..can you help me?

    ReplyDelete
  36. Its great, I already installed this slide on to my blog (Techmero.com Thankyou for this great coding

    ReplyDelete
  37. Not too many peoples' codes work, but yours does and it is easy, easy! I want more!

    ReplyDelete
  38. thanks for the widget..loved it.:)

    ReplyDelete
  39. Indeed A Cool Plugin !
    I'm Really Going To Apply It On My Blog knowrapid.com ...
    Great Post !!

    ReplyDelete
  40. Thanks so much for this!! I'm not at all good with this kinda stuff but your steps make it so easy!! I'm loving your site right now!!!

    ReplyDelete
  41. i need a heart pic now showing the egg pic

    ReplyDelete
  42. hey i m try but no display heart....

    other rectangle ovil cricle shape.. pls reply

    mailformesiva@gmail.com

    ReplyDelete
  43. hello paul i placed the code successfully on my blog http://chinizle.blogspot.com but after a while the gadget became transparent and now appears as two rectangular boxes that have made my blog look ugly. please how can i remove the sliding heart?

    thanks.

    ReplyDelete
    Replies
    1. Not sure why you had that problem but I checked your blog and I see you managed to remove th code.

      Delete
  44. Tried to add this but can't seem to get it to work. Probably just me being dim.

    ReplyDelete
  45. Hey! Great widget for blogger i must say! Thank a lot! Q: How can i change the heart's colour? Is there any chance of changing the heart's opening? maybe downside ?! Thanks for your help!

    ReplyDelete
  46. Cool Paul, let me try that...Great widget for blogger.

    ReplyDelete
  47. hey, i added the widget,but when someone clicks on facebook for example how do i make sure they will come to my facebook page?

    ReplyDelete
  48. Hi Dude. When i was copied the Split Heart Bookmarking Gadget code in my blog it was not working. I am unable to find in my blog. I copied the above code and i paste in Template-> Edit HTML and i followed the above procedure. What is the reason? Could you plz clarify my doubt.

    ReplyDelete
  49. Hey, it was working fine for almost six months now, but for the past few days it does not. Nothing is visible except the link to your site.

    I really loved it and would like to have it back. Can you look into it?

    Does it have anything to do with the new blogger template interface?

    @
    http://musings-over-nothing.blogspot.in/

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us