Beautiful Slide Open Heart Social Bookmarking Gadget For Blogger - Helper Blogger

Blogger Widgets | Templates | Tutorials

Latest

Friday, 16 March 2012

Beautiful Slide Open Heart Social Bookmarking Gadget For Blogger

Recently we posted about an open egg social bookmarking gadget for blogger.Now we are giving the same kind of gadget but little changed in icon.Now egg has become heart :).Sharethis recently added this cool social bookmarking gadget.And we succeed to make bloggerized version of this gadget.The gadget comes with a love heart with share this logo when anyone hover on it the heart splits to reveal a selection of bookmarking buttons.When the heart opens it reveals social bookmarking icons such as Facebook, Twitter, Pinterest, LinkedIn, Stumble Upon, Email and the Share This Icon Which Offers hundreds more bookmarking choices.I have kept the installation so easy,yo just have to copy and paste the code.




Add Slide Open Heart Bookmarking Gadget To Blogger



  1. Go to Blogger Dashboard > Design > Edit HTML.
  2. As usual take a backup of your template.
  3. Now find for </head> tag.
  4. Add below code just before </head> tag.


<!-- Social Bookmarking Gadget By http://www.helperblogger.com/  start-->
<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'/>
<!-- Social Bookmarking Gadget By http://www.helperblogger.com/  end-->


 5. Now search for </body> tag.
 6. Add below code just before </body> tag.

<div style='position: fixed; bottom: 3%; 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>


Customizations (Optional)


The Gadget is currently set to be in the bottom right corner of your blog if you want to customize this gadget then follow below steps :


  • To show it at top just change bottom to top
  • To show it on right side change left to right
  • Set the values of percentages as you wish...
  • Save your template and you are done....

If you have any queries about settings of this gadget then feel free to ask it to me.I'll glad to help you...

12 comments:

  1. Hi
    Looking at your demo beautiful slide open heart social bookmarking gadget for blogger I really wanted to add to my blog site. But I'm having a little difficulty understanding your instructions. I tried copy and paste to template 'edit html' adding the first code just before head tag. But then it gets confusing to add the 2nd code in the exact same place. Nothing shows on my blog?? any help please. I think its one of the best gadgets I've seen it would be shame not to use it....

    ReplyDelete
  2. @Kelly B's Art - Add second code just before </body> tag.Thanks for grabbing my attention on it.I have also updated my code...

    ReplyDelete
  3. hi Rahul why my blog show it another picture it not show heart. visit me and see it http://moviesdl4u.blogspot.com/

    ReplyDelete
    Replies
    1. I have just checked that.It sometimes shows egg and sometimes shows heart.The code is 100% correct.

      Delete
  4. the pinterest button doesnt appear to work properly?

    ReplyDelete
  5. For some reason when i click one of the post links... i.e. facebook it doesnt show the blog post, but instead shows a post about sharethis. Nothing about my blog is explained when i click it. Not sure what I did wrong exactly...any help would be appreciated

    ReplyDelete
    Replies
    1. oh by the way the blog is c-mog.blogspot.com

      Delete
  6. I can't make it work I'm so bad at using computers :(
    SOS

    ReplyDelete
  7. Hi
    Nice blog Post
    I have Used This Code After Copying From Here
    Friends Check Out
    Pak India fashion styles Provides Updates On Fashion In Pakistan & India.
    http://pakindiafash.blogspot.com

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM