Social Bookmarking Widget for Blogger

On all Blogger's mind there will be just one question , How to drive traffic to our blog ? We need to have quality content and backlinks to drive traffic to our blog and occupy first place on google search engines. First one Quality content is in hands of the admin who writes the post. he need to put the main keywords for the article in the post . But for the second one , the author can't just submit each and every post to bookmarking sites . Its very time consuming. But It's a very effective way of driving traffic to our blog. We need a widget for blogger so that visitors/readers can submit our article to bookmarking sites like digg , technorati , del.ico.us , stumble upon , etc



Here is the code for social bookmarking widget for blogger :

First we need to add the following css code to our blogger template in css section ,

.social_network {
float: left;
width: 540px;
}

.social_icon {
float: left;
width: 540px;
}

.delicious {
margin: 0px;
padding: 0px;
float: left;
text-align: center;
}

.digg {
margin: 0px;
padding: 0px;
float: left;
text-align: center;
}

.stumble {
margin: 0px;
padding: 0px;
float: left;
text-align: center;
}

.technorati {
margin: 0px;
padding-left: 20px;
float: left;
text-align: center;
}

.delicious a:link, .delicious a:visited {
margin: 0px;
padding-top: 60px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
float: left;
display: block;
width: 80px;font-weight:bold;
}

.delicious a:hover, .delicious a:active {
margin: 0px;
padding-top: 60px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
float: left;
display: block;
background-image: url(http://wiigames2dl.googlepages.com/yummy.gif);
background-repeat: no-repeat;
background-position: center top;
color: #0099FF;
font-weight: bold;

}

.digg a:link, .digg a:visited {

margin: 0px;
padding-top: 60px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
float: left;
display: block;
width: 80px;font-weight: bold;
}


.digg a:hover, .digg a:active {
margin: 0px;
padding-top: 60px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
float: left;
display: block;
background-image: url(http://wiigames2dl.googlepages.com/digg.gif);
background-repeat: no-repeat;
background-position: center top;
color: #CCCC99;
font-weight: bold;
}


.stumble a:link, .stumble a:visited {
margin: 0px;
padding-top: 60px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
float: left;
display: block;
width: 80px;font-weight: bold;
}


.stumble a:hover, .stumble a:active {
margin: 0px;
padding-top: 60px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
float: left;
display: block;
background-image: url(http://wiigames2dl.googlepages.com/found.gif);
background-repeat: no-repeat;
background-position: center top;
color: #3366FF;
font-weight: bold;
}

.technorati a:link, .technorati a:visited {



margin: 0px;
padding-top: 60px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
float: left;
display: block;
width: 80px;font-weight: bold;
}


.technorati a:hover, .technorati a:active {
margin: 0px;
padding-top: 60px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
float: left;
display: block;
background-image: url(http://wiigames2dl.googlepages.com/techit.gif);
background-repeat: no-repeat;
background-position: center top;
color: #99CC33;
font-weight: bold;
}

add this code before ]]></b:skin>

Now check expand widgets , and find the following code <p class='post-footer-line post-footer-line-3'/> or related code. And add the following code immediately below


<div class='social_network'>
<div class='social_icon'>

<p class='delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>del.icio.us</a></p>
<p class='digg'><a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>Digg</a></p>
<p class='stumble'><a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>Stumbleupon</a></p>
<p class='technorati'><a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' target='_blank'>Technorati</a></p>
</div>
</div>

hope you will like this new type of social bookmarking widget .

thanks for reading , see you soon with a new widget.