How to add Floating Social Share Bar ti your blog?

Learn How to add Floating Social Share Bar ti your blog?

Now a days Social networking sites are contributing much on promoting your Blogs. They helps tremendous in link buildings.They provide small buttons to place on your webpage so, your webpage contains is shared and resulting promotion of your webpage with out any extra cost. But, the question is where to place the buttons, is it is noticed by the webpage visitors? I will here tell how to add floating social share button. This will float on the left side of your blog and will be well noticed by your blogger visitor. Do the following code addition to your blog.

"Go To http://hp12a.blogspot.in/
to see the example of the floating share bar"

STEPS:
Step1.Go to blogger and select Layout.
Step2.Here you click on 'add a gadget' for adding new widget to your blog. after you select the HTML/javascript widget
Step3.Then simply copy and past the below code in to box without any correction other wise it might not be working properly.



<!--Blog SideBar Floating Share Buttons Code Starts-->
<style>

#pageshare {position:fixed; bottom:15%; left:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>
<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 12px;text-align:center;"><a href="http://ebtricks.blogspot.in/2013/04/how-to-add-floating-social-share-bar-ti.html" target="blank"><font color="black">[Get This]<font></font></font></a></div></div>

<!--Blog SideBar Floating Share Buttons Code Ends-->


Now save it and chek it out it is displaying on the left side of your blogger.

Remove the Blogger Banner(How to hide the Blogger Navbar?)

To hide the Blogger Navbar :

1- Log in to blogger

2- On your Dashboard, select Layout. This will take you to the Template tab. Click Edit HTML. Under the Edit Template section you will see you blog's HTML.

3- paste the CSS definition in the top of the template code:


    <b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Simple
Designer: Biplab Nayak
URL:     http://www.nayakonline.com
----------------------------------------------- */
#navbar-iframe {   display: none !important;}
/* Variable definitions
   ====================
   <Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#66bbdd"/>
   <Group description="Page Text" selector="body">
     <Variable name="body.font" description="Font" type="font"
WATCH HOW TO REMOVE THE BLOG BANNER!!!