Add An Awesome Fixed Position Slide Open Heart Bookmarking Gadget To Blogger

Most of the Bloggers like to have a unique look to their blogs by adding widgets that can catch the eye of the readers and get them bookmarking your blog.In this post I want to show you a cool new way to have visitors sharing your blog posts through slide out Heart Bookmarkng gadget.This is an awesome widget for bloggers.When the heart opens it shows icons of Facebook,Twitter,Pinterest, LinkedIn, Stumble Upon, Email and the Share This Icon Offers hundreds more bookmarking choices.So,below is a tutorial showing you just how to do that.... 

VIEW DEMO

Add The Split Heart Bookmarking Gadget Top Your Blog:

Remember Always Back Up Your Template Before You Make Changes

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 

</head>

Step 3. Copy and Paste the following code Directly Above / Before </head>

<!-- Start Heart Bookmarking Gadget Code From http://technoclouds.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 Heart Bookmarking Gadget Code From http://technoclouds.blogspot.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 

</body>

Step 5. Now Copy And Paste This Code Directly Above / Before </body>

<!-- Start Heart Share Code From http://technoclouds.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://technoclouds.blogspot.com">Blogger Gadgets</a>
<!-- End Heart Share Code From http://technoclouds.blogspot.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 RED 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.