1.Go to "Template" --> "Edit HTML" of your blog.
2.Click on "Expand Widget Templates"
3.Add this code just above <head> tag:
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'>
{lang: 'en-US'}
</script>
4.Now Scroll down to where you see below 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"'>
<style type='text/css'>
.multisharebox{background:none repeat scroll 0 0
#EFEFEF;float:right;margin:5px 0 3px 10px;padding:0 5px 0;text-shadow:0 1px 0
#FFF;width:260px;border:4px solid #d8dfea}
.multisharebox table{margin-bottom:0 !important}
.multisharebox td{padding:4px 3px !important}
.fb-like-boxtop{background:none repeat scroll 0 0
#EDEFF4;border:1px solid #D8DFEA;color:#000;float:right;font-size:11px;margin:0
0;padding:5px 10px;text-align:left;width:230px}
.fb-like-boxtop a{color:#000;text-decoration:none}
.fb-like-boxtop a:hover{color:#000;text-decoration:underline}
.fb-like-box{background:none repeat scroll 0 0
#EDEFF4;border:1px solid
#D8DFEA;color:#000;float:right;font-size:11px;height:60px;margin:5px
0;overflow:hidden;padding:5px 10px;text-align:left;width:230px}
</style>
<!-- Perfect Share Box : Created by
www.bloggertipandtrick.net -->
<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);
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 RED lines from the code.
6. Save your template and you are done.
Posted in: blogger tips
