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.
Ok...Lets See How To Add in Your Blogger Blog?
Very Simple...Just Follow Me...
How to Add Social Media Floating Widget to Blogger?
Now see how to add this social media bookmarking widget in blogger.
- Blogger >> Template >> HTML >> Proceed >> Expand the Widget Template
- Search for below given code by using CTRL+F
<b:includable id='post' var='post'>
- Paste the following code: just after/the above 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9gArZ5hJl4cmax6Rod_HiISMrgFLSuTlAnAKl9FpemKxYxjWaMZ-s7Tmza62lmxFeZ1IzqOo-nzNNId9BDdrVPXAc_m4cbv7JIq7T9PzO66QBPFFJ6Kp_f1yf0H5P5ItrvLTtL4mU-pGk/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9gArZ5hJl4cmax6Rod_HiISMrgFLSuTlAnAKl9FpemKxYxjWaMZ-s7Tmza62lmxFeZ1IzqOo-nzNNId9BDdrVPXAc_m4cbv7JIq7T9PzO66QBPFFJ6Kp_f1yf0H5P5ItrvLTtL4mU-pGk/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;
}
</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});</script>
<span class='st_fblike_vcount' displaytext=''/>
<span class='st_twitter_vcount' displaytext='' st_via='Farhad201135'/>
<div style='margin:5px 0 0px 0;'>
<center><a class='pin-it-button' count-layout='vertical'
expr:href='"http://pinterest.com/pin/create/button/?url="
+ 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('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='
+ 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: "MY BLOGGER TRICKS",
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.muhammadfarhad.net/2012/05/add-floating-share-buttons-widget-to.html'
style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>
Customization Social Sharing Floating Buttons Widget
By adding the above code you must change the
Farhad201135 with your own twiter user name. If you want to change the location of widget to right side of your blog just change the
float:left to
float:right Thats all.
