This post will show you how to implement a beautiful and awesome Slide Out Heart Bookmarking Gadget on blogger/blogspot blogs. The gadget looks great and the slide effect is very cool. When the heart opens, it shows icons from several social networking sites like Facebook, Twitter, LinkIn, Stumble Upon. Sharing through email is also there and lastly the ShareThis Icon that offers a hundreds of more bookmarking choices. This gadget is fixed on the lower left corner of the blog if your just implementing it as is in the code. But you can change the position of the gadget which is to be learn on the tutorial below.Adding The Slide Out Heart Bookmarking Gadget To Your Blog
1. Go to your Dashboard >> Design >> Edit HTML.
2. Find the below on your template HTML. Just use Ctrl+F and copy paste the code on the search bar to find code easier.
</head>
3. Copy and paste the code below directly above or before that "</head>" tag.
<!-- Start Heart Bookmarking Gadget Code From http://www. smashingnotes.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 Heart Bookmarking Gadget Code From http://www.smashingnotes.blogspot .com/ -->
4. Now find this piece of code on your template HTML.
</body>
5. Then copy and paste the codes below directly above or before that "</body>" tag.
<!-- Start Heart Share Code From http://www.smashingnotes.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.spiceupyourblog.com/">Blogger Wordpress Gadgets</a><!-- End Heart Share Code From http://www. smashingnotes.blogspot .com/ -->
IMPORTANT: The gadget is set to be in the bottom left corner of your blog but you can easily change the code in color red "bottom: 2%; left: 2%;". Change bottom to top for it to be at the top of the page and left to right for it to be on the right side of the page. You can also change the percentage to move the gadget from the bottom/top and left/right.
6. Finally you can save your template.
Check it out! And you will be amazed by this great gadget. Drop your questions on the comment box below.
0 comments:
Post a Comment