Tuesday 13 March 2012

Adding a Slide Out Heart Bookmarking Gadget


Every blogger wishes to show or add new and cool widgets/gadgets to their blogs. One of the most important widget for a blog is the sharing or bookmarking widget. Once you've got an attractive Sharing widget installed, you'd catch a whole lot of attention of your visitors, you'd get maximum number of your posts shared. This gadget is basically a "heart", when you hover over it, it splits and reveals the Facebook, Twitter, Pinterest, LinkedIn, Stumble Upon, Email and the Share This Icons. It would look like this


Add the Slide Open Heart Bookmarking Gadget!

  1. Go to Blogger >> Design >> Edit HTML.
  2. Check the box beside "Expand Widgets Template".
  3. Now find </head>
  4. Copy and Paste the following code right above </head>
<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'/>

   5. Now find </body>
   6. Copy and Paste the following code right above </body>.

<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.mybloggertips.com/">Blogger Gadgets</a>

   7. Save your Template and you are done!
If you have any problem or any query, simply drop them in the comment box below. :)

No comments: