How To Add Perfect Share Box to Blogger

Now follow the steps given below to add this share box for your blog.

1.Go to "Template" --> "Edit HTML" of your blog.

2.Click on "Expand Widget Templates"

3.Add this code just above <head> tag:

4.Now Scroll down to where you see below code:

<div class='post-header-line-1'/> 5.Copy Share Box code given below and paste it just below the above code.

NOTE: If you can't find <div class='post-header-line-1'/> in your template, paste your "Share Box" code just before <data:post.body/> .

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

<div class='multisharebox'>
<table>
<tr>
<td><table>
<tr>
<td><a class='twitter-share-button' data-count='vertical' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/>
<b:if cond='data:post.isFirstPost'>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'>
</script>
</b:if></td>
<td><script expr:src='"http://www.stumbleupon.com/hostedbadge.php?s=5&r=" + data:post.url'/></td>
<td><g:plusone size="tall" expr:href="data:post.canonicalUrl"/></td>
<td><a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><div class='fb-like-boxtop'>
<a class='pin-it-button' count-layout='none' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It Now!</a>
<a href='javascript:void(run_pinmarklet())' style='height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement('script'); e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);
document.body.appendChild(e);
}
</script> <script src='http://platform.linkedin.com/in.js' type='text/javascript'/><script data-counter='right' expr:data-url='data:post.url' type='in/share'/> <a href='javascript:window.print();'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGS8p2FwPmpErClDVGNo76tkANoPc3_gbUfjs9v06VER3EgxPfR58BHZa-Pd8KNZJhVwyNJi5jzXhZO9Pp9N5qbxTHBBBh7zu44Odxwq7iS5s6FIVNG4Slb4gVyQcCXhbz9b5jeGTlb9s/s1600/printbutton.png'/></a></div>
</td>
</tr>
<tr>
<td><div class='fb-like-box'>
Do you like this post?
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=230&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:230px; height:40px;'/>
</div>
</td>
</tr>
</table>
</div>

</b:if>

Note : This share box now will add to your Blogger post pages only. If you want to show it in every pages, then simply remove green lines from the code.

6. Save your template and you are done.