Subscribe For Free Updates!

We'll not spam mate! We promise.

Friday, July 5, 2013

Add Floating Share Buttons Widget in Blogger

Blogging becomes more interesting if visitors share your contents in different social media networks sites with their friends less in time. But now a days it becomes a common problem for every blogger and webmaster when they spend alot of time in sharing theirs contents on different social media sites and waste their precious blog posting time. really it will take all your precious time think about it.
Today in this article i will share with you some amazing Social Sharing buttons widget with the help of this social sharing buttons widget you will be able to share your each post contents in less than a minute. this vertical social sharing floating buttons widgets widely used by many bloggers and webmasters.

So this article is all about how to add social sharing floating buttons widget in Blogger. by adding this awesome All social sharing buttons widgets in your blog, then  you will see a dramatically change in visitors in all your social sharing media sites.

How To Add Floating Share Buttons Widget in Blogger
  • First for All Go To > Design > Edit Html
  • Find <b:includable id='post' var='post'> Using 
  • Copy the code below and paste it just after <b:includable id='post' var=post'> tag 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
position:fixed; bottom:10%; margin-left:-60px; float:left;
padding: 5px 0 0px 0px;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index:9999px !important;
.mbt_social_floating .mbt_side_social_button{
.mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{
.mbt_social_floating .st_fblike_vcount{
.mbt_social_floating .stButton_gradient{
background:none !important;
height:21px !important;
padding-left:0 !important;
.mbt_social_floating .chicklets, .mbt_social_floating .stMainServices {
background:url(&#39;;) no-repeat !important;
height:19px !important;
width:45px !important;
padding:0 !important;
.st_email .chicklets{
background-position:0 -77px !important;
background-image:url(&#39;;) !important;
.mbt_social_floating .st_twitter_vcount .st-twitter-counter{
background-position:0 -58px !important;
.mbt_social_floating .stButton_gradient{
border:none !important;
.mbt_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;
.mbt_social_floating .st_twitter_vcount .stBubble_count{
background-color:#f8fbfc !important;
margin-bottom: 0px;
display: block;
margin-bottom: 3px;
display: block;
margin-bottom: 5px; margin-top: 3px;
display: block;
.mbt_social_floating .stBubble{
background-position: 21px 31px !important;
height:35px !important;
<div class='mbt_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='HashmiWorld4U'/>
<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);
</script> </center>
<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;MY BLOGGER TRICKS&quot;,
ui_header_color: &quot;#ffffff&quot;,
ui_header_background: &quot;#0080FF&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></p>
  • Replace HashmiWorld4U With Your Twitter Username..

That's All Done!

Please Give Us Your 1 Minute In Sharing This Post!
Follow us →
Share It →


  1. Hi, Thanks for this tutorial! its great but not working in my blog. im using a coffee desk template in my new blog but seems social media sharing buttons dont work even i enabled it and tried to diable it as well for so many times. do you have any idea whats wrong? was it a template matter?
    please check out my blog hope you can say whats wrong.. thanks in advance :)

  2. Your article is very informative, specially to the new individual entering to the field of blogging..... Make Money , Blogging Tips

  3. Thank you for this widget. This what Im looking, the one the includes Facebook sharing button.