Sunday 21 August 2011

Adding Buttons to Blogger


                        

                    Add  Social Media Buttons to Blogger






                          
         Adding Social Media buttons like Facebook Share, Twitter, Digg and other like floating will be possible easily in the Wordpress with just a Plugin called Digg Digg. But using Blogger as their Blogging platform can also add these floating Social Media Buttons to Blogspot. Follow the simple steps below and create your Mashable like Floating Social Network Buttons with a go.
Steps Adding the Code to your Tempate...

Dont worry. It is not neccessary to know any HTML Language to add the below code. It is just simple. Go a head to Implement.

Step 1: Login to Blogger Account.
Step 2: Go to Design then to Page Elements.
Step 3: Create one " HTML/Javascript " gadget through " Add a Gadget "
Step 4: Copy and Paste the entire code given below and Save the Gadget below the Post Body
<!-- floating page shares Start TechEmpty.com-->
<style>
#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="Share on Facebook">
<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='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 style="clear: both;font-size: 9px;text-align:center;"><a href="http://www.techempty.com/2011/04/5-steps-to-add-floating-social-media.html">Get this</a></div>
</div>
<!-- floating page shares End -->
Step 5: You are Done..Enjoy...

No comments:

Post a Comment