Header Ads

Add Floating Share Buttons Gadget To Blogger

14:16 0
Social share buttons gadget is no doubt the best gadget that can help you to increase your blog's content sharing on social media sites that bring you more and more traffic for your blog. You provide quality content and your readers don't share them because you have not added any social share widget in your blog. That's why this widget is must used. One of the best way to get more shares from your readers is to add social sharing widget below post title because place under the post title is most viewed by the readers. Here at Blogger Tips and Tricks I have shared lot of social sharing gadgets that are necessary for every blog to increase its readership. Today I come with another very popular gadget that is floating share buttons gadget for blogger which includes buttons of top networking and social media sites like facebook, twitter, Google Plus and Pinterest also. This gadget is very famous among the top bloggers because it float with the scroll bar and hence better chances to get more shares from the readers. You can get complete list of gadgets from Blogger Widgets and Plugins page. Now let see how to add this floating social media share buttons widget into blogger blog.

Adding Floating Sharing Gadget


Below are some very easy steps you have to follow to add this gadget into your blogspot blog. 
  1. Go to your Blogger dashboard.
  2. Go to Template.
  3. Now backup your blog template.
  4. Now navigate to Edit HTML >> Tick Expand Widget Template.
  5. Press CTRL+F and search for

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

  6. Now paste the below code just after it.

    7. <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/AVvXsEjPsMrEkY7Hjc3vF1U-18MQ3L6YWVrgnadNKSA63QKMqWfaRljo5rp2ghnhGupPsuFt6nPe2zqhxpMXsXtf_PsPPQJk-XXh5raMLOIGZ-AuMv8nKtH0xr3ry_9mqzmZ7S1gaqeeL4tlOmbX/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/AVvXsEjPsMrEkY7Hjc3vF1U-18MQ3L6YWVrgnadNKSA63QKMqWfaRljo5rp2ghnhGupPsuFt6nPe2zqhxpMXsXtf_PsPPQJk-XXh5raMLOIGZ-AuMv8nKtH0xr3ry_9mqzmZ7S1gaqeeL4tlOmbX/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/AVvXsEjC-zylx2BVBUNyy2Y0IdPoaAVoAX_RH28wGhIij4MtRu2FFIggaJOUMMwrqwZiDCElQSxNUmd5WyZcKd6It2e8zfX6KuA5Zest4wASJVNpYZZKP7kR5nioigcc1iECG-EER0-VZxEarTQF/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='NetRevar'/>
    <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 rel="nofollow" href='http://www.bloggertipstricks.com/2013/03/floating-share-buttons-gadget.html' style='color:#CAC8C8;'>Widgets</a></p>
    </div>
    </b:if></b:if>

  7. Click on save template button.
  8. You are done!
Customization:
  1. Replace NetRevar with your twitter username.
  2. By default this gadget will float on left side, if you want it to right side then change left to right from the red line in the code. You can even change its background color from there itself.
Note: If you feel that facebook like button is not working then add below code just 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>
Tags:

No comments

Subscribe to: Post Comments ( Atom )
Powered by Blogger.