How To Add New Official Google +1 Button to Blogger

This tutorial I will explains, how to add blogger new Official google +1 button to blogger.This will more helpful if your template is a highly customized blogger template.But your template is a blogger default template, then you can add this share buttons editing the Blog Posts widget and enabling Show +1 Button in Page Elements section.



But this method does not work for you, follow the steps given below to add google +1 button to your blog



How To Add New Official Google +1 Button to Blogger

1.Login to your blogger dashboard--> Design- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this </Head> tag

4.Copy below code and paste it just before the </Head> tag

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

5.Now Scroll down to where you see this <div class="post-header-line-1"> tag

6.Copy below code and paste it just before the <div class="post-header-line-1"> tag

+1 Button Small (15px)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons' style='float:right;margin-right:10px;'>
<g:plusone size="small"></g:plusone>
</div>
</b:if>

+1 Button Medium (20px)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons' style='float:right;margin-right:10px;'>
<g:plusone size="medium"></g:plusone>
</div>
</b:if>

+1 Button Standard (24px)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons' style='float:right;margin-right:10px;'>
<g:plusone></g:plusone>
</div>
</b:if>

+1 Button Tall (60px)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons' style='float:right;margin-right:10px;'>
<g:plusone size="tall"></g:plusone>
</div>
</b:if>

7.Save Your Template and you are done..

Please checkout more info

• How To Add Official Google +1 Button to Blogger (Without Counter)