image1 image2 image3

WELCOME TO GETNETRIX|WE ARE PROFESSIONAL|WE LOVE TO DO CREATIVE THINGS|IGNORE THE BASICS, LEARN DIVINE

How to add floating share buttons on the sidebar(4 blog)




1. Log in to your blogger account and click on Design
2. You’re now looking at your blog’s layout, right? Click on Add A Gadget on the sidebar.
3. Select HTML/Java Script
4. Paste the code below into the box and save. There’s no need for a title.








<!--SideBar Floating Share Buttons Code Start--> <style>
#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;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;-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 This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></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 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='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><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://getnetrix.blogspot.in/2012/02/how-to-add-floating-share-buttons-on.html"><font color="black">[Get This]<font></font></font></a></div></div>
<!--SideBar Floating Share Buttons Code End-->








5. Save the widget and preview your blog.
If you already have a google plus button above or below your posts, the one in the widget might not appear. It seems you can’t have two +1 buttons on a page.
If you’re using a dark template, you can try out the code below if you don’t quite like the first one:







 
<!--SideBar Floating Share Buttons Code Start-->

<style>
#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#000000;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;-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 This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></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 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='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><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://getnetrix.blogspot.in/2012/02/how-to-add-floating-share-buttons-on.html"><font color="black">[Get This]<font></font></font></a></div></div>
<!--SideBar Floating Share Buttons Code End-->


Share this:

CONVERSATION

6 Comments:

  1. How may I join your twitter page?

    Check out my site; withdraw from zoloft

    ReplyDelete
  2. Please continue sharing such helpful knowledge, I like this type of
    subjects!

    Here is my page - life settlement policies, ,

    ReplyDelete
  3. I'll send this article to my friend. I'm sure he will like
    checking it.

    Here is my weblog: zoloft withdrawal treatment ()

    ReplyDelete
  4. I have been looking for this data for quite a while, but I was unable to
    get a trusty source up to now. Thanks a ton.

    Stop by my weblog - Zoloft withdrawal length

    ReplyDelete
  5. My wife also enjoyed the issues revealed in this article.

    Here is my web site :: stop withdrawal Symptoms

    ReplyDelete
  6. I enjoy the caliber of your blog, is definitely pleasurable to browse through the
    article content available in here.

    my webpage ... zoloft withdrawal zaps ()

    ReplyDelete