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:
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:
Para implementarlo en vuestro Bloc solo tenéis que seguir estos pasos:
Un clic en “Plantilla”
Un clic en “Editar HTML”
Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación
En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,
Busca el siguiente código
]]></b:skin>
Busca este código ]]></b:skin> una vez que hayas encontrado el código deberás insertar las siguientes líneas de código justo arriba del código que encontraste
/* 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/AVvXsEjYP2wlwGp1uF9F-GSSVxJFldk95EWKm9N36xBIwSY82MPE6PEyKPtL6c9lA05Dj9ORGOL5zpZ8S7pka91pmUp5dfMy9_HQ83hVFbIxQ6hL4GbToX3mKCBYTktU9hnUrBoPz0K6C6hUSsE/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>
----------------------------------------------- */
.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/AVvXsEjYP2wlwGp1uF9F-GSSVxJFldk95EWKm9N36xBIwSY82MPE6PEyKPtL6c9lA05Dj9ORGOL5zpZ8S7pka91pmUp5dfMy9_HQ83hVFbIxQ6hL4GbToX3mKCBYTktU9hnUrBoPz0K6C6hUSsE/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.
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-40"></span></fieldset>
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.
0
Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-0"></span></fieldset>
5
Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-5"></span></fieldset>
10
Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-10"></span></fieldset>
15
Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-15"></span></fieldset>
200
Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-20"></span></fieldset>
25
Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-25"></span></fieldset>
30
Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-30"></span></fieldset>
35
Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-35"></span></fieldset>
40
Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-40"></span></fieldset>
45
Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-45"></span></fieldset>
50
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 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.
Data de la Publicación; 01-09-2019
Fuente; ciudadblogger
Publicado por;
