Awesome Slide Heart Shape Bookmarking Gadget For Blogger

Posted : Wednesday, March 07, 2012 | Post Author : Paul Crowe | 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: "ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee", 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('shareThisShareHeart', ['facebook','twitter','pinterest','linkedin','stumbleupon','email','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareheart'});</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.

77 comments:

  1. Cool paul, let me try that…

    ReplyDelete

     

    Replies

     

  2. 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

  3. Okay.

    Delete

  4.  

  5. 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

     

  6. 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

  7. thanks now its working

    Delete

  8.  

  9. Sylvia Cook PhotographyMarch 8, 2012 at 12:20 AM

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

    ReplyDelete

  10. Very cute 🙂

    ReplyDelete

  11. wonderful!

    ReplyDelete

  12. you are the best. luv this post.

    ReplyDelete

  13. so amazing ^^~
    thank you 😀

    ReplyDelete

  14. Great gadget thanks

    ReplyDelete

  15. I can’t able to find this code: < slash body >

    ReplyDelete

     

    Replies

     

  16. 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

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

    Tell me I needs it.

    Delete

  18. Human Development GroupJune 22, 2012 at 3:36 PM

    First Tick to Expand Widget Templates

    Delete

  19.  

  20. Sue/the view from great islandMarch 8, 2012 at 3:14 PM

    The pin it button does not work!

    ReplyDelete

     

    Replies

     

  21. 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

  22.  

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

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

  26. Its So Co0o0o0l I like it…

    ReplyDelete

  27. 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

  28. its good job dude,thanx very much!!!!!!!!!!

    ReplyDelete

  29. 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

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

    ReplyDelete

  31. ශෙවන්ත පෙරේරාMarch 11, 2012 at 10:28 AM

    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

     

  32. 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

  33. ශෙවන්ත පෙරේරාMarch 16, 2012 at 1:58 PM

    Yahoo! Thanks Paul IT Worked

    Delete

  34.  

  35. Olga@Stardust-Decor&StyleMarch 11, 2012 at 1:18 PM

    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

  36. De Grisofab (India)March 11, 2012 at 2:24 PM

    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

  37. Değmesin Yağlı BoyaMarch 11, 2012 at 8:43 PM

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

    ReplyDelete

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

    ReplyDelete

  39. 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

  40. Love this, works great!

    ReplyDelete

  41. 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

  42. Touching The RainbowMarch 13, 2012 at 12:42 PM

    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

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

    ReplyDelete

  44. This is great!

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

     

    Replies

     

  47. Rachel, you could if you went into the javascript but that’s a lot of work 🙁

    Delete

  48.  

  49. Utsav@Tricks and hacksMarch 14, 2012 at 9:46 AM

    this is awsome widget for my blog

    ReplyDelete

  50. 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

     

  51. Glad you liked it Mel and thanks for sharing 🙂

    Delete

  52.  

  53. Just appear at homepage? How about inside posts?

    ReplyDelete

     

    Replies

     

  54. This gadget is set to appear on all pages..

    Delete

  55.  

  56. OMG thank uuuuu!!! i love this widget!

    ReplyDelete

  57. Cool Widget… I really love it… Will leave it on my blog permanently 😉
    http://the-dirt-farmer.blogspot.com/

    ReplyDelete

  58. this is to good but donot use hart
    use egg

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

  61. like this widget, but why use egg instead of heart 🙁

    ReplyDelete

  62. I just found your site and i added the widget, it”s really cool.

    ReplyDelete

  63. Thanks Paul IT Worked

    ReplyDelete

  64. Thank You Man. Worked :*

    ReplyDelete

  65. 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

  66. I follow the instructions but my Heart isn’t visible..can you help me?

    ReplyDelete

  67. Nice…

    ReplyDelete

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

    ReplyDelete

  69. Not too many peoples’ codes work, but yours does and it is easy, easy! I want more!

    ReplyDelete

  70. thanks for the widget..loved it.:)

    ReplyDelete

  71. Indeed A Cool Plugin !
    I’m Really Going To Apply It On My Blog knowrapid.com …
    Great Post !!

    ReplyDelete

  72. 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

  73. i need a heart pic now showing the egg pic

    ReplyDelete

  74. hey i m try but no display heart….

    other rectangle ovil cricle shape.. pls reply

    mailformesiva@gmail.com

    ReplyDelete

  75. 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

     

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

    Delete

  77.  

  78. Tried to add this but can’t seem to get it to work. Probably just me being dim.

    ReplyDelete

  79. Cosmin Stefan ModoranNovember 14, 2012 at 5:49 PM

    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

  80. Cool Paul, let me try that…Great widget for blogger.

    ReplyDelete

  81. 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

  82. 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

  83. Gayathri LakshminarayananMay 10, 2013 at 6:47 AM

    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

  84. love love love egg !!
    thank you !
    ve may bay di ha noi

    ReplyDelete

  85. Duchess BerrybunnyJanuary 29, 2014 at 1:53 AM

    There is no head on my blog’s HTML.

    ReplyDelete