One of the disadvantages for authors who use blogger is that there is no rating/voting widget . Because of that authors don't know how much the visitors liked their posts.  After a longtime , now draft.blogger has found a trick . They recently posted that bloggers can now add Ratings widget on their blog through draft blogger .Let us see how to add ratings widget for Blogger,

Step 1 :

In layout section , under body layout click edit . A new pop-up window will open like this , here you need to check the Show Star Ratings

If you are using template provided by blogger then you can see the widget after doing step 1. If you are using some other custom template then you need to add the following code below <div class='post-footer-line post-footer-line-1'> or similar .

<span class='star-ratings'>       <b:if cond='data:top.showStars'>          <div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/>       </b:if>     </span>

by adding this code there , the star ratings widget will appear below each post. If you want to add it below the post title , then add the above code immediately below <div class='post-header-line-1'/>let's see how it looks ,

you can also add that code anywhere you want. if you want to add style CSS like padding , color , etc add <div style='padding-left:50px; and other CSS part '>

star- ratings code

</div>Thats it , hope you guys will like this new star ratings widget. See you soon with a new widget .For future updates , subscribe to my blog

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.