How To Add Google Buzz Buttons To Blogger ?

First it was Facebook, then Twitter and now it is Google Buzz. Being a blogger, you don't have to worry on who's copying whom! All these websites let their users interact more easily and for webmasters, it means free traffic with minimum efforts. So, keep all your options open as you never know which of them may bring a big wave of traffic to your blog!

Now talking about G-Buzz, although Google has not yet provided any official "Buzz It!" buttons, but it does allow you to synchronize your blog-feed with the Buzz, so that all your posts are directly sent to your Buzz account. Simply add your blog to the connected sites list...

Here's how you can add these buttons to your blog:

STEP #1

Log in to Blogger, go to Layout -> Edit HTML

and mark the tick box "Expand Widget Templates"

Now, find this code in the template:

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

STEP #2
And immediately Below/After it, paste this code:

<!--BUZZ-STARTS--><br /> <a expr:href='&quot;http://www.google.com/reader/link?url=&quot; data:post.url &quot;&amp;title=&quot; data:post.title "&amp;srcTitle=" data:blog.title' target='_blank'><div style='border:0px !important;text-align:right;margin-top:-42px;'><img alt='Buzz It' src='http://i46.tinypic.com/121wg9e.jpg'/></div></a><br /> <!--BUZZ-STOPS-http://bloggerstop.net-->

It will display a small Buzz It! button like this:

Or, paste this code:

<!--BUZZ-STARTS--><br /> <a expr:href='&quot;http://www.google.com/reader/link?url=&quot; data:post.url &quot;&amp;title=&quot; data:post.title "&amp;srcTitle=" data:blog.title' target='_blank'><div style='border:0px !important;text-align:right;margin-top:-42px;'><img alt='Buzz It' src='http://i47.tinypic.com/2j0b02c.jpg'/></div></a><br /> <!--BUZZ-STOPS-http://bloggerstop.net-->

It will display a larger Buzz It! button like this one:

Note: By default, the alignment of these buttons is kept to "Right", you may change it to "Left" too. To change the position of the button, change the value -45 pixels (in margin-top:-42px;).

STEP #3

Save the template and let the Buzzer Buzzzzzzz...

Update:

A new javascript based code is there to display these G-Buzz buttons; wherein if the readers select any part of the post before hitting the "Buzz This" button, then the selected text (and images too) will also appear in their G-buzz updates.

Here's the new code:

<a href='javascript:var%20b=document.body;var%20GR________bookmarklet_domain=&quot;http://www.google.com&quot;;if(b&amp;&amp;!document.xmlVersion){void(z=document.createElement(&quot;script&quot;));void(z.src=&quot;http://www.google.com/reader/ui/link-bookmarklet.js&quot;);void(b.appendChild(z));}else{}' title='Buzz It!'><div style='border:0px !important;text-align:right;margin-top:-42px;'><img alt='Buzz It' src='http://i47.tinypic.com/2j0b02c.jpg'/></div></a>

Note: Use this code, instead of the one from STEP #2, if you want those additional benefits. The above code will display the larger icon by default, change the image-url to show the smaller icon.

Hey! My friends, If you like my post you can save it using "Save Page as PDF" button below and you can even share them to your friends with social networking buttons provided below this post.