How To Add Social Media Sharing Buttons below Blogger Titles

Social Media is bicoming increasingly important to get more trafic to blog or website, and one of the most important ways is to add Social Media Sharing Buttons under your Blog's titles posts. In this tutorials you will know how to add Social Media Buttons bellow the Blog's titles. Why we should put the Social Media Buttons in your Blog posts? Whenever a reader scrolls down the page, he/she will still able to see the Social Media Sharing Buttons without having to srolls back to the top of page.

The Social Butttons include : Facebook, Twitter, Google.....

How to add Social Media Buttons

Step 1: Log in to Blogger Dashboard go to Template > Edit HTML

Step 2: Click anywhere and press Ctrl + F to open search box and then type </head> and hit Enter to find the code:

Step 3: Just above </head> add the scripts bellow:

<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>

Step 4: Now before ]]></b:skin> add the following CSS Style:

#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;
}

*Note: To change the width of the bar, just edit 55opx value in red
Step 5: At the end just bellow the second <div class='post-header'> press Ctrl + F and press Enter two time to find the second one and add the following code:

<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>

*Note: If you want the buttons appear at the end of the post, just past this code before or after <div class='post-footer'>
If the bar overlaps with the content, then change 35px to higher value.

Step 6: Click on the save Template... and now you are done!

Enjoyed this post?
Be sure to subscribe to get regular updates delivered to your email inbox, for free.