Computer Enter: Add Floating Social Share Buttons Below Blogger Post Title

Thursday, August 18, 2016

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 blogs traffic because the post goes viral on these social bookmarking sites. Since this social share widget is a floating/sticky one, where its 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.

Go to link download