How to create Awesome Slide Open Heart Bookmarking Gadget For Blogger

The heart bookmarking gadget has a cool slide out effect that makes the heart icon split each time you mouse hover it, displaying several bookmarking buttons like Facebook, Twitter, Pinterest, LinkedIn, Stumble Upon, Email and many more bookmarking choices. This gadget/widget comes with a fixed position and stays in the corner of the page, so it will grab your readers attention and make them share your posts easily.

I'm sure you will love it after seeing the demo of this gadget:

View Demo

Adding The Open Heart Bookmarking Gadget to Blogger

Step 1. Go to your Blogger Dashboard, select Template and click the Edit Html button:

 ....select the "Expand Widget Templates" box (it is recommended to make a backup first)

Step 2. Find the following tag (Ctrl + F):

</head>

Step 3. Paste above/before the </head> tag, the following code:

<!-- Start Open Heart Bookmarking Gadget From http://www.helplogger.blogspot.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 Open Heart Bookmarking Gadget From http://www.helplogger.blogspot.com/ -->

Step 4: Now find (CTRL + F) this tag:

</body>

Step 5: Paste above/before </body> tag... the following code:

<!-- Start Open Heart Bookmarking Gadget From http://www.helplogger.blogspot.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.helplogger.blogspot.com/">Blogger Gadgets</a>
<!-- End Open Heart Bookmarking Gadget From http://www.helplogger.blogspot.com/ -->

How To Move The Position Of The Gadget

To move the position of this widget from the bottom right corner of your blog to any location you want, change the percentages of the red code from Step 5.

Step 6. Now preview and Save Template. Then your Done!