How To: Add Google Buzz Button To Blogger Blog

Google Buzz


Google Buzz has become very popular these days and many people are using it. As a result many bloggers have started using Google Buzz buttons on their blogs. Adding a Google Buzz sharing button to blogger blog isn't that tough.



To add Google Buzz button to your blogspot blog, first visit the Layout section of the blog on which you want the Google Buzz button. Then click on Edit HTML and select the Expand Widget Templates option.

Now we can add two types of buttons, compact and normal size.

Google BuzzGoogle Buzz


If you want to add a compact button, then search for <div class='post-header-line-1'/> in the template and add the following code just below it

<!-- Buzz Start  -->

<style>
a#buzzb { background-image:url(http://i46.tinypic.com/10n9kq9.png); width:89px; height:24px; display:block; float:right; }
a#buzzb span { display:none; }
a#buzzb:hover { background-image:url(http://i50.tinypic.com/2pqnwg3.png); float:right; }
</style>

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcTitle=&quot; + data:blog.title' id='buzzb' target='_blank'><span>B</span></a>

<!-- Buzz End -->


That's it, now click on save template and check the blog. I have added float:right; to the above code. So if you don't want the buzz button to be on the right side then just remove float:right; from the above code.

If you want to add the normal button to your blog, search for following code in the template
data:post.title and paste the following code above it.

<!-- Buzz Start -->

<style>
a#buzzb { background-image:url(http://i46.tinypic.com/2nm2jid.png); width:58px; height:72px; display:block; float:right; }
a#buzzb span { display:none; }
a#buzzb:hover { background-image:url(http://i46.tinypic.com/v8lijk.png); float:right; }
</style>

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcTitle=&quot; + data:blog.title' id='buzzb' target='_blank'><span>B</span></a>

<!-- Buzz End -->


That's it, now the Google Buzz button has been added to your blog. If you loved this post then please share it with your friends and dont forget to follow us on Google Buzz

0 comments: