Tutoriales blogger: Valoración con estrellas Blogger



A nosotras que nos encanta calificar cosas esto nos viene como anillo al dedo! valoración con estrellas! quieres saber más sobre esto? quédate y sigue leyendo! gracias a ciudad blogger por el tutorial

Quieres calificar tus tutoriales? o cualquier cosa en tu blogger? así sería el resultado:
Calificación:

Un claro ejemplo que yo lo uso esta aquí:


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(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últiplos 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="valoracion val-30"></span></fieldset>


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


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


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


Calificación:
<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 te gusto este tutorial no se te olvide compartir en tus redes sociales!

No hay comentarios.:

Publicar un comentario