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?
- Go To Blogger > Design > Edit HTML
- Backup your template
- Search for </head>
- 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.
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! :>
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.
If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »
Mohammad
6/04/2011
Widgets
I've been ignoring Google's +1 ever since i heard it, but this post made me to integrate it to my site.... Thanks for the post and widget Mohammad.
ReplyDeleteWell, I wish to thank "SamSexy98" too because he gave me the idea to merge the two widgets...
@Vamsi
ReplyDeleteI see that you have already integrated it successfully. I did exactly the same thing which you have done but I am having some alignment issues. It just not getting fit in my current template.
Thanks for this trick. Though, after implementing it; That is adding the +1 button below my posts title. I couldn't trace the button, what could be the problem? Why can't I place the button just like I did add Facebook Like and Send Button To my Blogger Blogs?
ReplyDelete@Vamsi
ReplyDeleteI thank you for that. :>
@Felix
Dude kindly add it just after your Facebook send button code. Let me know if it worked.
@samsexy98
ReplyDeleteTell me how to post code with tags here. I've got it worked :D
yup, now my page has 5 buttons, with +1 button on far right
Have a look:
ReplyDeletehttp://rumiiqbalandme.blogspot.com/
@rIZ
ReplyDeleteDo u mean the whole code stuff like Mohammad did. If yes then you cannot post. Only Mohammad can post such things as he is admin. If you try to post you will get error and after trying multiple times blogger will consider you as spammer.
And I looked at your site and yea yours looks fine but look at the gap between like button and new +1 button. That doesn't looks good to me :(
Hello Mohammad,
ReplyDeleteanother master one bro..
thanks for your regular update and i am eagerly waiting for that sliding facebook widget.
@bhavesh
ReplyDeleteThe button is not showing up because you didn't add the +1 button code above </head> i.e
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"> {lang: 'en-US'} </script>
And sorry for the inconvenience. The Javascript for digg code was not encoded So I have emailed you the correct code.
@rIZ
To add HTML to Blogger Comment Form, you will need to encode the code. You can do that using this tool -> MBT Encoder
@Jeet
Always welcomed bro! :>
@Mohammad
ReplyDeleteLook at my demo blog. Looks pretty bad. I have already done this before asking you. Looking for a solution.
Btw do we have the power to post the full codes like you post.
@sam
ReplyDeleteI emailed you the code. Did you check it? I am using the same on this demo blog and it looks just fine -> http://bloggertricks-testblog.blogspot.com/2009/10/this-is-how-peacful-land-turned-into.html
You can change the button size to small for better visibility.
Yes sure you can post codes using the Encoder tool
@Dav
ReplyDeleteThanks pal for the share. :>
@Mohammad
ReplyDeleteYup buddy I have used the same code which you have mailed me and it doesn't looks good.
Wait I will send you my demo blog template. Check it out.
@ Mohmd, I did as you instructed but it didn't work. Pl do try an find a solution. Thanks
ReplyDelete@Sam
ReplyDeleteOk send it I am waiting. Do you like how it appears here? -> http://bloggertricks-testblog.blogspot.com/2009/10/this-is-how-peacful-land-turned-into.html
@Felix
Its the most simplest tutorial friend. Where exactly are you facing problem. did you pasted it below data:post.body ?
@ Mohmd, I noticed in your instruction that you did'nt specify after adding the script above head, that I should save then check and cont.....hence, my confusion. Otherwise, all is well. Thanks. Keep up the good job.
ReplyDeleteMBT always brings something awesome to list. I'll soon add this button to my blogger page. Thank you
ReplyDelete@Riz
ReplyDeletegreat work bro! You will surely develop the skills soon. More power :>
@Felix
Oh I see pal. Glad it finally worked for you and if still needed help I am always at your service. :>
@NRUPEN|DEVIL'S BLOG ON SECURITY
I thank you for your kindness brother. :)
@Wamiq
Looks nice there. good job bro! =)
@Mohd
ReplyDeleteI have already sent you the demo template which is same as my original one. And Sorry for late reply. I was not available for some days due to some health issues yet again.
bro. how to align the sharing button in one line like in your blog? at the top of the post? i just cant align the buttons to make it straight
ReplyDeletethats cute dude :) keep it up :D
ReplyDeleteHallo frnd i want to integrate g+1 at top of the blog.pls mail me @ prasanth.be.eee@gmail.com
ReplyDeleteHI there,
ReplyDeleteCan you please provide me the code share buttons below your posts and your email subscription box code????
bro. i like your current google +1 widget at the right side. can you make it tutorial for that? please bro. thanks a lot.
ReplyDeleteSimple and great thanks for the post :)
ReplyDelete