How to Add Heart Bookmarking Widget on Blog (Blogger)

How to Add Heart Bookmarking Widget on Blog (Blogger)

By Unknown - February 06, 2014 -

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.

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>
<div class="code" style="height: 170px;"> <!-- Start Heart Bookmarking Widget From http://www.coloredblog.com --><br /> <script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><br /> <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><br /> <script type='text/javascript'>stLight.options({publisher: "ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee", onhover:false}); </script><br /> <link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/><br /> <!-- End Heart Bookmarking Widget From http://www.coloredblog.com --> </div>
Step 5: Now find the below code using search box (CTRL+F)

</body>

Step 6: Copy And Paste this code before </body>
<div class="code" style="height: 200px;"> <!-- Start Heart Share Code From http://www.coloredblog.com --><br /> <div style='position: fixed; bottom: 2%; left: 2%;'> <br /> <div class='shareEgg' id='shareThisShareHeart'/> <br /> </div> <br /> <script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareHeart', ['facebook','twitter','pinterest','linkedin','stumbleupon','email','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareheart'});</script><a href="http://www.coloredblog.com/2014/02/how-to-add-heart-bookmarking-widget-on.html" target="_blank">Widget</a><br /> <!-- End Heart Share Code From http://www.coloredblog.com --> </div>
Step 7: Save the Template using "Save Template" button

Click here for LIVE DEMO

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

Pages: Previous Next

Share This:

• Like
• Tweet
• +
• Pin it

Post Tags:

Blogging Social Tutorials

• Prevoius
• Next

Vikrant Agarwal

Vikrant Agarwal is a Creative Designer. When he is not working on blog you can find him climbing mountains.