Add Floating Social Share Buttons Below Blogger Post Title

Steps on How to Add Floating Social Share Buttons Below Blogger Post Title are given in this post. Including social media share buttons can help in boosting a blog's traffic because the post goes viral on these social bookmarking sites.

Since this social share widget is a floating/sticky one, where it's visible to all your readers as they scroll up and down, it makes it easier for them to share your blog post. Included on this social share widget are Facebook, Twitter, Pinterest and Google+ buttons.
Follow the steps below to add one to your blog.


Also Read:    Social Follow and Subscription Widget For Blogger
                    Facebook Popup Like Box With Timer For Blogger
                    Sliding Recent Posts Widget For Blogger

How to Add Floating Social Share Buttons Below Blogger Post Title

     
  • Click on 'Edit HTML'
  • With ctrl+F keys, search for this tag </head>
  • Copy the code below and paste 'above' </head>

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
    
    <script type='text/javascript'>
    //<![CDATA[
    $(function() {
    var $movesbuttons = $("#floating-social-buttons"),
    $window = $(window),
    offset = $movesbuttons.offset();
    $window.scroll(function() {
    if ($window.scrollTop() > offset.top) {
    $movesbuttons.css({'position' : 'fixed', 'width' : '550px', 'top' : '0px'});
    } else {
    $movesbuttons.css({'position' : 'absolute', 'top' : 'auto'});
    }
    });
    });
    //]]>
    </script>
    

  • Next, Search for ]]></b:skin> in your template.
  • Copy this code below and paste 'above' ]]></b:skin>
#floating-social-buttons {
padding: 6px 0px 12px;
position: absolute;
background: #F6F6F6;
border-bottom: 1px solid #DEDEDE;
width: 550px;
height: 18px;
z-index: 99;
}
.floating-social-buttons {
margin-left: 5px !important;
}
.floating-social-buttons li {
float: left;
margin-left: 5px;
list-style:none;
}

For the last code below:

To place the floating share buttons below the post title,
  •  Search for   <div class='post-header'>
  • Copy the code and paste 'below' the second <div class='post-header'> you find in your template.
Or to place the floating share buttons after the post title,
  •  Search for   <div class='post-footer'>
  • Copy the code and paste 'below' the second <div class='post-footer'> .

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div style='padding:5px 0 35px 0;clear:both;'>
    <div id='floating-social-buttons'>
    <ul class='floating-social-buttons'>
    
    <li><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;height=25&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:25px;'/></li>
    
    <li><a class='twitter-share-button' data-lang='en' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></li>
    
    <li><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='medium'/></li>
    
    <li><a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' style='margin:0 10px 5px 0;'>Pin It</a> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/></li>
    
    </ul>
    </div>
    </div>
    </b:if>
    

    • Save your template.
    You have successfully added the floating social share buttons below blogger post title.

    Do you like this post? Please link back to this article by copying one of the codes below.

    URL Of Post:


    HTML Link Code:

    BB (forum) link code:

    Comments