Google Blogger has introduced Google +1 button but only inline. You can’t choose Google +1 bubble button for Blogger posts and pages. If you want to use Google +1 button on your blog then you should have to add Google +1 bubble button by yourself.

Bubble Google +1 button is available in two formats –
1. Bubble Horizontal
2. Bubble Vertical.

It is also available in four different sizes –
1. Small
2. Medium
3. Standard
4. Tall

Well you can easily get Google +1 button from official page.

Google+ Share button Official Page: https://developers.google.com/+/web/+1button/

Google +1 Bubble Buttons
Google +1 Bubble Buttons

But when you add this button to your blog or site that is on Blogger and have more than one post on home page then this +1 button +1 or shares home page not the posts. So in this article I will cover how to add a Google +1 button on Blogger blogs which will be valid for each post not only to home page. For this purpose we’ll modify default Google+ share button code. Let proceed to modification:

1. Bubble Horizontal – Default Google +1 button code (of medium size):

<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="medium"></div>

Bubble Horizontal – Modified Google+ share button code (of medium size):

<!-- Place this tag where you want the share button to render. -->
<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>

2. Bubble Vertical – Default Google +1 button code (of tall size):

<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="tall"></div>

Bubble Vertical – Modified Google+ share button code (of tall size):

<!-- Place this tag where you want the share button to render. -->
<div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/>

Above highlighted part is added to work code as per our objective of this article.

How to insert this modified button code to Blogger template?

  1. Go to Blogger Dashboard › Select blog › Switch to Template tab › Edit HTML › Check Expand widget template
  2. Now search template for <data:post.body/>
  3. If you want to place Google +1 button above post then insert code above <data:post.body/> or if you want to place Google +1 button below post then insert code below <data:post.body/>
  4. Save the template changes › Done

Note: you have to add javascript give below under <head> if you are not using it.

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

› Other important thing –
Learn how to edit Blogger template

Conclusion:
After a pretty exercise on Google +1 button code and template customization you get a Google +1 button on your blog for post and pages.