New Version Of Vertical Floating Sharing Bar For Blogger - Helper Blogger

Blogger Widgets | Templates | Tutorials


Sunday, 24 June 2012

New Version Of Vertical Floating Sharing Bar For Blogger

Click On Image To Enlarge

Vertical floating social sharing bar is one of the best blogger widgets,because you can notice increasing trend of floating social sharing widgets.This version is the upgraded version than previous versions,in this widget you will get facebook like button,twitter tweet button,pinterest pin it button,google +1 button,addthis sharing button and print button.Also the installation of this widget is 1step installation,so that you can easily implement it into your blogger blog,Now lets see how to add it to your blog.

How To Add New Floating Sharing Bar To Blogger?

  1. First Go to Blogger Dashboard > Template
  2. Download a copy of your template
  3. Click Edit HTML
  4. Hit Proceed button
  5. Check Expand Widget Templates checkbox
  6. Find for below code in your template,

<b:includable id='post' var='post'>

Add below code just after/below of above code,

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
.hb_social_floating {
    position: fixed;
    bottom: 10%;
    margin-left: -60px;
    float: left;
    width: 60px;
    background-color: #f7f7f7;
    padding: 5px 0 0px 0px;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    z-index: 9999px !important;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

.hb_social_floating .hb_side_social_button {
    margin-bottom: 5px;
    float: none;
    height: auto;
    width: 60px;

.hb_social_floating .st_twitter_vcount, .hb_social_floating.st_plusone_vcount, .st_email {
    margin-left: 5px;

.hb_social_floating .st_fblike_vcount {
    margin-left: 5px;

.hb_social_floating .stButton_gradient {
    background: none !important;
    height: 21px !important;
    padding-left: 0 !important;

.hb_social_floating .chicklets, .hb_social_floating .stMainServices {
    background: url(&#39;
    http: //;
    ) no-repeat !important; 
    height: 19px !important;
    width: 45px !important;
    padding: 0 !important;

.st_email .chicklets {
    background-position: 0 -77px !important;
    background-image: url(&#39;
    http: //;
    ) !important;

.hb_social_floating .st_twitter_vcount .st-twitter-counter {
    background-position: 0 -58px !important;

.hb_social_floating  .stButton_gradient {
    border: none !important;

.hb_social_floating .stBubble_count {
    width: 44px !important;
    font-size: 15px !important;
    font-weight: normal !important;
    padding-top: 7px !important;
    height: 23px !important;
    background: none !important;

.hb_social_floating .st_twitter_vcount .stBubble_count {
    color: #00a6df;
    background-color: #f8fbfc !important;

.st_fblike_vcount {
    margin-bottom: 0px;
    display: block;

.st_twitter_vcount {
    margin-bottom: 3px;
    display: block;

.st_email {
    margin-bottom: 5px;
    margin-top: 3px;
    display: block;

.hb_social_floating .stBubble {
    background-position: 21px 31px !important;
    height: 35px !important;

<div class='hb_social_floating'>
 <script type='text/javascript'>var switchTo5x=true;</script>
 <script src='' type='text/javascript'/> 
    <script type='text/javascript'>stLight.options({onhover:false});</script>
 <span class='st_fblike_vcount' displaytext=''/>
 <span class='st_twitter_vcount' displaytext='' st_via='HELPERBLOGGER'/>
 <div style='margin:5px 0 0px 0;'>
  <center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;; + data:post.url'>Pin It</a>
  <a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
  <script src='' type='text/javascript'/> 
<script type='text/javascript'> 
function run_pinmarklet() { 
var e=document.createElement(&#39;script&#39;); 
e.setAttribute(&#39;src&#39;,&#39;; + Math.random()*99999999); 
 <div style='margin:0px 0 0 5px;'>
  <span class='st_plusone_vcount' displaytext=''/>
 <div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
  <a class='addthis_counter'/>
 <script src='' type='text/javascript'/> 
<script type='text/javascript'> 
var addthis_config = { 
     ui_cobrand: &quot;Helper Blogger&quot;, 
ui_header_color: &quot;#ffffff&quot;, 
     ui_header_background: &quot;#CF152A&quot; 
 <span class='st_email' displaytext=''/>
 <p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'>
  <a href='' style='color:#CAC8C8;'>Widgets</a>

  • Now replace HELPERBLOGGER with your twitter username in line number 107.
  • If you want to edit the position or background color of the bar then edit the lines from 6 to 10.
Finally save your template and you are done!


This version of vertical floating sharing bar is designed by Mohammad of My Blogger Tricks,So I give all credits to him,also if you want to share this widget with your readers then kindly link back to his article.


  1. Great informative ARTICLE, you should be taking classes on the net, there are lot of dummies out there !!!w keep up the good work
    compare and contrast essay

  2. Can this be used in Wordpress blogs, too? I just moved to a self-hosted Wordpress blog and would like to keep the shares and likes I have on my posts.

  3. hey your widgets is cool and interestin but it taking so much time to load

  4. Thank you so much for the information you have shared with us!
    I am impressed!
    Click Here

  5. This is my first time i visit here. I found so many entertaining stuff in your blog, especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the leisure here! Keep up the good work. uk bestessays

  6. This comment has been removed by the author.

  7. please help me bro...I succesfilly implemented in my blog....but twitter count not working remaining are working....its not showing twitter button also

  8. Well the topic you choose really unique and information is ultimate you gave us. I completely enjoyed the post and hoping more post from you soon.
    advertising | top advertising agencies in Pakistan | Marketing Agency | Advertisement

  9. great information...i want to add this in my blog...

  10. Amazing content..Now i can add this in my blog..My blog discuss about social media services such buy twitter followers, buy facebook followers, buy youtube likes


If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM