How To: Add Google Buzz Button To Blogger Blog

Monday, February 22, 2010 | View Comments

-----------------------------------Share This Article!

--


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

Share!

Enjoy the article so far? Recommend it to your friends and peers.


Subscribe! (free)

Be the first to our articles and get latest updates on freebies.



Rahul Jadhav

Author:

Rahul Jadhav is the author of Cool Tricks N Tips and he loves blogging and social networking. You can connect with Rahul on Twitter @rahuljrark , Facebook and also on Google+

blog comments powered by Disqus
 

About Me

Rahul Jadhav
Hi Friends, I am Rahul Jadhav, the author of this blog. The sole purpose of starting Cool Tricks N Tips was to provide other bloggers with cool resources to create a better Blogger blog and also to share with them other awesome stuff from the internet.

Cool Tricks N Tips Copyright © 2009