Google Buzz button for Blogger blog

Dear friends, today I am telling you a technic to show Google Buzz Share Button in your blogger.com blog. Now a days Google Buzz is growing popularity more and more as a social tool. Most of us has been activated Buzz in Gmail. We are sharing our thoughts, weblinks, pictures as buzz. Google make this as a alternative of Facebook and Twitter and I thought they are success. We visit websites and found many good article. We share them through 'Stumble', 'Digg', etc. You may notice that some webmaster use a buzz button in every post. In Blogger.com blog there is no any default option to use buzz button in every blogpost. We will create this by ourself.

Adding a buzz button in every blog post is very easy. Just add the codes below in your bogs HTML page.

• Log in Blogger.com
• Go to Layout > Edit HTML
• Tick on "Expand Widget Templates" with your left mouse button.
  
• Search <div class='post-header-line-1'/> and add the code just after this line.
• or
• search for <data:post.body/> and paste the codes just before this line.

First of all we will add a plain buzz button in every blog posts like the image above.

<div style="float:right;padding:4px;">
<a expr:href='&quot;http://www.google.com/buzz/post/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcTitle=&quot; + data:blog.title+ &quot;&amp;srcURL=&quot; + data:blog.homepageUrl ' rel='nofolloW' style='text-decoration:none;' target='_blank'>
<img alt='Buzz It' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijSZFLS0pJYJMBifxFhBKrFATnwJFEU6KksfiWh6wN3qS8BGUDuhoND2MEPDyPGScCRInyz8QWAkTC9liHRrgj5GunR0uRO6DskiOMW72FzXKmECm0kbLrEwxLyAxtlPGABUgYdqs83BQ/s320/googlebuzz.gif' style='border:0px;'/></a>
</div>

Now we will add Buzz button with counter. With this button you can know how many times this post has been shared with your blog readers.

<div style="float:right;padding:4px;">
<a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count" data-locale="en_IN" rel="nofollow" expr:data-url='data:post.url'></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
</div>

This code will show a image like below.

If you think that this image is quite bigger then try some other method. You may notice that I have marked "normal-count' words in bold and red color. This is the code which can be changed for smaller Buzz share button. Change that words with "small-count".

If you want to styles like the images below then use this code:

<div style="float:right;padding:4px;"> <script type='text/javascript'> njuice_buzz_url = '<data:post.title/>'; njuice_buzz_title = '<data:post.url/>'; njuice_buzz_share = 'reader'; njuice_buzz_size = 'small'; </script> <script type='text/javascript' src='http://button.njuice.com/buzz.js'/> </div>

Change the red color bold word "Small" with 'simple' for a different style.
If you don't want to use third party codes in your blog then why not try Google Buzz's official buttons from this page.

There are many options and a large variety of buttons waiting for your use. Make a choice through the options and grab the code to paste in your blog. But wait, their deliverd code is not for Blogger blog. You need to add some more code to use Google official Buzz buttons into your blogger.com blog.

Make your desired Buzz button from Google official page and add the code like the code below.

<div style="float:right;padding:4px;">
Your collected code goes here
</div>

Paste the codes into "Your collected code goes here" area and save the changes.