How to add floating social media sharing buttons to blogg(Video)

Pin It Now!

Today Social media buttons play a major role in sharing your posts that are published in your blogg and helps in increasing traffic to your blogg.But here way2bloggerz give social media sharing buttons for your blogg in a different style when you add this widget to your blogg it will float in the left  of your blog you can easily edit its position according to your blogg


Its a widget so you dont have to edit your blogg CSS code simply add the below given code to your HTML/javascript




Steps for adding floating social media sharing buttons to your blogg

1. Go to your blogger dashboard
2. Now click on the layout and now add a gadget
3. Chosse gadget HTML/Javascript
4. Now leave title blank and copy the below given code and paste it into content box

<style type="text/css">
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;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;/*bs-fsmsb*/-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="Get this from BloggerSentral.com">
<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>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</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='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://way2bloggerz.blogspot.in/">widget</a></div>
</div>

5. Now place the gadget below the post section if you want to put your sharing buttons left of your browsing window



Customizing position of Sharing Buttons
Vertical alignment
Change the value of bottom in code line 2. The code positions the button relative to the bottom of your browser window. To fix the distance even when window is resized, specify the value in px (pixels) instead of %.


Horizontal alignment
Change the value of margin-left in code line 2. Negative value pushes the button to the left of the main blog column, positive value pushes it to the right.
To position the button relative to the left or right edge of browser window, replace the margin-left with left (as in left:10px;) or right (as in right:10px;) respectively.

Replacing and removing buttons
You can replace existing buttons with your own. Each button is represented by this code:

<div class='sbutton'>
BUTTON CODE
</div>

Enjoy............

                  V I D E O

Pin It Now!