In the social media sharing has been included Facebook Share, Retweet, Stumble, Digg and Google +1 (plus one) button on the bar. Each counter is equipped with life. Angle Facebook Share button and a round counter to mingle with the rest of the buttons (does not work in Internet Explorer, of course). You can add more social bookmarking, or buttons to share later if you wish. But I think the buttons that I mentioned earlier is quite representative of social media sites on the Internet.
1. Login to your Blogger account.
2. Go to Design > Page Elements > Click Add A Gadget.
3. In Add A Gadget window, select HTML/Javascript .
4. Copy the code below and paste it inside the content box.
<!-- floating page sharers Start tutorialblogger-dw.blogspot.com-->
<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 tutorialblogger-dw.blogspot.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://tutorialblogger-dw.blogspot.com/2011/07/7-simple-steps-adds-social-media.html">widget</a></div>
</div>
<!-- floating page sharers End -->
5. Save the gadget.
6. Drag the gadget and reposition it under Blog Posts gadget.
7. Click Save button on upper right corner.
0 comments:
Post a Comment