Add Floating Share Buttons And Social Gadget To Blogger

Floating Social Share Widget For Blogger

This is again an awesome Floating Social Bookmarking Widget with all social Network and Shows number of likes,tweet,etc..

Check Our Other Social Widget

1. Floating facebook Like and Retweet Counter
2. How To Delete FB account Permanently
3. How To Work with Keyboard as Mouse

Follow Following Steps to add this gadget:

• Go to your Blogger dashboard.
• Go to Template.
• Now backup your blog template.
• Now navigate to Edit HTML >> Expand Widget Template.
• Press CTRL + F and search for <b:includable id='post' var='post'>
• Now paste the Following code just after it.

Code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsKzPHwuNGNCv2ZFhwnkBELwlUSZEKWAhJFOKGd07xI6CPi8Jmwbyh4xJG_SlSEQhsjSt4Fun1d-7S1zW9U47vSHBG8xa3_VEzVtLrZud6TSqU8K0YIGHk20rOsX9dmjo_s0md3715ec7D/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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsKzPHwuNGNCv2ZFhwnkBELwlUSZEKWAhJFOKGd07xI6CPi8Jmwbyh4xJG_SlSEQhsjSt4Fun1d-7S1zW9U47vSHBG8xa3_VEzVtLrZud6TSqU8K0YIGHk20rOsX9dmjo_s0md3715ec7D/s400/gc_social_sprite.gif&#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{
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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLO_P-K5bYeXKiWxF71-TIP3HwlRrMCExOzd7_H-j9HacjJ1Su-yiUxf8GWLBCe4ZLXPzJlC5LiMNuNgRX-QAjk1KVwJAiCLdHzcAYyjmlK91UsxryzZDppn7CM1okw7yuFTTIk6R1GrHV/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='Allin1-web'/>
<span class='st_pinterest_vcount' displaytext=''/>
<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;MY BLOGGER TRICKS&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 rel="nofollow" href='http://allin1-web.blogspot.in/2013/06/add-floating-share-buttons-social.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>

• Click on save template button.
• You are done!

Customization:

• 1. Replace Allin1-Web with your twitter username.
• Change Direction By Changing From left To Right
• You can even change its background color By Changing #f7f7f7 With Destination Color code.

Note: If you feel that facebook like button is not working then add below code just after

<body>
<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>

Related Articles:

• 1.CSS Style Auto Numbering Popular Post Widget
• 2.Add Google Anaylist To Blogger
• 3.Add Icon Before Post Title