Add Google Buzz Buttons To Blogger/BlogSpot Blogs

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.

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-->

<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>


<!--BUZZ-STOPS-http://infobitez.blogspot.com/-->

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

Or, paste this code:

<!--BUZZ-STARTS-->

<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>


<!--BUZZ-STOPS-http://infobitez.blogspot.com/-->

to 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...

A new javascript based code 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>

PS: 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.