Add Floating Social Sharing Button To Your Website

Hi again On this post i will share one of the awesome social sharing buttons widget that allow 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 post is all about how to add social sharing floating buttons widget in Blogger. By adding this awesome social sharing buttons widgets in your blog, then you will see a change in visitors in all your social sharing sites.
Trust me it just boost your traffic by double.

How to Add This Widget:

Go to Blogger > Template > Edit HTML.(*Please Make Sure You have Back up Your Template Before editing)

Search for below given code by pressing CTRL+F

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

or

id='post' var='post'

4. Expand it. (means click on "►" symbol)
5. Paste the following code:
just after/the above code,

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<style>

.mtc_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;

}

.mtc_social_floating .mtc_side_social_button{

margin-bottom:5px;

float:none;

height:auto;

width:60px;

}

.mtc_social_floating .st_twitter_vcount, .mtc_social_floating.st_plusone_vcount, .st_email{

margin-left:5px;

}

.mtc_social_floating .st_fblike_vcount{

margin-left:5px;

}

.mtc_social_floating .stButton_gradient{

background:none !important;

height:21px !important;

padding-left:0 !important;

}

.mtc_social_floating .chicklets, .mtc_social_floating .stMainServices {

background:url(&#39;http://1.bp.blogspot.com/-r3RYZkB4Pis/T7alrxNFYyI/AAAAAAAAGc4/TCBwHNxEwR4/s400/gc_social_sprite.gif&#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;http://1.bp.blogspot.com/-r3RYZkB4Pis/T7alrxNFYyI/AAAAAAAAGc4/TCBwHNxEwR4/s400/gc_social_sprite.gif&#39;) !important;

}

.mtc_social_floating .st_twitter_vcount .st-twitter-counter{

background-position:0 -58px !important;

}

.mtc_social_floating .stButton_gradient{

border:none !important;

}

.mtc_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;

}

.mtc_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;

}

.mtc_social_floating .stBubble{

background-position: 21px 31px !important;

height:35px !important;

}

</style>



<div class='mtc_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='darksite'/>

<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;darksite.co.in&quot;,

ui_header_color: &quot;#ffffff&quot;,

ui_header_background: &quot;#0080FF&quot;

}

</script>

<span class='st_email' displaytext=''/>

<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://www.darksite.co.in'>Widgets</a></p>

</div>

</b:if></b:if>

Optional Work:

<div id="fb-root"></div>


<script>(function(d, s, id) {



  var js, fjs = d.getElementsByTagName(s)[0];



  if (d.getElementById(id)) return;



  js = d.createElement(s); js.id = id;



  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";



  fjs.parentNode.insertBefore(js, fjs);



}(document, 'script', 'facebook-jssdk'));</script>

Make Changes

• Replace float:left if you want to change the location of widget to right side of your blog just change the float:left to float:right

• Replace darksite with your own twiter username.

Thats all Folks If you are having problem at any step do ask in comment i would love to help.
Also if you need more tutorial on it then also you can do comment thank you again keep visiting.