Beautiful Heart Shape Shared Buttons for your Blog

Here in this post i am sharing a cute little cupid heart which contains sharing buttons. Normally  it looks like in heart shape and on hover the heart shape splits and shows the various shared buttons like Facebook share button, Twitter share button, Pinterest share button etc. See the live demo how it looks like.

Demo

Lets see how to add it to your blog.

Backup your template before editing your template.

* Go to Template > Edit HTML > find the </head> tag

* Copy and Paste the following code Above / Before </head> tag

<!-- Start Heart Bookmarking Gadget Code  -->

<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  -->   

* Now find the </body> tag and  Copy/Paste the below Code Above / Before </body> tag

<!-- Start Heart Share Code  -->

<div style='position: fixed; bottom: 2%; right: 12%;'>

<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 Heart Share Code -->

Note: You can change the location of the Heart by editing the values of bottom: 2%; left: 2%;(which is in red color)

* Save your template.

That's it.

Posted by Kaviarasu at 9:36 AM

Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest

Labels: blog, Blogging, CSS