.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 will prefer 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 nice 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.
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. If you have changed code 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.
You can change the position of button. Right…
<div style=’float:right;padding:5px;’>
