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
Copy the code below and paste 'above'

<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 ]]> in your template.
Copy this code below and paste 'above' ]]>

#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
Copy the code and paste 'below' the second
you find in your template.

Or to place the floating share buttons after the post title,

Search for
Copy the code and paste 'below' the second
.

<b:if cond='data:blog.pageType == "item"'>
<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='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=button_count&show_faces=false&width=100&height=25&action=like&font=tahoma&colorscheme=light"' 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'>Tweeta><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='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.snippet' style='margin:0 10px 5px 0;'>Pin Ita> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>li>

ul>
div>
div>
b:if>

Save your template.

How to Add Floating Social Share Buttons Below Blogger Post Title

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

<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 ]]> in your template.
Copy this code below and paste 'above' ]]>

#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
Copy the code and paste 'below' the second
you find in your template.

Or to place the floating share buttons after the post title,

Search for
Copy the code and paste 'below' the second
.

<b:if cond='data:blog.pageType == "item"'>
<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='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=button_count&show_faces=false&width=100&height=25&action=like&font=tahoma&colorscheme=light"' 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'>Tweeta><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='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.snippet' style='margin:0 10px 5px 0;'>Pin Ita> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>li>

ul>
div>
div>
b:if>

Save your template.

by Jillur Rahman

Jillur Rahman is a Web designers. He enjoys to make blogger templates. He always try to make modern and 3D looking Templates. You can by his templates from Themeforest.

Follow him @ Twitter | Facebook | Google Plus

Tags: Без рубрики