Bir ara oldukça moda olan ve hala birçok sitede gördüğümüz yazıların çeşitli şekillerle okuyucular tarafından oylanmasını gösteren bir sistemden bahsetmek istiyorum.

Css kullanarak yazılarınızın okuyucularınız tarafından ne kadar beğenildiğini güzel bir biçimde ölçebiliriz.

Öncelikle işe css kodları ile başlıyoruz:

.star-rating,
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus,
.star-rating .current-rating{
background: url(star.gif) left -1000px repeat-x;
}
.star-rating{
position:relative;
width:125px;
height:25px;
overflow:hidden;
list-style:none;
margin:0;
padding:0;
background-position: left top;
}
.star-rating li{
display: inline;
}
.star-rating a,
.star-rating .current-rating{
position:absolute;
top:0;
left:0;
text-indent:-1000em;
height:25px;
line-height:25px;
outline:none;
overflow:hidden;
border: none;
}
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus{
background-position: left bottom;
}
.star-rating a.one-star{
width:20%;
z-index:6;
}
.star-rating a.two-stars{
width:40%;
z-index:5;
}
.star-rating a.three-stars{
width:60%;
z-index:4;
}
.star-rating a.four-stars{
width:80%;
z-index:3;
}
.star-rating a.five-stars{
width:100%;
z-index:2;
}
.star-rating .current-rating{
z-index:1;
background-position: left center;
}

Hemen arkasından yıldızların sitemizde görünmesini istediğimz yerde HTML kodlarını kullanıyoruz:

<ul class="star-rating">
<li class="current-rating" style="width:60%;">Currently 3/5 Stars.</li>
<li><a href="#" title="1 star out of 5" class="one-star">1</a></li>
<li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li>
<li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li>
<li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li>
<li><a href="#" title="5 stars out of 5" class="five-stars">5</a></li>
</ul>

• Currently 3/5 Stars.
• 1
• 2
• 3
• 4
• 5

Sonunda yukarıdaki gibi bir görüntü yakalıyoruz. Gördüğünüz gibi ajax kullanmadan basit birkaç kod ile yıldız uygulamasını gerçekleştirebilirsiniz.

Şuradan yazının kaynağına ulaşarak ilgili dosyayı indirebilirsiniz, daha detaylı bilgi alabilirsiniz.