Get Social Communities Floating Side Bar For Your Blogger Blog

Readers can easily share, follow and like your blog post from your blog post page if you have their social plugins installed on your blogger blog, such as Facebook, Google+ etc.
You will be seeing how you can get some of those plugin float on the left hand side bar of your blog page,
I will be using a popular social plugin site to show you how to do this, all you need to do is read carefully and add some other social network plugin scripts which you do like to display on your blog page.
To Start Installation on your blogger blog you need to first of all
  1. log in to blogger
  2. navigate to the layout page 
  3. Click on Add Gadget link to add a new gadget
  4. Choose the Html/JavaScript gadget
  5. Copy the bellow code and paste it in there

<!-- SideBar Floating Bar Starts Here -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:10px;top:250px; background-color:#f3f3f3;">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<!--Add More Plugins-->
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5022eb1c5bf9340f"></script>
<!--  SideBar Floating Bar Starts Here -->


What To Edit
You can change the position and background of the floating bar if you don't want to use the one on the script
  • For the distance between your computer left ahnd side screen to the bar change the left value on yellow background above, you can change it from 10px to 0px to be fixed to the left hand side of the visitors screen or your desirable value
  • change the top on value on the same yellow background above to your desirable distance from the computer screen top edge to the bar bar it self you like to set to 100px etc to your desirable
  • To change the background color from grey to your desirable color example black #000000; change the background-color:#f3f3f3 value "#f3f3" to your desirable color either in a hexadecimal for or using letter example black:.
Add More plugins
From the above script the only plugins that are there are Facebook, Google plus,Twitter and Share for more plugins when you hover the share button.
bellow are other social communities plugins you may like to add to the bar, they are:
Pinterest,facebook send button, stumble upon, Wide, Amazon Wishlist, Linkin, Hyves Respect and FourSquare Button
If you will like to add any one to the exciting button above you need to add it within  the <!--Add More Plugins-->  bellow or above it

Pinterest: 
<a class="addthis_button_pinterest_pinit" pi:pinit:url="http://www.apple.com" pi:pinit:media="http://images.apple.com/home/images/hero.jpg" pi:pinit:layout="vertical"></a>
 Linkin : 
 <a class="addthis_button_linkedin_counter"></a>
 Stumble Upon :
<a class="addthis_button_stumbleupon_badge"></a>  
 FourSqaure:
<a class="addthis_button_foursquare"></a>



Hyves Respect:
 <a class="addthis_button_hyves_respect"></a> 
  Wide:
<a class="addthis_button_foursquare" 4sq:data-variant="wide"></a> 
 Facebook Send Button:
<a class="addthis_button_facebook_send"></a>
 Amazon Wishlist:

<a class="addthis_button_amazonwishlist"></a> 
 

Replace the <!--Add More Plugins-->  above  with any of the above codes or better still add all if you want
Note
you can add any amount you want, you may choose to add only the important once an leave others.
regards to addthis 

    Comments

    Popular posts from this blog

    Send Automatic Welcome Message To Your Twitter Followers

    USSD Code For All Mtn Services, Settings And Tools