Sistema de calificación en las entradas con CSS

Sé que muchos de los seguidores de HoyGeek tienen su blog de series o peliculas en blogger, es por ese motivo que tenemos varios tutoriales que pueden ayudar a mejorar tu blog de series o peliculas online por ejemplo Agregar pestañas desplegables para temporadas y capítulos para blog de series. Y hoy agregamos un nuevo tutorial a esta sección, como agregar calificaciones a tus publicaciones en blogger.

Veremos una forma fácil de agregar un sistema de calificación o valoración a nuestras entradas con ayuda de CSS. Este sistema lo podremos ver muchos blogs sobre cine ♥, música, tiendas online, libros, entre muchas otras categorías en donde se puede dar una valor o puntuación a cada producto.

Claro que en el ejemplo eh modificado algunas cosas con CSS para que se vea mucho mejor y se combine con el estilo del blog. Pero eso ya depende de cada uno, que le ponga su estilo propio y se vea original.

Listo ya vimos el ejemplo, explicare un poco como lo haremos. Para este sistema usaremos CSS y nos ayudaremos de sprites. Este sistema cuenta con la posibilidad de dar una valoración de media estrella, así que se vera mucho mejor.

Instalar Calificaciones por Estrellas en Blogger

Ahora si vamos a ello. Lo primero que tenemos que hacer es entrar en la seccion Plantilla > Edición de HTML y pegar el siguiente codigo antes de ]]></b:skin>

/* -----------------------------------------------
------------ Estrellas de valoración -------------
----------------------------------------------- */

.stars-fieldset {
width: 100px;
border: none;
font-weight: bold;
font-size: 14px;
}

.stars {
width: 100px;
height: 21px;
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKParS7R4eD5f4id3aNtq1gVbu2mhdeB31czPwNjomHV5XVwPM6xGc_SfrdvimldfZBE7LGhv1_kcW26dUi6DLh-zaaw-DJUndYOgddLelNyfHCBtCB06y8PlBmQsFKJiNL3D5SjwQGT0/s0/estrellas.png) 0 0 no-repeat;
}

.stars-0 { background-position: -100px -0; }
.stars-5 { background-position: -81px -21px; }
.stars-10 { background-position: -81px 0; }
.stars-15 { background-position: -61px -21px; }
.stars-20 { background-position: -60px 0; }
.stars-25 { background-position: -40px -21px; }
.stars-30 { background-position: -40px 0; }
.stars-35 { background-position: -21px -21px; }
.stars-40 { background-position: -21px 0; }
.stars-45 { background-position: 0 -21px; }
.stars-50 { background-position: 0 0; }

Una vez agregado estos estilos a nuestra plantilla, vamos ahora a dirigirnos a la entrada en donde queremos colocar este sistema de valoración. Y en ese lugar pegamos el siguiente codigo:

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

Configurar la Valoración por Estrellas

Para poder dar la calificación que nosotros deseamos tenemos que modificar en el código anterior lo siguiente stars-40.

La calificación por estrellas va de 5 en 5 empezando por el 0 que sería ninguna estrella, 5 es media estrella y 10 es una estrella. Te comparto una tabla con todas las califiaciones que puedes agregar.

Y listo ya tendrías tu sistema de calificación para darle un valor a cualquier cosa, ya sea un libro, una película, un producto, entre otras muchas cosas más.

EXTRA: Agregar botones como el ejemplo

Si haz llegado hasta el final te lo recompensamos con un un tutorial express. Te voy a compartir el código y estilo de los botones que están en el ejemplo. Si no haz visto el ejemplo puedes verlo desde aquí.

Lo primero que debemos hacer es agregar los estilos CSS de nuestro botón, como siempre tu puedes variar los colores, espacios, etc según el uso que le des. Si tienes problemas al agregar los estilos puedes ver este articulo donde explico como agregar CSS en Blogger.

.btn-trailer {
    text-decoration: none;
    font-size: 14px; /* Tamaño de letra */
    text-transform: uppercase; /* Letras en mayúscula */
    background: #6B3618; /* Color de fondo */
    padding: 10px 15px; /* Relleno */
    color: #FFD059; /* Color de texto */
    border-bottom: solid 2px #FFD059; /* Borde inferior */
}

Ahora agregaremos la estructura de nuestro botón, este código lo podemos agregar donde nosotros queramos ya sea en un artículo, página, gadget, etc.

<a href="#" class="btn-trailer">Ver Trailer</a>

Te comparto una tabla donde explico los valores que puedes modificar según el uso que le puedas dar.

Aporte gracias a CiudadBlogger