Add the Google +1 Button to Your Blogger Blogs

Google released recently there +1 Button that will show publicly what you like, agree with, or recommend on the web. When you +1 an article or tutorial, your name will appear under that article when that article appears in search results. You can also find out what articles your friends read and liked. This according to Google is aimed to make Google Search results more relevant and useful. For Bloggers like you, I am sure this is another great tool to increase the PR, relevancy and importance of your blog. According to me, the more +1'd this you receive the chances for your blog's PR to improve will increase also because the PageRank algorithm is linked to all activities that takes place in your blog. The video below will demonstrate better,

How to add the +1 Button to Blogger?

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Search for </head>
4. Paste the code below just above </head>

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"> {lang: 'en-US'} </script>

     5.  Now Check the "Expand Widgets Templates" Box at the top right corner. In order to place the button just below Post titles then search for this code <data:post.body>  and place the +1 button code given below just above it,

<div style='float:left'>
<g:plusone size="standard" expr:href="data:post.url"/>
</div>

• You can display it to "left" and "right" by adjusting left
• You can change standard to medium, small or tall. Choose the size that may blend your template.

Tall, small, Medium Respectively:

   


6.  If you want the button to appear below blog posts then add the button code just below <data:post.body>
    7. Save your template to see it working. Have fun! :>
It will appear like this in search results,

Alternative Method

To add the +1 button to your blog directly without any code then 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, then you don't need to worry as the +1 button will automatically show up as a new share button.

Read more: DragonHackers Blogspot | Tutorial Blogger | Tutorial Internet | Tutorial Computer http://dragonhackthis.blogspot.com/ Under Creative Commons License: Attribution

<div align="justify"><img align="right" alt="ADD GOOLE +1 BUTTON" height="73" src="http://lh4.ggpht.com/-AQTcP4oypG4/Ted7JlYW_DI/AAAAAAAADq4/1RG7jnC2Oys/image%25255B59%25255D.png?imgmax=800" style="display: inline; float: right;" title="ADD GOOLE +1 BUTTON" width="231" /><a href="http://buzz.blogger.com/2011/06/add-1-button-to-your-blog.html" target="_blank">Google released recently</a> there +1 Button that will show publicly what you like, agree with, or recommend on the web. When you +1 an article or tutorial, your name will appear under that article when that article appears in search results. You can also find out what articles your friends read and liked. This according to Google is aimed to make Google Search results more relevant and useful. For Bloggers like you, I am sure this is another great tool to increase the PR, relevancy and importance of your blog. According to me, <span style="color: green;"><strong>the more +1'd this you receive the chances for your blog's PR to improve will increase also</strong></span> because the PageRank algorithm is linked to all activities that takes place in your blog. The video below will demonstrate better,</div><div align="justify"><br /> </div><div align="justify"></div><a name='more'></a><br /> <a href="" name="more"></a> <h3>How to add the +1 Button to Blogger?</h3><ol><li>Go To Blogger > Design > Edit HTML </li> <li>Backup your template </li> <li>Search for <strong><em></head></em></strong> </li> <li>Paste the code below just above </head> </li> </ol><blockquote> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"> {lang: 'en-US'} </script><br /> </blockquote>     5.  Now Check the "<em>Expand Widgets Templates</em>" Box at the top right corner. In order to place the button just below Post titles then search for this code <strong><em><data:post.body></em></strong>  and place the +1 button code given below just above it,<br /> <blockquote> <div style='float:<strong>left'</strong>><br /> <g:plusone size="<strong><span style="color: green;">standard</span></strong>" expr:href="data:post.url"/><br /> </div><br /> </blockquote><ul><li>You can display it to "left" and "right" by adjusting <strong>left</strong> </li> <li>You can change <span style="color: green;"><strong>standard</strong></span> to medium, small or tall. Choose the size that may blend your template. </li> </ul>Tall, small, Medium Respectively:<br /> <img align="left" alt="image" height="80" src="http://lh6.ggpht.com/-roh6R7K3Z4c/Ted7KHqSbRI/AAAAAAAADq8/Ls00axZrMBc/image%25255B47%25255D.png?imgmax=800" style="display: inline; float: left;" title="image" width="73" /><br /> <div align="center"><br /> </div><img align="left" alt="image" height="34" src="http://lh5.ggpht.com/-EfctxqF2BBo/Ted7K3BGyMI/AAAAAAAADrA/V65_LtrmeIU/image%25255B41%25255D.png?imgmax=800" style="display: inline; float: left;" title="image" width="52" /><br /> <img align="left" alt="image" height="47" src="http://lh6.ggpht.com/-uAgqb0eAkpY/Ted7LTf5KoI/AAAAAAAADrE/2hYJWMj_hHs/image%25255B45%25255D.png?imgmax=800" style="display: inline; float: left; margin: 0px;" title="image" width="75" /><br />     <br /> <br /> <br /> 6.  If you want the button to appear below blog posts then add the button code just below <strong><em><data:post.body></em></strong><br /> <strong><em>    </em></strong>7. Save your template to see it working. Have fun! :><br /> It will appear like this in search results,<br /> <img alt="+1'd this" height="97" src="http://1.bp.blogspot.com/-MMXil56N3Pc/TeZyHNSYifI/AAAAAAAAAdY/YsT_--6X9lA/s400/SearchResultPlusOne.jpg" title="+1'd this" width="400" /><br /> <h3>Alternative Method</h3><div align="justify">To add the +1 button to your blog directly without any code then you’ll need to <a href="http://buzz.blogger.com/2010/06/new-share-buttons.html" target="_blank">enable Share buttons on Blogger</a>. To do this, go to <b>Design > Page Elements</b> on your Blogger dashboard, find the <b>Blog posts</b> area, click on <b>Edit</b>, and select the “<b>Show Share Buttons</b>” option. If you are already using Share buttons, then you don't need to worry as the +1 button will automatically show up as a new share button.</div><img alt="Add the +1 button to blogger" height="356" src="http://2.bp.blogspot.com/-ZD5XWGYTb-Y/TeZyB5w_XEI/AAAAAAAAAdU/AC4o9KId85w/s400/ConfigureGadget.jpg" style="display: block; float: none; margin-left: auto; margin-right: auto;" title="Add the +1 button to blogger" width="400" /><br /> <table border="0"><tbody> <tr><td style="padding-top: 10px;"> </td> <td> <a class="google-buzz-button" data-button-style="small-count" href="http://www.google.com/buzz/post" style="text-decoration: none;" title="Post to Google Buzz"><span class="buzz-counter-long" dir="ltr" id="buzz-43791685"></span></a></td></tr> </tbody></table> <br/> Sumber: <a href='http://dragonhackthis.blogspot.com/2011/06/add-google-1-button-to-your-blogger.html'> Dragon Hack </a>