miércoles, 20 de abril de 2016

Calificación con estrellas de entradas por el 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.

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.
Ejemplo de como se veria:
 calificación-valoracion-estrellas


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(http://lh5.googleusercontent.com/-Sp-iHFztZdc/UVD89O9oM1I/AAAAAAAAEU0/Xh-FBDaWyJY/s000/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.


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

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

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

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

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

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

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

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

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

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

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

Es un método bastante sencillo que le permitirá al autor calificar cualquier cosa. Hemos usado la etiqueta FIELDSET para acomodar el texto "Calificación" y las estrellas, por lo que puedes personalizar esas etiquetas si lo deseas.

Si lo que buscas es un sistema de valoración de estrellas donde sea el público quien califique, entonces tal vez quieras usar las propias estrellas de valoración que provee Blogger.

About the Author

Unknown

Author & Editor

Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.



::PUBLICIDAD::

Publicar un comentario

 
Coffee Code y SEO © 2016 - Diseñado por | Plantilla de Templateism Blogger Templates