Floating heart model sharing and bookmarking gadget for blogger

Heart sharing tool is an awesome sharing gadget for blogger. It created by Sharethis team as a valentine gift. It is run with a cool sliding effect. A lovely heart will be float at bottom left side of every blog page, when a user move mouse above the heart it opens and appear some bookmarking and sharing buttons like Twitter, Facebook, LinkedIn,  Pinterest, Stumble Upon, Email and many more. It looks very nice so it grab user attention and increase shares and gets your blog famous on social networks.

View Demo

How to add floating share button on your blogger blog?

Step 1: Log in to your Blogger Dashboard

Step 2: Select Template from Side Menu and click on EDIT HTML button

Step 3: Find this tag </head> (Type Ctrl+F to find the tag easily)

Step 4: Copy & Paste below Script above/below the </head> tag

<!-- Start Floating Heart Sharing Gadget From http://www.teccplus.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 Floating Heart Sharing Gadget From http://www.teccplus.blogspot.com/ -->

Copy Code

<!-- Start Floating Heart Sharing Gadget From http://www.teccplus.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: "ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee", onhover:false}); </script> <link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/> <!-- End Floating Heart Sharing Gadget From http://www.teccplus.blogspot.com/ -->

Step 5: Now find </body> tag (Use Ctrl+F to find)

Step 6: Copy & Paste below Script above/below the </body> tag

 <!-- Start Floating Heart Sharing Gadget From http://www.teccplus.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://www.teccplus.blogspot.com/">Blogger Gadgets</a>
<!-- End Floating Heart Sharing Gadget From http://www.teccplus.blogspot.com/ -->

Copy Code

<!-- Start Floating Heart Sharing Gadget From http://www.teccplus.blogspot.com/ --> <div style='position: fixed; bottom: 2%; left: 2%;'> <div class='shareEgg' id='shareThisShareHeart'/> </div> <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.teccplus.blogspot.com/">Blogger Gadgets</a> <!-- End Floating Heart Sharing Gadget From http://www.teccplus.blogspot.com/ -->

How to Change the position of the  Floating Heart?

To change the position of the Floating Heart Sharing gadget from the bottom left corner of your blogger blog, just change the % of red colored code on Step 6.

Note: This share button also working with all websites.

Please support us by sharing this post on social networks!