TUTORIAL IT: Add Floating Social Share Buttons Below Blogger Post Title

Monday, November 2, 2015

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-header'>
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.

Pages

Monday, November 2, 2015

Add Floating Social Share Buttons Below Blogger Post Title

How to Add Floating Social Share Buttons Below Blogger Post Title