Tuesday, May 22, 2012

How to Add a Floating Social Media Button to Blogger Blog

Sponsored Ads
Floating social media buttons are on a lot of blogs. Have you ever wonder how to add social media floating button on your blog? I am searching for the steps to do it, I found some guidance and finally, I did some modification to the codes so that it suit my blog. Now, you can see that Earn Money From Blog 2.0 is having floating social media buttons.

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.