Social sharing widgets below post title for blogger is very popular in search results, it becomes trendy in this competition and fish ma...
Social sharing widgets below post title for blogger is very popular in search results, it becomes trendy in this competition and fish market era everyone wants to get thousands of visitors for better earning and for online reputation. Social Sharing plays a very vital role in the blogosphere, in busy time it will help you in covered traffic bounce rate and it also maintains your Alexa ranking which keeps importance for your advertiser.
The widget that am sharing with you is totally different from others because it has floating effect means when you scroll your page the social sharing widget also move with him, sounds awesome for your visitors and subscribers, follow the below instruction for better emphasize.
Open your blogger account.
Move on Template>> EDIT HTML>> Press CTRL+F for open the search box.
Search </head> in the given search box.
Now paste the below code just above the </head> tag.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>Replace 550px with your desire adjustment for changing the box width.
<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>
Then, open your b: skin CSS style sheet and add the below CSS styles in the style sheet.
#floating-social-buttons {As I told above change 550 as you want.
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;
}
Afterwards, find the <div class='post-header'> and remember this code will appear two times, so replace the second code with the given below script.
<b:if cond='data:blog.pageType == "item"'>If you wish to display this widget at end of post so replace the below code from the above script. When you will implement this widget in footer so it may be overlaps, to fix overlapping change 35px from higher digits.
<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'>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='"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 It</a> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/></li>
</ul>
</div>
</div>
</b:if>
<div class='post-footer'>Lastly, click on Save Template and click on View Blog to check its position.
Connected Article: Sliding Scroll To Top Button for Blogger.
It really makes your work easy in social sharing, you can add more social network in this widget, but when you are doing editing so don’t forget to back up the template. Floating effect always admire visitors because it moves with your scrolling add it in your blog and if you like this widget so share with your readers and friends.
COMMENTS