Valoracion de estrellas en el blog por parte del autor

La mayoría de los sistemas de valoración que conocemos son para que los usuarios califiquen una entrada, pero qué pasa si no queremos la calificación de los usuarios sino la propia. Por ejemplo, algunos blogs hacen reseñas de películas, de libros, aplicaciones, etc. y quieren calificar el "producto" del que hablan, pues es ahí cuando podemos usar un sistema de valoración de estrellas como el siguiente, para que el autor le ponga una calificación a su entrada, reseña, película, o lo que quiera calificar.

El resultado será algo como esto:

Calificación:

Este sistema de valoración lo haremos sólo con CSS apoyándonos de sprites, y tiene la característica de mostrar calificaciones fraccionadas, es decir, que podemos darle una o cinco estrellas, o una estrella y media, dos estrellas y media, etc.

Lo primero que haremos es entrar en Plantilla | Edición de HTML y pegar antes de ]]></b:skin> el CSS:

/* Estrellas de valoración
----------------------------------------------- */
.val-fieldset {
width:100px;
border:none;
font-weight:bold;
font-size:12px;
}
.valoracion {
width: 100px;
height: 21px;
display: block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZzDWjzOr6R2jCcLriOdhlZYMMivKhOS5U0pUIckMKf_QdpcY5VdKsvh24bys2DsLnCaOKTFJln3ZWHsnpN2Rdv0uHB-igawxtwWX0KZBoQ322btdgMR23nPWJ-dG8HG6EBFGeX4ZMv2k/s0/estrellas.png) 0 0 no-repeat;
}
.val-0 {background-position: -100px -0;}
.val-5 {background-position: -81px -21px;}
.val-10 {background-position: -81px 0;}
.val-15 {background-position: -61px -21px;}
.val-20 {background-position: -60px 0;}
.val-25 {background-position: -40px -21px;}
.val-30 {background-position: -40px 0;}
.val-35 {background-position: -21px -21px;}
.val-40 {background-position: -21px 0;}
.val-45 {background-position: 0 -21px;}
.val-50 {background-position: 0 0;}

Y luego en tu entrada donde quieras mostrar la calificación agrega lo siguiente:

<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-40"></span></fieldset>

Lo que está en rojo es la calificación que le darás, en este caso son 4 estrellas. Los valores son en múltiples de 5 donde 0 es ninguna estrella, 5 media estrella, 10 una estrella, 15 una estrella y media, 20 dos estrellas, etc. hasta el 50, que son cinco estrellas.

Calificación:

<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-0"></span></fieldset>

Calificación:

<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-5"></span></fieldset>

Calificación:

<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-10"></span></fieldset>

Calificación:

<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-15"></span></fieldset>

Calificación:

<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-20"></span></fieldset>

Calificación:

<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-25"></span></fieldset>

Calificación:

<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracionval-30"></span></fieldset>

Calificación:

<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracionval-35"></span></fieldset>

Calificación:

<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracionval-40"></span></fieldset>

Calificación:

<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracionval-45"></span></fieldset>

Calificación:

<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracionval-50"></span></fieldset>