Thursday, October 2, 2008

Add Digg Button at Six major places in blogger

Add digg button blogger blogspot.com blog
Adding Digg button to BlogSpot sites is already discussed in many blogger help sites and forums. But still I’m thinking there is something left to discuss to me regarding the above topic. Actually many bogger helpers discussed only placing the digg button around the page body (content) , Still I couldn’t find a source for placing digg button ambient the post title. So I though to write full detailed “Adding digg button to a blogger site” articles besides just writing only placing digg button around the post title. As I figure out the most impressive place for adding digg button is near the post title. Because it is more visible to site visitors if it there, thus there is more chance to getting diggs for your stories.

Before begin with this fully covered article you should have registered with digg.com other than you can’t digg your articles first. :)

Through out this post I’ll discuss about placing Digg button in 6 major places with small alternatives of its main code snippet. Actually this is not a hard process for implement. We are doing only small alternative for the code as said prior sentence and placing the big code in 3 different places in template file until we encounter the most suitable and preferred place to display a digg button in our site.

For going through this post I should have chosen any good colored and vivid digg button, so I have decided to choose Big Yellow color digg button for purpose of demonstrate the guidance I have discussed here.

There are many reasons for choosing Big Yellow color digg button. Mainly it is the most popular digg button among the digg community and many SEO experts and traffic builders are highly recommend this button for up your site posts to front page of digg site.

My opinion is about our Big yellow friend is, it’s adding extra beauty to our sites and other thing is this would be help for getting more diggs other than using unpopular digg structure. Because peoples are who used digg now more desire to digg through this button and it is powerful enough for catching human’s eyes instantly.

Placing digg button is (Yellow button) simply. It’s just a java snippet that can place on a site. Let’s take a look at brief details about placing digg button on a site and about changes we need to do to the code for make it compatible to use on blogger platform. As we know placing Java codes between the posts in blogger can’t implement the code task at all. So instead of placing code in blogger post we are going to edit xml file of your template.


Placing Digg Button left to the post title:

Digg button left post title

For place digg button left to post title is more powerful than placing it any other area. So I’m starting with revealing details about placing digg in that area.

1) First go to your blogger account and then click on “Layout tab”

layout tab

2) And then click on “Edit HTML” tab in new page.

Edit HTML tab

Now we are on the Template editing page and we need to backup our exciting template for avoiding any mistakes that can happen in template editing, this step is crucial, whenever you editing your template it’s good to remind for backup it first.

Edit template blogger site

3) Then check the Expand Widget Templates box as I showed in the above picture and find the code :

<b:if cond='data:post.link'>

4) And place the digg code right upper of the code we searched.

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

5) After placing it should looked as below

digg code placed

Here is the brief description about the main parts of the code, after know the exact details you can modified the code and place it more places than I discussed here.

2 main part

The part of “float:left” is implementing the direction of the button, either right or left is defined by this. And the part of “margin-right:10px;” define the size of button margin. In here I have set it to 10, if you prefer you can change it for more desired value.


Placing Digg Button right to the post title:

Digg button Right to post title

Now this should be very easy if you read my prior explanation and understood it carefully. For place the digg button at the right of the post title is can implement by changing the “float:left” to “float:right” . This will define the direction of the button to right side of the topic.

Also at this point you should define the margin of the button and the direction of margin. Change the “margin-right:10px” to “margin-left:10px” and your are done.

Now first part of your code should something like this.
“ <div style='float:right; margin-left:10px;'> "


Placing Digg Button left below between post title and content:

I have seen many blogger help articles already discussed about this and covered full details but if I’m not writing even small part about the process of implementing this it would be deficiency.

First you need to find the code “<div class='post-body'> “ and place the code

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

right upper to it.

Now it should looks like this.

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


Placing Digg Button right below between post title and content:

Now might I don’t want to discussed about this here. But I’ll place the code for peoples who are very beginners for blogger and coding.

This can implement by change the first line of above coding and place the full code at same position without change anything other than firs line.

Find the “ <div class='post-body'> “ ( might you have already find this ) and place the code

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

right upper of it (as above explanation).


Placing Digg Button right end of the content:

May be you need to place digg button end of your ever post this is also very succeed place for getting more diggs because every person who read your articles throughout may seen your big yellow button and can digg your story if it more interesting.

First you need to find the code

<div style='clear: both;'/>
</div>

And place our popular digg code right below of it. After you place it should looked something like below.

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


Placing Digg Button left end of the content:

Now this should be so very easy and if you read and understood every point of my articles. There’s nothing to discussed, so here is the code for that.

<div style='clear: both;'/>
</div>

(Search the above code and place the below digg script after it)

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

Still I haven’t seen this any article that goes beneath about placing digg icon on blogger page and far this is the easiest and for place a digg button on your BlogSpot site. Even though only placing digg button not enough as there are many popular social sites came around. I though to discussed about all other social bookmarking site trough another day form another post. Until that comment your thoughts and may better tricks that you know than I have discussed here. Happy commenting ...
.

11 comments:

Duncan said...

very useful information and you have categorize it nicely thank you

moneytalks365days said...
This comment has been removed by a blog administrator.
restlup said...

Good post hope it will help me for build some traffic.

EverybodyGeek said...

Be warned! Adding digg buttons to your blog makes your blog load very slow!
My advice is, don't use digg buttons...

PatzZ (Admin - TN) said...

you are right EveryBodyGeek it can seen little bit increment of loading time using the Digg button,, if we compared it with the ability of building traffic through digg then it's equal use it on a site. But anymore this site haven't Digg Buttons, our domain is banned without prior reason or explanation just BANNED.

Instead of digg I hope you all will vote us on stumble, reddit and yahoo buzz Thanks for your cooperation.

Ravi said...

latest tips and tricks collection at enews18.co.cc
<a href="http://etricks18.blogspot.com>http://etricks18.blogspot.com</a>

mbt uomo casual said...

your shoes soft, supple, and comfortable. With appropriate care, leather-based shoes will much

mbt said...

leather-based shoes which severely really feel severely difficult concerning the within of and

mbt delle donne said...

favor it. Patent leather-based has an severely glossy severely really feel and appearance.

tiffany said...

favor it. Patent leather-based has an severely glossy severely really feel and appearance.

download movies said...

favor it. Patent leather-based has an severely glossy severely really feel and appearance.

Post a Comment