How to add a Floating Twitter and Facebook Share Buttons (Widget with Counter) in your blog






This is an excellent widget that  floats right next to every individual post on your blog or website. This is an engaging widget that would allow your post to spread on social networks like facebook, twitter, google plus and many more others. The widget has been designed to count the number of social shares it has received so far. This is one of the greatest way to share your content on social media network and gaining more traffic to your blog or website. I always keep on saying that the survival of every online business depends on the traffic quality, quantity and source which i would speak about soon.


How to Add Widget to Blogger
  1.  If you are not an expect in editing your template please back it up first to avoid damage of your template.
  2. Sign in to your blogger and Go to Blogger > Template
  3. Click Edit HTML
  4. Search for this code in the HTML ,,,  Use CTRL + F
<b:includable id='post' var='post'>

and below it paste the following code

<b:if
  cond='data:blog.pageType == "item"'>  <b:if
cond='data:blog.pageType != "static_page"'>  <style> 
.mbt_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;  } 
.mbt_social_floating .mbt_side_social_button{      margin-bottom:5px;  
   float:none;      height:auto;      width:60px;  } 
.mbt_social_floating .st_twitter_vcount, 
.mbt_social_floating.st_plusone_vcount, .st_email{      margin-left:5px;
  }  .mbt_social_floating .st_fblike_vcount{      margin-left:5px;  } 
.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('http://1.bp.blogspot.com/-r3RYZkB4Pis/T7alrxNFYyI/AAAAAAAAGc4/TCBwHNxEwR4/s400/gc_social_sprite.gif')
  no-repeat !important;      height:19px !important;      width:45px
!important;      padding:0 !important;  }  .st_email .chicklets{     
background-position:0 -77px !important;      
background-image:url('http://1.bp.blogspot.com/-r3RYZkB4Pis/T7alrxNFYyI/AAAAAAAAGc4/TCBwHNxEwR4/s400/gc_social_sprite.gif')
  !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{      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;  }  .mbt_social_floating .stBubble{     
background-position: 21px 31px !important;      height:35px !important;
 }.mbt_social_floating .st_pinterest_vcount{     margin-left:5px; }
.mbt_social_floating .st_pinterest_vcount .st-pinterest-counter{    
background-position:0 -19px !important; } .mbt_social_floating
.st_pinterest_vcount .stBubble_count{     color:#FF0505;    
background-color:#fbf8f8 !important;  }  .mbt_social_floating
.st_pinterest_vcount .stBubble{     
background-image:url('http://1.bp.blogspot.com/-meqDjtBStCA/ULFkqTG88qI/AAAAAAAAIGs/hjCRAqGL270/s400/bubble_arrow_pinterest.png')
  !important; }   .st_pinterest_vcount{     margin-bottom: 0px;    
display: block; }  </style>   <div
class='mbt_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,  , doNotHash:
true, doNotCopy: true, hashAddressBar:  false});</script>     
<!-- No more works properly so removing it from mbt list<span 
class='st_fblike_vcount' displaytext=''/>-->  <div
style='margin:0px 0 0px 10px;'><div id='fb-root'/><script 
src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like 
font='' href='' layout='box_count' send='false' 
show_faces='false'/></div><span class='st_twitter_vcount'
displaytext=''  st_via='theblogwidgets'/>  <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: "TheBlogWidgets.com", 
ui_header_color: "#ffffff",       ui_header_background: "#0080FF"  } 
</script>  <span class='st_email' displaytext=''/>  <p
style=' line-height:0px; font-size:10px; font-weight:bold; 
text-align:center;'><a 
href='http://www.theblogwidgets.com/2013/11/floating-share-buttons-widget-with.html'
style='color:#CAC8C8;'>Widgets</a></p></div></b:if></b:if>

HOW to Add this Widget to Website
To add this widget on your website Just place the code above anywhere between the body section of your template and the widget will appear where the code is placed.


Make sure you Customize it

Replace the code below with your twitter username.


0 default, disqus:

Post a Comment