Add the Social Sharing Button Below Post Title in Blogger

Follow steps

1. Log in to your blogger.
2. Go to Template and back up your template.
3. Now click on "Edit HTML" and find the </head> section.
4. Copy the following code and paste it just above the </head> section.

<b:if cond='data:blog.pageType == "item"'>

<script type='text/javascript'>

// Twitter

undefinedfunction undefineda, b, c)

{var d=a.getElementsByTagNameundefinedb)[0];

if undefined!a.getElementByIdundefinedc)){a=a.createElementundefinedb);

a.id=c;a.src="//platform.twitter.com/widgets.js";

d.parentNode.insertBeforeundefineda, d)}})undefineddocument, "script",

 "twitter-wjs");

// Stumbleupon

undefinedfunction undefined){var a=document.createElementundefined"script");

a.type="text/javascript";a.async=true;a.

src="https://platform.stumbleupon.com/1/widgets.js";

var b=document.getElementsByTagNameundefined"script")[0];

b.parentNode.insertBeforeundefineda, b)})undefined);

</script>

<style type='text/css'>

#SocialBT {

    float: left;

    border-top: 1px solid #eaeaea;

    border-bottom: 1px solid #eaeaea;

    width: 610px;

    margin-bottom: 20px;

    margin-left: -10px;

    margin-top: 10px;

}

.headingsharer h5 {

    float: left;

    padding-right: 20px;

    padding-top: 18px;

    text-transform: uppercase;

    font-weight: bold;

    margin: 0px;

    padding-left: 10px;

}

.tweeetero, .fbwolo, .g-plusones, .stumblo {

    float: left;

    border-left: 1px solid #eaeaea;

    padding-left: 18px;

    padding-top: 15px;

    padding-bottom: 10px;

}

.g-plusones {

    margin-left: 20px;

}

</style>

</b:if>

1. Now search for <div class='post-body entry-content'>
2. And paste following code just above it.




<b:if cond='data:blog.pageType == "item"'>
<div id='SocialBT'>
 <div class='headingsharer'>
  <h5>SOCIALIZE IT →</h5>
 </div>
 <div class='tweeetero'>
  <a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
 </div>
 <div class='fbwolo'>
  <iframe allowtransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
 </div>
 <div class='g-plusones'>
  <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
  </div>
  <div class='stumblo'>
   <su:badge expr:location='data:post.url' layout='1'/>
  </div>
 </div>
 </b:if>


3. Now click on "Save Template" and you're done!

Posted in: blogger tips