Add Floating Bar Having Google +1, Pinterest And Other Sharing Buttons

In this tutorial, i am sharing with you how to add floating bar comprising on google +1, pinterest, facebook like and other sharing button, this widget was created by applying both CSS and jQuery effect. I have made sure to keep the installation process installation to be easy as possible, it works perfectly well on most browser.
This floating bar will appear at the left hand side and move up and down as readers scroll up and down, it also contains a counters that shows how many times your post have been shared or liked. it was originally created by my blogger tricks and fully customize by me. This will really perform a great roll on spreading/sharing your post which will help you to drag real traffic.


Let's get started on adding the floating widget

• Login to your blogger dashboard
• Click on "Design" > "Edit HTML" > Back up your template
• Mark/Tick "Expand Widget Template"
• Use 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>
    .RB_social_floating{
        position:fixed; bottom:10%; margin-left:-80px; 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;
    }

    .RB_social_floating .RB_side_social_button{
        margin-bottom:5px;
        float:none;
        height:auto;
        width:60px;
    }
    .RB_social_floating .st_twitter_vcount, .RB_social_floating.st_plusone_vcount, .st_email{
        margin-left:5px;
    }
    .RB_social_floating .st_fblike_vcount{
        margin-left:5px;
    }
    .RB_social_floating .stButton_gradient{
        background:none !important;
        height:21px !important;
        padding-left:0 !important;
    }
    .RB_social_floating .chicklets, .RB_social_floating .stMainServices {
        background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirSINyuhaDTw6y1jQdKW2yfmQYMHTFxW0gcl0x9zJM6XkEOmCqsBG9SH3P2qti4chlS_5Xe2uBW4_2Oby1b_dAOXq44pYSyQbgW-tx5ImurbrEcBbYd8h8VSwSmEwJ4Ibh5JQjm6tSqrfC/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/AVvXsEirSINyuhaDTw6y1jQdKW2yfmQYMHTFxW0gcl0x9zJM6XkEOmCqsBG9SH3P2qti4chlS_5Xe2uBW4_2Oby1b_dAOXq44pYSyQbgW-tx5ImurbrEcBbYd8h8VSwSmEwJ4Ibh5JQjm6tSqrfC/s400/gc_social_sprite.gif&#39;) !important;
    }
    .RB_social_floating .st_twitter_vcount .st-twitter-counter{
        background-position:0 -58px !important;
    }

    .RB_social_floating  .stButton_gradient{
        border:none !important;
    }
    .RB_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;
    }

    .RB_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;
    }
    .RB_social_floating .stBubble{
        background-position: 21px 31px !important;
        height:35px !important;
    }

    </style>


    <div class='RB_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>
        <span class='st_fblike_vcount' displaytext=''/>
        <span class='st_twitter_vcount' displaytext='' st_via='realcombiz'/>

    <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:void(run_pinmarklet())' 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_pinmarklet() {
    var e=document.createElement(&#39;script&#39;);
    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
    document.body.appendChild(e);
    }
    </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;Realcombiz&quot;,
    ui_header_color: &quot;#ffffff&quot;,
         ui_header_background: &quot;#0080FF&quot;
    }
    </script>

    <span class='st_email' displaytext=''/>


    </div>
    </b:if></b:if>
 

• Click "SAVE TEMPLATE"

If you want to customize the position and the background of your widget, you can edit the code highlighted above, and replace 'realcombiz' with your twitter username. this will only display on your post pages.
hope this help? if you have anything to say of ask please use the comment box below.

In future i will be dropping a lot of tutorials on how you can add more share buttons and fully customize your widget, so for you not to miss any of this tutorials, subscribe to this blog now and take few seconds to share this.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz