TechFlaps | Waves of Technology

You might have seen in a lot of blogs with the Digg button which is used to submit a post or a content which you feel useful to others. Clicking on this button will take you to digg.com, where you can submit the story and will be published to much larger audience.

This button will also help to get you more visitors and readers to your blog as the story submitted in Digg is open to a larger community. Lot of peoples goes to digg to search for the contents of their interest. This is much more more helpful than searching in a single website as digg carries contents submitted by people from the whole world, collected from websites through out the net.

To submit a story in Digg.com you need to register there and is totally free. Click here to register free at digg.com.

Here I will tell you about how to add a Digg button to your posts, which will allow the readers to digg the story. This works almost same as delicious submissions.First you have to decide where you want the digg button to appear. Whether you want after the post, or at the beginning of the post like that.

In this article we will see how to add a Digg button in your blog posts, which will appear at the top right corner of your blog post content.

ADD DIGG BUTTON TO YOUR BLOG POSTS

1. Go to Blogger Home
2. Select the Blog
3. Go to Layout >> Edit HTML [When you click on Layout, by default Blogger will take you to the Page Elements ]
4. Make sure that you download the current template and copy it in your local system. You will be able to revert back to the original template if something wierd happens.
5. Make sure that you have selected the Expand Widget Templates check box. This appears above the top right corner of the HTML Editor.
6. Now Search for this line of code
   
   1. Normally in almost all the templates you will be able to find this piece of code.
      
      <div class='post-body entry-content'>
      <data:post.body/>
      <div style='clear: both;'/>
      </div>
      
      
   2. If you can't find this whole piece of code search for this piece of code
      
      <data:post.body/>


7. Now copy the code exactly as given below
   
   <div style="float:right; margin: 3px 3px;">
   <script type='text/javascript'>
   digg_url = "<data:post.url/>";
   </script>
   <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
   </div>
8. And paste it above the line : <data:post.body/>
9. Now your code should appear like given below.
   
   • If you followed STEP 6.1, then the resulting code will be
     
     <div class='post-body entry-content'>
     <div style="float:right; margin: 3px 3px;">
     <script type='text/javascript'>
     digg_url = "<data:post.url/>";
     </script>
     <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
     </div>
     <data:post.body/>
     <div style='clear: both;'/>
     </div>
     
   • If you followed STEP 6.2, then the resulting code will be
     
     <div style="float:right; margin: 3px 3px;">
     <script type='text/javascript'>
     digg_url = "<data:post.url/>";
     </script>
     <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
     </div>
     <data:post.body/>
     


10. Save your Template. Click on the Save Template button at the bottom right corner of the HTML Editor
11. The digg button as the one that is shown in the left side of each of the posts in my blog will be shown at the top of each post (after the heading) in your blog!

"Thank You!!! You’ve reached the end of this post. Seeing you made it this far, we hope you enjoyed this post. If so, please consider leaving a comment or subscribing to the feed to have further articles deliverd to your feed reader. You can also follow me on Twitter."