How to Integrate "Digg this" button to blogger blog

In this tutorial I will show you "how to integrate "digg this" button to your blogger blog and how to wrap "digg this" button around and inline beside Blogger post content. This will be good part of your blog design.

I think you know Digg, Why you need to install Digg button to your blog? This is the quote from the Digg:

The Digg This button is for website and blog publishers that want to encourage their audience to submit or digg their content on Digg. Join thousands of sites that have already added Digg This and seen their content exposed to the Digg community.

We've given our latest Digg This button a brain - it's smart enough to:

• Encourage users to submit new content from your site to Digg. We'll detect if the content exists already and provide either a Submit or Digging interface
• Display the real-time Digg count for content already on Digg
• Support News, Video, or Podcast content.
• Be backward compatible with the last version of our Digg This button

So, you can get some (or , maybe, big) traffic from Digg.

This is how it will look like:

It is hard to install this button to your blog and make it wrap around and inline beside post content, so, I will tell you how to do it:

1. Go to Blogger Dashboard.

2. Go to Layouts and click on Edit Html subtab of Template tab.

3. Backup your template to PC.

4. Then put a check in Expand Widgets Template box at top of Edit Template text box and scroll down to the blog posts widget body to this line :

<p><data:post.body/></p> or <data:post.body/>

5. Append the following lines of code into the template BEFORE the line of <data:post.body/> located above:

<div id='digg'><script type='text/javascript'>
digg_url = &#39;<data:post.url/>&#39;;
digg_title = &#39;<data:post.title/>&#39;;
digg_window = &#39;new&#39;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/></div>

6. Now you need to create CSS style for Digg this button. Find this line:

]]></b:skin>

7. If you want to have digg button on the left side of post, append the following lines of code into the template BEFORE the line of ]]></b:skin> located above:

#digg {
float: left;
margin-right: 5px;
}

If you want to have digg button on the right side of post, append the following lines of code into the template BEFORE the line of ]]></b:skin> located above:

#digg {
float: right;
margin-left: 5px;
}

8. Save your template.

That's all =) Cheers