Social media floating bar widget

Now a days,a new trend has started , Bloggers prefer floating side bat share buttons rather than fixed ones.It helps the visitors to like and share your post among the people, within few seconds without leaving the blog even for a second, there are some different services  like addthis an sharethis doing extraordinary jobs by providing certain widgets. But they still work more and more to make there wedged much more perfect than before. Installation of these wedgeds are quite easy,just follow these steps and you're done with it ...

=>Social Media Floating Bar with share buttons:

1. Log-in to your blogger dashboard.
2. Goto template>backup, CREATE A BACKUP FILE OF YOUR TEMPLATE.
3. Now click EDIT html

     4. Inside the “HTML EDITOR”, Press CTRL+F and find </body> tag.

    5. Copy & paste the following code just above </body> tag.

____________________________________________________________

!-- Social Media Floating Bar With Pinterest & Other Sharing Buttons CSS Styling Starts-->
<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:-70px;
float:left;
background-color:#f7f7f7;
width:60px;
padding: 5px 0 10px 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_sidebar_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/AVvXsEgHdlAlK4rRkqSA-RU2He8FySUGh3hVPc06BCXr3dPrz3a0uepHjRiHjzZRPYstMZglL73CaDOn3K_61mmZ_RwTruG5vFkxwxfrLS7RTqsErtvedoJ0k46uYOiw0ezhdxzBQbewqobpc5Kn/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/AVvXsEgHdlAlK4rRkqSA-RU2He8FySUGh3hVPc06BCXr3dPrz3a0uepHjRiHjzZRPYstMZglL73CaDOn3K_61mmZ_RwTruG5vFkxwxfrLS7RTqsErtvedoJ0k46uYOiw0ezhdxzBQbewqobpc5Kn/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(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifgR49DB5mN19ZqSVrNHIjOuosvjWsniAIqzSggRu7STxwkdXGxWrpb9hqp3Yt8r8uJ2FPMAXVfW7I9RApqnD_WVKGzn4C9yQzFDJ4tUUL5R-DHzYj107e1_OFBbfhgs5FGaHQM4hvH_9H/s400/bubble_arrow_pinterest.png&#39;) !important;
}
.st_pinterest_vcount
{
margin-bottom: 0px;
display: block;
}
</style>
<!-- Social Media Floating Bar With Pinterest & Other Sharing Buttons CSS Styling Ends -->

<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>
<!-- Facebook Button -->
<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>
<!-- Twiiter Button -->
<span class='st_twitter_vcount' displaytext='' st_via='taimurahmed5b'/>
<!-- Pinterest Button -->
<span class='st_pinterest_vcount' displaytext=''/>
<div style='margin:0px 0 0 5px;'>
<!-- G+ Button -->
<span class='st_plusone_vcount' displaytext=''/>
</div>
<!-- Share This Button -->
<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 Tutorials Cafe&quot;,ui_header_color: &quot;#ffffff&quot;, ui_header_background: &quot;#0080FF&quot;
}
</script>
<!-- Email Button -->
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'>
<a href='' style='color:#CAC8C8;'/></p>
</div>
</b:if>
</b:if>

____________________________________________________________

6. Click “Save Template”.

You are all done. Refresh your blog to see the Social Media Floating Bar Drifting.

=>Some Important instructions:

1. This widget works at different places in different templates, so if the above code doesn't work before </body> tag, then find: 

<b:includable id='post' var='post'> tag, Click ► to expand the code.

Just below <b:includable id='post' var='post'> tag, paste the widget code.

2. If in case Facebook Like Button doesn't work, then add the following code before</body> tag.

____________________________________________________________

<div id='fb-root'/>
<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 = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

____________________________________________________________

3. Replace “mytutorialscafe” with your own Twitter username.

4. By default, this floating bar will drift at the left side of your blog. To change it to the right or other settings, adjust it in the highlighted "Yellow Code" above. i.e.

____________________________________________________________

position:fixed;
bottom:10%;
margin-left:-70px;
float:left;
background-color:#f7f7f7;.

____________________________________________________________

Thats it

Hope this new wedged gives your blog new colors as it is one of the best floating bar uptil now. If you need any help, please feel free to ask. Don’t forget to spread this knowledge with your friends and subscribe at our blog for more updates like this and also leave your comments below. Peace and blessings everyone.! :)