Add Vertical Floating Social Media Sharing Buttons to Blogger

Today this article is about adding vertical floating social media sharing buttons widget. Blogging became easier than before due to wonderful widgets. There are many wonderful widgets available for blogger. Today this post explains you how to add social media sharing buttons widget. The use of this widget is it helps people to share your posts in social networking sites. They can easily like or share your articles with this widget. The main aim of this widget is if anyone share your article in social networking sites, it will bring traffic to your blog without your promotion. We all know backlinks from high authority sites are very important to your blog. The more people share your posts, the more backlinks you will gain. Though Nofollow backlinks wont affect your blog ranking still it will bring you good traffic to your blog. So its important for every blog webmaster to use this social media sharing buttons widget in their blog.

Do Check : Add Facebook Comment Box To Blogger

Many people asked me how to add vertical floating social media sharing buttons. I developed a widget which was posted recently but many people commented that widget is not working perfectly in their blogs. So today I came up with another widget which works perfectly in all blogs. This widget was created by MBT.  

Also See : Add Floating Like Box To Blogger

Vertical Social Media Sharing Buttons to Blogger

Step 1: Goto your blogger account.

Step 2: Then Goto Template >> Edit HTML

Step 3: Now search below code.

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

Step 4: Paste the following code after 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:urlundefined&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVEobog4SSi5oQSPGpQXN4zKLFVUYCJaOKBIpH0JcdJ6fcredwhCCw9Wz1QF0XLLUvibWO9zwS3Sh725jYwzFPSJC190t8mU0bsfKEhA6eQGfc_NOBNAG3phDPLLqHygb0x6W3cZgzrOu-/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:urlundefined&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVEobog4SSi5oQSPGpQXN4zKLFVUYCJaOKBIpH0JcdJ6fcredwhCCw9Wz1QF0XLLUvibWO9zwS3Sh725jYwzFPSJC190t8mU0bsfKEhA6eQGfc_NOBNAG3phDPLLqHygb0x6W3cZgzrOu-/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; } </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.optionsundefined{onhover:false});</script> <span class='st_fblike_vcount' displaytext=''/> <span class='st_twitter_vcount' displaytext='' st_via='BloggingMind'/> <div style='margin:5px 0 0px 0;'> <center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a> <a href='javascript:voidundefinedrun_pinmarkletundefined))' 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_pinmarkletundefined) { var e=document.createElementundefined&#39;script&#39;); e.setAttributeundefined&#39;type&#39;,&#39;text/javascript&#39;); e.setAttributeundefined&#39;charset&#39;,&#39;UTF-8&#39;); e.setAttributeundefined&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.randomundefined)*99999999); document.body.appendChildundefinede); } </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: &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.bloggingmind.com' rel="nofollow" style='color:#CAC8C8;'>Widgets</a></p> </div> </b:if></b:if>

Step 5: Now change BloggingMind to your twitter username and you can change the width 60px according to your blog design.

Thats it. Now "Save Template" and you have successfully added this vertical floating social media sharing buttons to your blog. Happy Blogging! Don't forget to subscribe below for free updates. Vertical Floating Social Media Sharing Buttons For Blogger, How To Add Social Follow Us Buttons For Blogger,  
Recommended : Add Awesome Social Follow Us Buttons For Blogger

Subscribe Today And Discover All Tips And Tricks !

Note : Don't forget to click the confirmation link in youe email inbox!