Installing Floating Social Media Icons.

As reply to my Loyal visitors today we are going to add Floating social media Icons which will  encourage visitor to share your post.Its popular way to increase your Fan and rise your Traffic of Blog as every blogger dream that.The Floating share will have the fixed position.Scrolling page will too not effect the position of Floating Share.We will add The Floating Share with just simple tricks.in this Share we have added Google plus one,Facebook Share,Twitter,Digg button,Stumble and much more.You can also add your own button.Here is How.

Floating CSS codes.

HTML Codes.

The HTML codes of Floating sharer is given Below.

<!-- Floting Social media -->
<div id='br-ps' title="Get this from BloggerRounder.blogspot.com">
<div style="text-align:center"><center><p style="font-family: tahoma,arial; font-size: 10px; width: 55px; margin: 0pt;">Plz share this page</p></center></div>
<div class='br-psb' id='br-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='br-psb' id='br-twitter'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='br-psb' id='br-stumbleupon'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='br-psb' id='br-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='br-psb' id='br-fgp'>
<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;color:#000000"><a href="http://bloggerrounder.blogspot.com/">Widget</a></div>
</div>
<!-- Floating Social Media ends -->

Where ,

• You can change “Plz share this page” as your wish.
• If you want to add other button like email etc. then add the following codes just after line 19.

  <div class='br-psb'>
  /*Button Codes here*/
  </div>

CSS Code.

The CSS code of Floating sharer is.

#br-ps {
position:fixed; 
bottom:25%;
 margin-left:-65px; 
float:left; 
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#ffffff;
padding:0 0 2px 0;
z-index:10;
}

#br-ps .br-fsb {
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;
}

Where,

• In line 3 You can change bottom:45% as your taste.
• In Line 9 You change #ffffff (From background-color#ffffff) to six digit color code.You can get color code from here.

Adding Widget.

In Blogger

1. Go to Blogger Dashboard>Template>Edit HTML
2. Back Up your Blog
3. Find </body> and add the share HTML codes.
4. Find ]]></b:skin> and add the CSS code just above it.

In WordPress.

1. Go to WordPress Dashboard>Appearance
2. Click on Available widget.
3. Drag text to Sidebar and in content box add the HTML codes.
4. Again go to CSS and in advance CSS and add CSS codes.

Admin of Blogger Rounder
Shirshak is the Administrator of the Blogger Rounder who thinks he will die next to Blogger. He is Completely devoted to Blogger and thinks Web Designing will makes is career.You contact using contact form from navigation tab to him.You can find him in Twitter.

Subscribe for free
Thanks for visiting Blogger Rounder.We can subscribe to Blogger Rounder'^s by RSS feed or email updates.