Floating Share Bar With Most Of Social Networks For Blogger

on
Recently I shared Mashable like social media widget. Now it's time to share a floating share bar. This floating share contains Facebook Share, Facebook Like, Twitter Tweet, Google +1, Digg, Stumble and Pinterest Pin.

This brings huge traffic towards you and for me it really worked. I added it just 2 days before and my sociality got viral. I am getting very well traffic from it. People do Facebook Share, Facebook Like, Twitter Tweet, Google +1, Digg, Stumble and Pinterest Pin so your link get shown upon different audience. They click that link and enjoy your blog and you enjoy them [Traffic].


How To Get Floating Share Bar With Most Of Social Networks

  1. Go to Blogger > Layout > Add a Gadget > HTML/JavaScript
  2. Paste below paste there.
  3. Click save and drag it under Posts gadget.
Code:- [Updated]
<!-- floating share bar Start TraceTricks.blogspot.in--> <style type="text/css">
.sbutton{

cursor:pointer;
color:#fff;
border:none;
padding:4px;

-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px; margin-left:8px;
font:12px sans-serif;
}

#pageshare {position:fixed;bottom:5%; margin-top:50px; margin-left:-87px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background:#fff;border: 1px solid #f7f7f7; z-index:10; }
#pageshare .sbutton {float:left;clear:both;margin:5px 2px 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' >
<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'><div class="fb-like" data-send="false" data-layout="box_count"  data-show-faces="false"></div></div>
<div class='sbutton' >
<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 class='sbutton' id='rt'>
<a class='twitter-share-button' data-count='vertical' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></script></div>
<div class='sbutton' id='rt'><a href="http://pinterest.com/pin/create/button/" class="pin-it-button" count-layout="vertical"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>
</div>
<div class='sbutton'><a href="http://www.TraceTricks.blogspot.in/">Get Widget</a></div>
<!– Do not remove this link –>
<!-- floating share bar End -->

</div>

If You Want To Show It Only On Posts:

  1. Temporary give this widget a name. 
  2. Go to Blogger > Template > Edit HTML > Check Expand Widget Templates Box 
  3. Find the name you given to the widget. (Press Ctrl+F)
  4. Your Code will be looking like this:
<b:widget id='HTML8' locked='false' title='Widget-Title'  type='HTML'> <b:includable id='main'>
Other Codes.....
</b:includable> </b:widget>
Add these two blue bold text before and after bold text. After change your code will look like this:

<b:widget id='HTML8' locked='false' title='Widget-Title' type='HTML'> <b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
Other Codes.....
</b:if>
</b:includable> </b:widget>
After adding the blue bolded codes exactly as shown above, Click on Save Template. Now the floating bar only float on posts not on homepage. Now you can delete the name you given to it.

I highly recommend you to keep this widget on your blog and increase your blog traffic by 60%. This is my personal experience so add this widget as soon as possible.

If you are confused or facing any problems then kindly say them via comments. Don't forget to share your views in comments.

2 comments:

  1. Good work!
    it is possible to add the "reddit" icon on the share bar?

    ReplyDelete