Cómo Añadir Valoración Personal Con Estrellas

La gran mayoría de plantillas de valoraciones con estrellas son para los usuarios que visiten nuestra página web, pero en este caso es el propio autor el que califica, pudiendo mostrar su recomendación personal a sus clientes o visitantes. Funciona con CSS y también nos permite asignar puntuaciones intermedias como 4 estrellas y media por ejemplo.

El resultado del script una vez insertado será este:

Valoración:

Debemos dirigirnos a la parte de Tema > Editar HTML de nuestra plantilla y ahí buscaremos la etiqueta ]]></b:skin> con ayuda del buscador del editor. Se activa pulsando Ctrl + F y se ve así:

Justo antes de esa etiqueta pegamos el código CSS que te dejo por aquí.

/* 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/AVvXsEiwdcicF6680oxIRzMNEBcEWg3AsDoWUlm8zN6jIBUGEm4m-7WkYobEvu4zr0yTQPsnlzqaM7WmGjX63FsQxi9A8VQW6lkZPwc_ZPl_md3Tk25Oqp1IBr2g8kf6IwIscdgpeMmS4ARRFPI/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;}

El texto en color verde es el enlace de la imagen que quieras para las estrellas. En este caso se ha utilizado el diseño por defecto pero puedes cambiarlo por cualquier otro de tu agrado.


Y el último paso, insertar este código en la página o entrada de tu web donde quieras mostrarlo.

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

El valor que aparece en verde corresponde al texto que se muestra justo encima de la puntuación.
Otros posibles ejemplos distintos serían: Calificación, Puntuación, Evaluación, Marca, Nota, Opinión...

El valor que aparece en color rojo corresponde al número de estrellas que le asignaremos al script. En este ejemplo he puesto 5 estrellas, pero como es lógico, puedes poner el valor que tú consideres oportuno.

Te dejo por aquí algunos ejemplos para que puedas copiarlos directamente sin calentarte la cabeza.

Valoración:

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

Valoración:

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

Valoración:

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

Valoración:

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

Valoración:

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

Valoración:

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

Valoración:

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

Valoración:

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

Valoración:

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

Valoración:

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

Valoración:

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

En este método se ha utilizado la etiqueta Fieldset para decorar el script con el texto que hay situado encima de las estrellas, por lo que puedes personalizarlo a tu gusto. A continuación dejo el código limpio de etiquetas para que puedas copiarlo y editarlo con total libertad.

<span class="valoracion val-50"></span>