As many bloggers use Google's blogger to host their sites; here is a quick tutorial of how to put the +1 button in a blogger blog (blog hosted by Blogger named xyz.com OR xyz.blogspot.com):
Method One: To add the +1 button to your blog, you’ll need to enable Share buttons on Blogger. To do this, go to Design > Page Elements on your Blogger dashboard, find the Blog posts area, click on Edit, and select the “Show Share Buttons” option. If you are already using Share buttons, the +1 button will automatically show up as a new share option.
Method Two: This method will be of help for those bloggers who either are not able to show the +1 button, using the above method, as they may be using a customised blogger template or want the button to show at a more visible place. Here let I share with you how you can show the +1 button just below the post title, only on the individual post pages (not visible if you are on blog home page), just as tech24hours.com is showing -- To the left side, just below the post title:
Step 1: Go to Design - Edit HTML page of the blog
Step 2: Expand Widget Templates (by checking the square box)
Step 3: Search for <head> in the template code. Paste the code below just after it:
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
Step 4: Now search for <div class='post-header-line-1'/> in the template code and paste the code given below just after it:
<b:if cond='data:blog.pageType == "item"'>
<div style='float:right; margin-left:10px;'>
<g:plusone></g:plusone>
</div>
</b:if>
<br/>
If you want to increase the spacing between the post text and the button, just keep adding a few <br/> tags after the above code
Step 5: Save Template
You have successfully 'put the +1 button on the left side just below every post title'.
NOTE: Make sure to Download Full template before making the above changes to it. So that if things go wrong, you have the original template to rely on. --------
No comments
Post a Comment