The implementation is easy. Just follow the steps as explained in this post. You can also get the codes and implement the same social media floating button to your blog.
How to Add Floating Social Buttons for Blogger's Blog
1. Get the codes below:<!-- SocialMedia Float Buttom www.EarnMoneyFromBlogV2.com-->
<style>
#socialmedia {
position:fixed;
bottom:15%;
margin-left:-91px;
float:left;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#fff;
padding:0 0 2px 0;
z-index:10;
}
#socialmedia .sharebutton {
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='socialmedia' title="Get this from EarnMoneyFromBlogV2.com">
<div class='sharebutton' 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='sharebutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='sharebutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sharebutton' 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='sharebutton' id='gb'>
<a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='post on google buzz'>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'></script>
</a></div>
<div class='sharebutton' 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;"><a href="http://www.earnmoneyfromblogv2.com/2012/05/how-to-add-floating-social-media-button.html">Get this</a></div>
</div>
<!-- SocialMedia Float Float End -->
2. Go to "Layout" > "Add a Gadget". Choose "HTML/JavaScript".
3. Paste the code and Save. That's It, Done!.
Move the widget to the footer or to the bottom area.
Editing Margin to Suit Your Blog
The margin in this code is set to -91px. So, if it is not appearing properly on your blog, you will have to edit it to make it appear properly on your blog. The code you need to edit is:
margin-left:-91px
Change the number until you get the best position.
So, that is it. Simple and straightforward. You get a floating social media button for your blogger's blog.
About the Author: This Post is written by William Lee (Nickname: Greenleaf). Make money blogging and work from home is the best job I ever experienced.
