How to Add Floating Social Sharing Widgets in Blog of Blogger

This is one in all the few social sharing widgets that took plenty of my time in coming up with it. you have got seen the trend of floating sharing count buttons on in style blogs. the normal icons are currently replaced with auto incremented counter buttons that are updated in seconds. we have a tendency to created completely different|completely different} versions of this bar applying each Jquery effects and CSS3 designs however this are is different as a result of it contains custom twitter, pinterest associated an Email button. Services like Addthis and Sharethis are each doing an excellent job however they still ought to work on a number of their plugin integration conflicts. Pinterest pin it buttons are inflicting nice hassle and it badly fails in winning the right thumbnail image. In most cases it doesn't even choose a image therefore creating the complete promise construct tasteless. we have a tendency to but redesigned the contraption provided by shareThis to form a replacement one by correcting all flaws. This sharing bar would float to the left of your blog posts and would float because the visitor scrolls up or down. This contraption contains counters of important social networking sites that has the potential to bring you traffic by current your content to a wider audience. we've tested the contraption on major browsers like IE7+, Firefox, Chrome etc. and located it operating simply fine with no compatibility problems or style conflicts.

Developers and bloggers are requested to link back to the present post if just in case they need to share our code with their readers. Lets get to work now!

Which Social Networking Buttons To Use?

Your first priority must always be Facebook, Google+, Twitter, Linkedin and currently Pinterest. of these sharing counters play well in current your content over a good vary of visitors. Social Media may be a non-stoppable engine, that if driven properly and thoroughly will bring a lot of valuable traffic every visitor value a greenback. Since displaying too several count boxes may for certain result your blog load time thus we've further a AddThis share button that provides visitors with over 330+ social sharing choices all at one place.

Why not use JQuery?

Ignore JavaScript and its library that is Jquery the maximum amount as potential. Browsers like internet explorer still lacks support to any or all functionalities offered by jquery. what is more JavaScript is chargeable for an excellent proportion of your overall web log load time. we have a tendency to thus failed to add a swish slippy result to the current plugin as we have a tendency to previously did toJquery slippy share convenience

How it works?

We have integrated each Addthis and ShareThis service in it. so as to customise the twitter button et al we have a tendency to took the Sharethis default code and customise it to alter the button image, bubble size and count text. The convenience that we have a tendency to at first developed appearance extraordinarily engaging compared to the current one. 

You can observe that each Twitter, Google and, Pinterest and Stumbleupon area unit displayed with custom shapes, same sizes and totally different count colours. I spent plenty of your time making an attempt to create all howevertons of constant size by employing a common image connected by a supernatural being but the sole downside with this plugin is that the counts wont show the official numbers registered at Twitter, Google and pinterest servers however they'll show increments registered at ShareThis. If you add this sharing bar to your blog, you'll see zero on all counters unless somebody clicks them and circulates your content.

To correct this issue I had to sadly born the thought of sharing the higher than designed version and share this tutorial gizmo instead. but the widget on our blog still contains the twitter howeverton that wont show official count but that of ShareThis. If you'd prefer to replace it with the official massive size twitter count box then you'll sure enough try this by customizing the code shared below.

Adding Floating Bar To Blogger

The steps are kept very easy to use. All you would like is to repeat and paste the long chunk of code we tend to developed and tested all day. Follow these friendly steps:

1. Go to Blogger > Template
2. Backup your template
3. Click Edit HTML
4. Press Ctrl+F and Search for

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

5. Just below it paste the following code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.bob_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;
}
.bob_social_floating .bob_side_social_button{
margin-bottom:5px;
float:none;
height:auto;
width:60px;
}
.bob_social_floating .st_twitter_vcount, .bob_social_floating.st_plusone_vcount, .st_email{
margin-left:5px;
}
.bob_social_floating .st_fblike_vcount{
margin-left:5px;
}
.bob_social_floating .stButton_gradient{
background:none !important;
height:21px !important;
padding-left:0 !important;
}
.bob_social_floating .chicklets, .bob_social_floating .stMainServices {
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJvmq3-Br9OJMvTyk7dqQtA5-L43FGTeZnLFunxHD9qmd1_nYQ_eJrSfDz1CoOU7yrCNnwSkaUQIWivWfRA7da2c1KP4sD5kG7QGV-7MUiHNJ0IGc-HsPCk06M6uy1DGOG0SAYdmt9Gfyn/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/AVvXsEgJvmq3-Br9OJMvTyk7dqQtA5-L43FGTeZnLFunxHD9qmd1_nYQ_eJrSfDz1CoOU7yrCNnwSkaUQIWivWfRA7da2c1KP4sD5kG7QGV-7MUiHNJ0IGc-HsPCk06M6uy1DGOG0SAYdmt9Gfyn/s400/gc_social_sprite.gif&#39;) !important;
}
.bob_social_floating .st_twitter_vcount .st-twitter-counter{
background-position:0 -58px !important;
}
.bob_social_floating .stButton_gradient{
border:none !important;
}
.bob_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;
}
.bob_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;
}
.bob_social_floating .stBubble{
background-position: 21px 31px !important;
height:35px !important;
}.bob_social_floating .st_pinterest_vcount{
margin-left:5px;
}
.bob_social_floating .st_pinterest_vcount .st-pinterest-counter{
background-position:0 -19px !important;
}
.bob_social_floating .st_pinterest_vcount .stBubble_count{
color:#FF0505;
background-color:#fbf8f8 !important;
}
.bob_social_floating .st_pinterest_vcount .stBubble{
background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsvmOK_g2uPi2o9-XYEhCoDzCylciS0kdCJHtcFsQ7Ei3C-MjmLGMi40kz95Z4NcvxwyWG2Hnlit3_8pIzibVf9YetxOliey8mMJ4aB_dhv4xEhp6dYXHek7O1NLK2V8ddIbhcUUh5ZQxm/s400/bubble_arrow_pinterest.png&#39;) !important;
}
.st_pinterest_vcount{
margin-bottom: 0px;
display: block;
}
</style>
<div class='bob_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 bob 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='blogofblog'/>
<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;Blog of Blogger&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.blogofblogger.com/2013/07/how-to-add-floating-social-sharing.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>

Just replace Blogofblog with your twitter username.

6. Save your template and you are all done!

Optional step:

If in case the facebook like button did not work then add this Javascript SDK code just below <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>

Got Questions?

This floating bar would show on post pages solely and wont show on homepage. The widget contains a white background and floats to the left of blog posts. If enclose you wish it to float to right then all you would like is to edit the a part of the code bolded in black. you'll certainly elicit my facilitate which might be no but a pleasure. Please post any question you'll have within the comment box below. until then take excellent care of yourselves and your favourite ones. Peace and blessings pals! :)