RealcomBiz
Pin It

Add Floating Share Bar/Widget To Your Blogger Blog With ShareThis

In my previous post, i have discuss on how to add ShareThis widget below all your post, but today am sharing with you how to add a floating ShareThis widget on your blog. As a blogger sharing tools is very essential on blog for you to drag a real organic traffic, because most readers may find your post interesting and want to share it with there blogger mate, so for you to spread out your post to a wide range, you will need a sharing tools on your blog/site.
This sharing widget will automatic move up and down as your readers scroll up and down, it offers the same function with share buttons, but the only difference is that it floats and move up and down, and before you can use this widget you must have a ShareThis account, you can register for a ShareThis account.

Add Floating Share Widget
  • Login to your blogger dashboard
  • Click on "Design" > "Edit HTML" > Back up your template
  • Mark/Tick "Expand Widget Template"
  • Use ctrl F to find </head>
Copy and paste the code below immediately Before/Above </head>

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>

The code highlighted determines how you want your articles to be shared.
> Choose "True" if you want readers to share your article without leaving your site [Multi-post].
> Choose "False" if you want readers to be automatically redirected to the site in which they want to share your content [Direct-post]

Find the next code </body>

Copy and paste the code below Before/Above </body>

<b:if cond='data:blog.pageType == "item"'>
<script>
var options={ "publisher": "Enter Publisher Key", "position": "left", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "twitter", "linkedin", "pinterest", "email", "sharethis"]}};
var st_hover_widget = new sharethis.widgets.hoverbuttons(options);
</script>
</b:if>

Replace the highlighted portion above "Enter Publisher Key" with your ShareThis publisher key, to get your publisher key, login to your sharethis here. your publisher key will appear similar to the code in the image below.



To change the position of your share widget change the highlighted portion "Left" to right if you which to change it to the right position.
  • Click "SAVE TEMPLATE"
Check any of your post to see the amazing floating share widget moving up and down on your blog.
Please drop your comment if you have anything to contribute/say/ask, and it will be our pleasure to hear from you, also take few moment to share this.



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

2 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Hi, I tried it and it worked, however I was expecting to have the same widget as in your blog.

    Do you have a post for this one as well?

    ReplyDelete
    Replies
    1. Read http://www.realcombiz.com/2012/05/add-floating-bar-having-google-1.html

      Delete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger