How to add Digg Button in the blogger blog posts

 

When i created my site, i was very worried, how to add the digg button in the blogger posts(alligned at my wish). So, i went through all the methods but all were not working. then i worked a night and solved this problem.

Then i thought to share that with my friends and visitors So, if you want to add digg button in your blogger posts, its really good, go on.

Digg helps you to increase your traffic to your blog and site.

 Note: First of all backup your template(If Confident then do).

To Add Digg Button in blogger, just follow these steps:

• 1. Log into your blogger account
• 2. In your dashboard click layout
• 3. In the layout click Edit Html in the tab bar
• 4. Then click Expand Widget Templates.You may need to backup you template
• 5. In your template Use CTRL + F to open search,( many people don't know this).Search for this code

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

Due to template differences,you may not find above code, then search for this

<data:post.body/>

• 6(a). If you want to add Digg Button on the right side of every post, Paste this on the line directly before it:
  

<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url="<data:post.url/>";
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<p><data:post.body/></p>

Results Like that:


Save your template.The digg button will then be located on right as shown in the figure. Good Luck!

• 6.(b) If you want to add Digg Button on the left side of every post, Paste this on the line directly before it:

<div style='float:left; margin-right:10px'>
<script type='text/javascript'>
digg_url="<data:post.url/>";
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<p><data:post.body/></p>

Results Like that:


Save your template.The digg button will then be located on left as shown in the figure. Good Luck!

• 6.(c) If you want to add Digg Button on the left side/right side in the end of every post, Paste this on the line directly after it:

<p><data:post.body/></p>
<div style='float:left; margin-right:10px'>
<script type='text/javascript'>
digg_url="<data:post.url/>";
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>

The Result will be the same but Digg Button will only be shown in end of every post.

• Now try the following codes to have different buttons

<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url="<data:post.url/>";
digg_skin="compact";
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<p><data:post.body/></p>

<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url="<data:post.url/>";
digg_bgcolor="#BDEDFF";
digg_skin="compact";
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<p><data:post.body/></p>

Note: In the Above Code You can change the background color on your choice maching your site's look.(THE TEXT IN THE BLUE COLOR).

• Button for selective posts

The methods of manually adding a Digg button to selective posts are rather tedious and complicated. The problem is that Blogger does not allow you to simply insert a JavaScript into a blog post. Since this blog is targeted at the majority of us who are not computer experts, I shall suggest a method that I think is simple enough for us.

First, go to the Digg tools site to select a Digg button that you like. You will see a wide selection of Digg buttons.







Take note of the image URL. For example, the image URL of this button is

http://digg.com/img/badges/91x17-digg-button.gif

Write a post and publish it. Next, refresh the page and click on the title of your post. This will bring you to the post page. Take note of the new URL of your story. Insert it into the orange portion of this HTML code. If you want a different image, insert the image URL into the blue portion of the code.

<a href="http://digg.com/submit?phase=2&url=URLofyourstory" target="_blank">
<img border="0" alt="Digg my article" src="http://digg.com/img/badges/91x17-digg-button.gif"/></a>

Now, go back to your article and Edit it. Choose the “Edit HTML” mode and not “Compose” mode. Copy the above code and paste it into whichever part of your blog article. “Preview” it, and if you are happy with it, “Publish” it.

• If You Have any Question or Problems Regarding Digg Button. Just comment here i will help you.