Menu Close Menu

How to Add Fixed Position Slide Open Heart Bookmarking Gadget to blogger

Egg Style SharingShare your blog in popular social networking/bookmarking sites is very important to get good traffic and I think this is the easiest way for increase our blog/website traffic. This is indeed the most beautiful Social Network Heart Style  Sharing widget featuring the bottom Social Network sites (Google Plus, Twitter and Facebook ). In this tutorial we'll create Heart Style Sharing button for your blog. With the 'Share this' button visitors will be able to share your content with their friends or community, and you know yourself what will happen. ShareThis is a very popular service offering multiple Social Bookmarking Widgets for blogs and websites. i have a Blogger Tips show you how to add the new Share This Heart Style Buttons to various position on your blog. You can see the buttons in question to the end of this Article and that position will be one of the options for your blog. In this part I going to show you  Heart Style Sharing buttons Horizontally Align at the Bottom of your blog.
ShareThis Tool Tutorials
Part 4: How To Add Share This Heart Style Sharing.
Note:-  Always Make a Backup of Your Template Before You Edit Your Template –( how to make a template backup)
1. Go To Your Blogger Dashboard>> Template>> Proceed.
2. Press CTRL+F and find the following Code in you template. (how to find code using search bar)
</head>
3. Paste The Following Code Above/Before </head>
<script type="text/javascript" src="http://w.sharethis.com/gallery/shareegg/shareegg.js"></script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "1cce35ce-6744-4bac-9fa5-8f17a67a6fa6", doNotHash: false, doNotCopy: false, hashAddressBar: false, onhover:false});</script>
<link rel="stylesheet" type="text/css" href="http://w.sharethis.com/gallery/shareegg/shareegg.css" media="screen" /></link>
4. Next Find the following piece of code.
</body>
5. and paste the following code before/above </body>.
<script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareHeart', ['googleplus','facebook','twitter','pinterest','linkedin','email','sharethis'], {title:'Happy Valentines Day!',url:'http://www.sharethis.com',theme:'shareheart'});</script>
6. and finally add the these lines where you want to show widget. if you want to show widget at the bottom of your blog then follow this step. Find This line
</body>
7. Copy and place anywhere Before the code from step 5.
<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareHeart'/>
</div>
<div id='shareThisShareHeart' class='shareEgg'></div>
Need Help…
The Gadget is currently set to be in the bottom right corner of your blog but you can easily change this.In yellow above you can see bottom: 2%; left: 2%;.You can 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 of the page.You can also change the percentages to have it further from the bottom/top and left/right. if you have any trouble about this tutorial feel free to post a comment below in comment section and I will solve the problem as soon as time allow. thanks for  reading our post…

"Be the first to express your thoughts" :

  1. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  3. This comment has been removed by a blog administrator.

    ReplyDelete
  4. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  5. This comment has been removed by a blog administrator.

    ReplyDelete

Important - Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies.If you use Name/URL don't use keywords as your name. We love to hear from you! Leave us a comment.
To ensure proper display, HTML/XML/JavaScript need to be Encode first using this Encoder Tool Then paste the Encoded code here.