Adding Vertical Floating Sharing Bar To Blogger

We might have seen many popular blogs/websites with a vertical floating sharing widget where Facebook like/Share, Google+, Twitter, Pin it.Now days, social sharing is very important for blogs traffic and popularity. Facebook, Google+, Twitter,Pinterest,Linkedin have many users and its a great opportunity for site owners and bloggers to gain traffic from social networks while sharing the content. So as a blogger/publisher,you should provide a sharing options for your users to share your content.

DEMO

How to add Vertical Floating sharing bar to Blogger?

1. Go to Blogger Dashboard > Template > Download a copy of your current template for backup purpose.
2. Click on Edit HTML
3. Click CTRL + F and search the code  <b:includable id='post' var='post'>
4. Copy paste the given below code just after
<b:includable id='post' var='post'>

Code:

<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:blog.pageType != "static_page"'>
<style>
.g_social_floating {
    position: fixed;
    bottom: 10%;
    margin-left: -94px;
    padding: 5px 0 0px 0px;
    float: left;
    width: 70px;
    background-color: #f7f7f7;
    z-index: 9999px !important;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    -moz-border-radius: 5px;
    border-bottom: 1px solid #ddd;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.g_social_floating .g_side_social_button {
    width: 60px;
    float: none;
    margin-bottom: 5px;
    height: auto;
}
.g_social_floating .stButton_gradient {
    background: none !important;
    height: 21px !important;
    padding-left: 0 !important;
}
.g_social_floating .st_fblike_vcount {
    margin-left: 5px;
}
.g_social_floating .st_twitter_vcount, .g_social_floating.st_plusone_vcount, .st_email {
    margin-left: 5px;
}
.g_social_floating .chicklets, .g_social_floating .stMainServices {
    background: url(&#39;
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgfeIQIbqHW7U4lFxJ7Lo0SBoLPRFIbsSGFh64xnbfgFA4B4JfrgXv8DNCqbqfIkbSrbSoSAmTCccyi0XDz_5yY9i1Xdtejv55oIPS3SF2ALzMhZqjIxBHL8xDhrOvmQ1_mVK2NjW8jGA/s1600/gc_social_sprite.png'
    ) no-repeat !important;
    width: 45px !important;
    padding: 0 !important;
    height: 19px !important;
}
.st_email .chicklets {
    background-position: 0 -77px !important;
    background-image: url(&#39;
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgfeIQIbqHW7U4lFxJ7Lo0SBoLPRFIbsSGFh64xnbfgFA4B4JfrgXv8DNCqbqfIkbSrbSoSAmTCccyi0XDz_5yY9i1Xdtejv55oIPS3SF2ALzMhZqjIxBHL8xDhrOvmQ1_mVK2NjW8jGA/s1600/gc_social_sprite.png'
    ) !important;
}
.g_social_floating .st_twitter_vcount .st-twitter-counter {
    <!--background-position: 0 -58px !important; -->
}
.g_social_floating  .stButton_gradient {
    border: none !important;
}
.g_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;
}

.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;
}
.g_social_floating .st_twitter_vcount .stBubble_count {
    color: #00a6df;
    background-color: #f8fbfc !important;
}
.g_social_floating .stBubble {
    background-position: 21px 31px !important;
    height: 35px !important;
}
</style>
<div class='g_social_floating'>
 <script type='text/javascript'>var switchTo5x=true;</script>
 <script src='http://w.sharethis.com/button/buttons.js' 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='GURUHOWTODO'/>
 <div style='margin:5px 0 0px 0;'>
  <center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&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='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;);
e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
  </script>
  </center>
 </div>
 <div style='margin:0px 0 0 5px;'>
  <span class='st_plusone_vcount' displaytext=''/>
 </div>
 <div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
  <a class='addthis_counter'/>
 </div>
 <script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
     ui_cobrand: &quot;GURU HOWTODO&quot;,
ui_header_color: &quot;#ffffff&quot;,
     ui_header_background: &quot;#CF152A&quot;
}
 </script>
 <span class='st_email' displaytext=''/>
 <p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'>
  <a href='http://guruhowtodo.blogspot.in/2015/04/adding-vertical-floating-sharing-bar-to.html' style='color:#CAC8C8;'>Widgets</a>
 </p>
</div>
</b:if></b:if>

5. Click CTRL + F and search "GURUHOWTODO" and replace with your twitter username. 6. Finally save all your changes and you're done.

Conclusion

So, this was all about adding Vertical Floating sharing bar to Blogger . If you have any type of queries regarding this tutorial please feel free to let us know, We will try our best to resolve them. If you like this tutorial and find this useful and meaningful then please don’t forget to share this with your friends and social media too.