I have shared smooth vertical flaoting share buttons gadget before and in this post I am sharing Floating social sharing bar. You can see a demo in below image, hope you like it:
To add this gadget below post title in every post of your blog follow below steps:
Step 1: Go to blogger dashboard and choose the blog in which you want to add this gadget.
Step 2: Select template in the menu on left side and click on Edit Html.
Step 3: Click anywhere inside the code box and search for </head> by using Ctrl+F on your keyboard.
Step 4: Copy the below code and paste it just below </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' : '625px', 'top' : '0px'});
} else {
$movesbuttons.css({'position' : 'absolute', 'top' : 'auto'});
}
});
});
//]]>
</script>
Step 5: Search for ]]></b:skin> by using Ctrl+F on your keyboard and just above it paste the below code:
#floating-social-buttons {
padding: 6px 0px 12px;
position: absolute;
background: #F6F6F6;
border-bottom: 1px solid #DEDEDE;
width: 625px;
height: 18px;
z-index: 10;
}
.floating-social-buttons {
margin-left: 5px !important;
}
.floating-social-buttons li {
float: left;
margin-left: 5px;
list-style:none;
}
Step 6: Now search for <div class='post-header'>, make sure to search 2 times and paste the below code below the second <div class='post-header'>:
<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' style=' position: absolute; left: 135px; '>
<p style=' position: absolute; top: -13px; left: -132px; font-size: 16px;'>SHARING IS CARING:</p>
<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>
<li style=' margin-left: 20px; '><script src='//platform.linkedin.com/in.js' type='text/javascript'> lang: en_US</script>
<script data-counter='right' type='IN/Share'/></li>
</ul>
</div>
</div>
</b:if>
Step 7: Click on save template and you are done successfully.
Customization:
- If you wish to change width of the bar increase or decrease number in pieces of codes highlighted in step 4 and step 5.
- If you want to change title(SHARING IS CARING:) Replace it with desired title is code used in step 6.
Make sure to change width in both pieces of codes used in step 4 and 5 otherwise with will remain same.
If you have any question related to this post or this gadget is not working is your blog ask me in comments. Follow and subscribe to get latest updates about blogger gadgets, tips, tricks, menus, tutorials, seo etc. Share this post with others and help me spread 101Helper.
Search tags: Add social media buttons below titles in blogger, Social buttons for blogger, floating social buttons, horizontal share buttons, share bar for blogger, Floating social sharing bar for blogger, how to add floating buttons in blogger, 101Helper gadgets for blogger.
