create floating Vertical share buttons for blogger

How to Add create floating Vertical Social Media Sharing buttons to blogger blog. This is one of the most popular Blogger Widgets. You will find a lot of Widgets on the internet for blogger. I will show you the tutorials how to add this widget or gadget in your blogger website. As this widget is floating, so it will attract your readers mind to share your post. 

Why sharing this post ?
As a blogger your aim is to make your blog popular, Increase your visitor's and pageviews and this is work of this widget. How ? ok, When someone hits tweet,facebook like or google+ from this it will shared on their social media, so their friends will be able to see this and they will be redirected to your Blog. Isn't it simple ?


Now adding this widget to your Blog.

• Now go to your blogger Dashboard > Template > Edit Html and search For this code  

<b:includable id='post' var='post'>   ( If you do not find these codes then Tick all these ▶ signs ) 

• Now paste below codes Just BELOW/AFTER The above 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/AVvXsEitxRVp90G2IlLmQHsRwkd-pOP0ijYDD__ouOw5hE13bRXco_MeAaGRKn46aDF2UI9Ph0i8Co2naseriScDLf9VlaBaKedKUqLIw5rBpQt6MUie9jY6qlbLaTp3IPOHYxUeZ6HlaIoJFq2R/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/AVvXsEitxRVp90G2IlLmQHsRwkd-pOP0ijYDD__ouOw5hE13bRXco_MeAaGRKn46aDF2UI9Ph0i8Co2naseriScDLf9VlaBaKedKUqLIw5rBpQt6MUie9jY6qlbLaTp3IPOHYxUeZ6HlaIoJFq2R/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/AVvXsEhoRT_AeaM6qXZ3PbKQLIg_7dRtUMDihdm8dy4KLITGuH1iM_0Xc7Mzm5U9NwlqyIZc6OSLPFGN95jiyxXSpGCJsnb3icT-egOtCtV-uk2824nnGk04yXFMkdRxjJ-b2Qmtb5zfajhD3Jb2/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='LiveMeccaBD'/> <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 href='http://www.mybloggertricks.com/2012/05/create-floating-bar-for-pinterest-other.html' style='color:#CAC8C8;'>Widgets</a></p> </div> </b:if></b:if>

Now a little Customization

• Replace LiveMeccaBD With you Twitter username.

• This widget will Left side, if you want this to float at right side change this float:left

OPTIONAL STEP:

IF IN CASE FACEBOOK LIKE DO NOT WORKS

• Search for the code <body>
• Now  paste this below code just Below/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>

NOW DONE !! SAVE YOUR TEMPLATE...

This floating bar will be visible only n post pages.

Having trouble ??

Let me know. Comment Below and describe your problem, if you face any problem.

Courtesy Mybloggertricks