Friday, March 9, 2012

Awesome Slide Open Heart Bookmarking Gadget For Blogger

This widget released by Sharethis team was made as a Valentine gift from them. 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 other 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!


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.blogger.chipchuck.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.blogger.chipchuck.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.blogger.chipchuck.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>
<!-- End Open Heart Bookmarking Gadget From http://www.blogger.chipchuck.com/ -->

How To Move The Position Of The Gadget

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

Step 6. Now preview and Save Template. That's it!

No comments:

Post a Comment

Search This Blog

Recent Post

Recent Posts Widget

Blog Archive

Popular Posts