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:
/* Estrellas de valoraci?nY luego en tu entrada donde quieras mostrar la calificaci?n agrega lo siguiente:
----------------------------------------------- */
.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/AVvXsEiQLau62fdYE1fEDL_Oz7jc8HR4_B98_O_VwGEr9nyCIVRLzlX14d4YdchUZTHdshPV6MpNitA_WxGQ345glLF_rRWMmfifuDEf23cgVB5eGiJezsybM86EeJUadOHZk3rf2T9Peh3y13s/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;}
<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.
No comments:
Post a Comment