Add Yahoo! Buzz Button in Blogger Template

Someone has asked Kang Rohman "How To Add Yahoo! Buzz Button in Blogger?" In this tutorial, I would like to try explaining how we can add Yahoo Buzz Button in blogger. And I hope that it will be useful for others.
What is the advantage of adding Yahoo! Buzz Button in blog? The advantage is to ease the blog owner or blog visitors to submit the article they think interesting into Yahoo! buzz. More articles which are submitted to Yahoo Buzz, More frequent your articles shown on the yahoo! buzz front page. and of course, it would make your blog have much traffic afterwards.
If you are interested in adding Yahoo! Buzz Button in your blog, just read the following tricks.

First, please choose the form of yahoo! Buzz button you like in this page. Match your choice with tour template design; click Get Code next to the button you like, click Select Code, copy the code and paste into notepad or other text editors. Save in your computer. Code will be used and added in blogger template.



Second, in yahoo buzz code, there is a code you must change. For example, I have chosen square yahoo! buzz button, and the following is the code of yahoo buzz button I got.

<script type="text/javascript" src="http://d.yimg.com/ds/badge2.js" badgetype="square">ARTICLEURL</script>

Change ARTICLEURL with the code <data: post.url/>, so the code will look like below;

<script type="text/javascript" src="http://d.yimg.com/ds/badge2.js" badgetype="square"><data:post.url/></script>

In order to make it beautiful when it is added into blog, add a few codes so the code will look like below;

<div style='float:right;padding:5px;'><script badgetype='square' src='http://d.yimg.com/ds/badge2.js' type='text/javascript'><data:post.url/></script></div>

Now, yahoo! buzz code is ready to add in your template and below are the step;

1. Log in into blogger with your ID...
2. Click Layout
3. Click Edit HTML tab
4. Click "Download full template" and please back up them first. (important).
5. Give a mark next Expand Widget Templates
   
6. Find this code:

   <div class='post-body entry-content'>
   <data: post.body/>
   <div style='clear: both;'/> <!-- clear for photos floats -->
   </div>
   

   Or, sometimes looks like below:
   

   <div class='post-body entry-content'>
   <p><data:post.body/></p>
   <div style='clear: both;'/> <!-- clear for photos floats -->
   </div>
   

7. Add yahoo! buzz code like this:
   

   <div class='post-body entry-content'>
   <div style='float:right;padding:5px;'><script badgetype='square' src='http://d.yimg.com/ds/badge2.js' type='text/javascript'><data:post.url/></script></div>
   <data:post.body/>
   <div style='clear: both ;'/> <! -- clear for photos floats -->
   </div>
   

8. Click Save template button.
   
9. Finish and See the result.
   

The steps above are for those who haven't modified their template with Read More facility. How about if the code is change with read more, like my post here? Well, you can change it like below;

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p>
<div style='float:right;padding:5px;'><script badgetype='square' src='http://d.yimg.com/ds/badge2.js' type='text/javascript'><data:post.url/></script></div>
<data:post.body/>
</p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p>
<div style='float:right;padding:5px;'><script badgetype='square' src='http://d.yimg.com/ds/badge2.js' type='text/javascript'><data:post.url/></script></div>
<data:post.body/>
</p>
<a expr:href='data:post.url'><b>Read More...</b></a>
</b:if>

Save the template and finish.

As an addition, in the yahoo! buzz code above, there is a code like this;
<div style='float:right;padding:5px;'>
This code can be changed if you are familiar with CSS, for example;
float:right
The placement of the code above will make the yahoo buzz located on the right side, if you want to place the yahoo buzz on the left, then the code will be like below;
float:left

Well… do you want to see the examples? Just click here!
That' all, have a nice try and happy blogging!!!