TutorialWebForBlogger

TW4B It's about a blog that talking about blogging widgets, blogger template tutorials, search engine optimization SEO and other useful blogging tips

Google +1 button or google plus one button is very useful button to be added on your blog. you can add the button with or without counter. ...

How to Add Google Plus One Button in Blogger

Google +1 button or google plus one button is very useful button to be added on your blog. you can add the button with or without counter. (except for tall button, it is always has a counter above)

There are four style of google plus one button :

1. Small Button [15px]


2. Medium Button [20px]


3. Standard Button [24px]


4. Tall Button [60px]


How to add google plus one button in blogger template ?

1. Login to blogger with your ID
2. Click design

3. Click edit html

4. Click download full template

5. Tick expand widget template

6. Find code below :

</body>

press (Ctrl+F) to easily find.

7. Copy code below and paste it just below the above code.

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

8. Now find code below :

<div class='post-header-line-1'/>

press (Ctrl+F) to easily find.

9. Copy your google plus one button code and paste it just below the above code.

NOTE : If you can not find <div class='post-header-line-1'/> in your blogger template, paste your google plus one button code just before <data:post.body/>

Code 1 : Small Button

With Counter

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

Without Counter

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;margin-left:10px;margin-bottom:10px;'>
<g:plusone size="small" count="false"></g:plusone>
</div>
</b:if>

Code 2 : Medium Button

With Counter

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

Without Counter

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;margin-left:10px;margin-bottom:10px;'>
<g:plusone size="medium" count="false"></g:plusone>
</div>
</b:if>

Code 3 : Standard Button

With Counter

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

Without Counter

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;margin-left:10px;margin-bottom:10px;'>
<g:plusone count="false"></g:plusone>
</div>
</b:if>

Code 4 : Tall Button

Always has a Counter above

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

10. Click save template and done.

Now you've already added google plus one button on your blog.

There are no comments yet for 'How to Add Google Plus One Button in Blogger'