New Floating Bar With Pinterest & Other Sharing Buttons

In my previous tutorial I have shared Slide Out Social Bookmarking Gadget, but this is without Pinterest, Email and other sharing options.So, In this tutorial, I am sharing with all of you how to add New Floating Bar With Pinterest & Other Sharing Buttons. You can simple install this widget on your blogger blog and it works very well on most browsers.

This floating bar will appear at the left side and move up and down as readers scroll up and down. All sharing buttons contains counter also.This widget was originally created by my blogger tricks and fully customize by us. Let's start the tutorial:

Updated: Thumbnail Image Fix For Pinterest Buttons In Blogger Blog

You May Like To Read:

1. Floating Social Media Share Buttons On Blogger Side
2. Slide Out Floating Sharing Buttons For Blogger Blog
3. Floating Comments Form Fixed Scroll Position - WordPress Plugin

Demo Screenshot:

How to Add New Floating Bar With Pinterest & Other Sharing Buttons

• Go to Blogger Dashboard
• Click on "Design" > "Edit HTML" > Back Up Your Template
• Check/Tick "Expand Widget Template"
• Press (Ctrl+F) To Find The Code Below

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

• Paste The Code Below Immediately After/Below It. 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.bd_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;
}
.bd_social_floating .bd_side_social_button{
    margin-bottom:5px;
    float:none;
    height:auto;
    width:60px;
}
.bd_social_floating .st_twitter_vcount, .bd_social_floating.st_plusone_vcount, .st_email{
    margin-left:5px;
}
.bd_social_floating .st_fblike_vcount{
    margin-left:5px;
}
.bd_social_floating .stButton_gradient{
    background:none !important;
    height:21px !important;
    padding-left:0 !important;
}
.bd_social_floating .chicklets, .bd_social_floating .stMainServices {
    background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYVzIUZgryK9BdeEY6q3OuKDvSmrYcpwRhX3dM6VIqNWM2GoD6UKTKTc1o4oKoFlsJBu_shWJI2gMJTpmv-QOzenDuhR66UaVM6fvJlcNpoKifs6TXLUcY1Ju3YGiKiHZRyLuID-uXcQSB/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/AVvXsEhYVzIUZgryK9BdeEY6q3OuKDvSmrYcpwRhX3dM6VIqNWM2GoD6UKTKTc1o4oKoFlsJBu_shWJI2gMJTpmv-QOzenDuhR66UaVM6fvJlcNpoKifs6TXLUcY1Ju3YGiKiHZRyLuID-uXcQSB/s400/gc_social_sprite.gif&#39;) !important;
}
.bd_social_floating .st_twitter_vcount .st-twitter-counter{
    background-position:0 -58px !important;
}
.bd_social_floating  .stButton_gradient{
    border:none !important;
}
.bd_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;
}
.bd_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;
}
.bd_social_floating .stBubble{
    background-position: 21px 31px !important;
    height:35px !important;
}
</style>
<div class='bd_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>
    <span class='st_fblike_vcount' displaytext=''/>
    <span class='st_twitter_vcount' displaytext='' st_via='blogsdaddy'/>
<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 + &quot;&amp;description=&quot; + data:post.title + &quot;&amp;media=&quot; + data:post.thumbnailUrl'>Pin It</a>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/></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;BLOGS DADDY&quot;,
ui_header_color: &quot;#ffffff&quot;,
     ui_header_background: &quot;#0080FF&quot;
}
</script>
<span class='st_email' displaytext=''/>
</div>
</b:if></b:if>

Also Read - Add Animated Flying Twitter Bird Widget For Blogger / Blogspot 

Customization

If you want to customize the position and the background of your widget, you can edit the code highlighted above in yellow color, and replace 'blogsdaddy' with your twitter username.We love questions, So, if you have any question then please ask via comments.Blessings and Peace. :)

Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks