Saturday, June 23, 2012

Floating Vertical Share bar


You must have seen the floating vertical share bar on many popular blogs and must have thought about adding it to your blogspot blog as well. AddThis has made this very simple. Its a fairly simple process and after you add this vertically floating share bar to your blog, you will also check how many times people shared your content with their analytics service which they offer for free! The share bar is available in different sizes and you can also customize it so that it blends perfectly with your blog.
AddThis Vertical Floating Share Bar 


Before you add the vertical floating bar to your blog, you have to create an account on AddThis which will help you in tracking the content that is being shared and other useful information. Once you create your account, just remember your profile id as it will be necessary while adding the code to your blog. Now visit the Floating Vertical Bar page where you will see the code along with a demo of the floating vertical bar and also its features.

If you want a different style of floating vertical bar, then visit the link shared above and select the one that you like. But if you want the normal one then copy the code that is shown below.

<div class="addthis_bar addthis_bar_vertical addthis_bar_large" style="top:50px;left:50px;"> <div class="addthis_toolbox addthis_default_style"> <span><a class="addthis_button_facebook_like" fb:like:layout="box_count"></a></span> <span><a class="addthis_button_tweet" tw:count="vertical"></a></span> <span><a class="addthis_button_google_plusone" g:plusone:size="tall"></a></span> <span><a class="addthis_counter"></a></span> </div> </div>
Once you have copied this code, visit the Layout section of your blog and click on Add a gadget and select a HTML/Javascript gadget and paste the code. Now click on Save button.

Next you need to visit the Layout section from the blogger dashboard and select Edit HTML and then choose the Proceed option. Search  </head> in the template and paste the following code just above   </head> .
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=[YOUR PROFILE ID HERE]"></script>
Once you have added your profile id to the code, click on Save template and now you can refresh your blog and see the AddThis Vertical Floating Share Bar on your blogger blog.

© 2012 Unicornix, AllRightsReserved.

Designed by Unicornix