Menu

How to Add Heart Bookmarking Widget on Blog (Blogger)


This Valentine you can decorate your blog with a beautiful bookmarking widget in heart shape. It is a floating widget and will stay at one place even if you scroll the page. The current position of this widget is bottom left. It has an amazing and eye catching animation on mouse-over, the heart open up and the social bookmarking icons will be visible.

Heart Bookmarking Blogger

Here are the steps to add the Heart Bookmarking Widget on Blogger:

Step 1: Login to Blogger.com

Step 2: From the left navigation, click on "Template" and then select "Edit HTML"

Step 3: Find the below code using search box (CTRL+F)
</head>

Step 4: Copy and Paste the below code above </head>
<!-- Start Heart Bookmarking Widget From http://www.coloredblog.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 Widget From http://www.coloredblog.com -->

Step 5: Now find the below code using search box (CTRL+F)
</body>

Step 6: Copy And Paste this code before </body>
<!-- Start Heart Share Code From http://www.coloredblog.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.coloredblog.com/2014/02/how-to-add-heart-bookmarking-widget-on.html" target="_blank">Widget</a>
<!-- End Heart Share Code From http://www.coloredblog.com -->

Step 7: Save the Template using "Save Template" button

If you found this post interesting, don't forget to like us on Facebook, Google+ and follow on Twitter.

Share This:

Vikrant Agarwal

Vikrant Agarwal is the founder of Pixesign.com and ColoredBlog.com. When he is not working on blog you can find him climbing mountains.

  • To add an Emoticons Show Icons
  • To add code Use [pre]code here[/pre]
  • To add an Image Use [img]IMAGE-URL-HERE[/img]
  • To add Youtube video just paste a video link like http://www.youtube.com/watch?v=0x_gnfpL3RM