How to Add Google Plus one +1 button on my blogs or blogspot?

The Google plus's new feature is +1 which is always pronounced as a “plus one”. This advanced feature is a alternative button and little bit familiar with Facebook Like button. Both of the button main aim or function is the promoting our site, it has some same unique features, that both google plus button and facebook like button shows our clicked friends list. But one simply difference between Facebook Like box and Google +1 button is that face book like box shows your friends list under the button in your post, Google +1 shows them under your post in Google page results ( that is nothing but search engine results pages).

 How to Add Google Plus one +1 button on my blogs or blogspot ?

1.            First of go to Dashboard > Design > Edit HTML.

2.            If you make any mistakes in editing your design template it create some error on that template, so better you take Back up your template.

3.    Then one important step is that tick the  Expand Widget Templates checkbox which is located in the top right of the HTML code window.

4.            Then read your HTML on that template, Try to find out a </head> tag, if you find out the word then immediately paste the following script right above it:

view sourceprint?

1	<!-- Google +1 script Start -->
2	<script type="text/javascript">

3	(function() {
4	var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

5	po.src = 'https://apis.google.com/js/plusone.js';
6	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

7	})();
8	</script>

9	<!-- Google +1 script End -->

5.            Next, look for <data:post.body/> and paste the following +1 button code immediately under it:

1	<!-- Google +1 button Start -->
2	<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

3	<p></p>
4	<div style='float:left;padding:10px;'>

5	<g:plusone expr:href="data:post.url" size="standard"annotation="bubble"></g:plusone>
6		</div>

7	</b:if>
8	<!-- Google +1 button End -->

Then one new important step is that Find  out this word on that html page <data:post.body/> and add the following script below/before it.

Small +1 button for Blogger

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<g:plusone size='small' expr:href='data:post.url'></g:plusone>

</b:if>

Medium +1

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<g:plusone size='medium' expr:href='data:post.url'></g:plusone>

</b:if>

Standard +1 button for Blogger

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<g:plusone expr:href='data:post.url'></g:plusone>

</b:if>

Tall +1

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<div style='float: right;'>

<g:plusone size='tall' expr:href='data:post.url'></g:plusone>

</div>

</b:if>

Then final step is that save your html page, and preview it.

If it correct, apply to your blog.