ABL | Diseño&Tutoriales: 3 formas de incluir las puntuaciones en el widget de "Últimas reseñas"

¡Hola a todos, buscadores de lápices!

Ha pasado bastante tiempo desde la última entrada, pero vamos a retomar la sección de Ayuda al Bloguero literario a lo grande. En esta ocasión, con algo que a todos nos interesa: el widget de "Últimas reseñas".

Por si no lo sabéis, ya publiqué una entrada explicando todo lo necesario para poder incluir sin problemas este widget en vuestro blog, en su forma más sencilla. Sin embargo, me habéis pedido más tutoriales sobre variedades más personalizadas de este recurso. Por lo que en esta entrada vamos a introducir un elemento, las puntuaciones.

Aunque este widget puede destinarse a otras funciones, la que a nosotros nos interesa es aquella que pretende mostrar de un vistazo las últimas opiniones o reseñas de libros (también puede tratarse de películas o series) que hemos publicado en el blog. Habitualmente, estas valoraciones van acompañadas de una puntuación, según el rango establecido por el autor de la misma, y vamos a ver cómo podemos incluirlas en nuestro widget de tres formas distintas.

Me ha llevado bastante tiempo hacer este tutorial para intentar que no tengáis ningún problema y que podáis tener el widget listo lo antes posible. ¡Así que espero que os guste!

Antes de continuar, debéis saber que los tres modelos de código de este tutorial están extraídos de la web de New Syndrome Book, desarrollada por Georgelys Guerra. Desde aquí, le doy las gracias porque no solo es práctico, también es fantástico desde el punto de vista estético. :)
(También os aviso de que he realizado algunos pequeños cambios en el código original).

PASOS

Aspectos a tener en cuenta antes de crear el widget...

Como ya he dicho, hace un par de años publiqué en este mismo blog una entrada en la que os explicaba de forma detallada todo lo que teníais que saber para diseñar, crear y actualizar este widget.

Por tanto, el primer paso es que vayáis a dicha entrada y os informéis, no tardaréis más de cinco minutos. Os adelanto que lo primero que tenéis que tener en cuenta es el tamaño del ancho y el alto de las imágenes que incluiréis en el widget (las portadas de los libros reseñados), así como el número de imágenes que queréis que aparezcan.

No olvidéis que este es un widget estático, por tanto, hay un número límite de imágenes que podréis incluir para que quede estético. Es decir, que quede una línea y no se desplacen a una segunda altura las imágenes sobrantes en la primera.

Aquí tenéis la entrada que os recomiendo revisar antes de seguir al paso número 2:

Haz click en esta imagen para ir a la entrada correspondiente

Cómo crear el widget...

Ya hemos decidido el tamaño que tendrán las portadas y hemos escogido la imagen que incluirá el texto de "Últimas reseñas" (que deberá tener la misma altura que las portadas –aunque el ancho puede ser diferente–). Pongamos que estos son nuestros resultados elegidos:

En este caso, que es el de este propio blog, tenemos una imagen de "Últimas reseñas" de 140x130 píxeles y una portada de libro de 94x130 píxeles. (Recordad: AnchoxAlto). Ahora vamos a crear el widget.

Para ello sólo tenéis que ir a Blogger, al panel de control de vuestro blog, de ahí accedéis a Diseño y le dais a "Añadir un gadget" en el apartado de Multicolumnas que se encuentra bajo el de Cabecera. Si queréis que esté en la columna lateral, también podéis hacerlo creando el widget ahí (donde pone "sidebar").

A continuación, se abrirá una ventana en la que podréis encontrar diferentes tipos, nosotros buscamos el de "HTML/Javascript".

Una vez os salga la ventana para configurarlo, veréis que podéis insertarle un título y el contenido. En "título" no hay que poner nada, es decir, debéis dejarlo en blanco. Lo que nos interesa es el cuadro del contenido.

En él deberemos pegar el código del estilo que más os guste, aquí tenéis los tres tipos:

TIPO 1

.div-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.div-img .img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}

.div-img .stars {
font-size: 13px;
color: #000;
display: block;
text-align: center;
width: 100%;
transform: translate(0px);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  opacity: 0;
  transition: transfom opacity 1.5s;
}

.div-img:hover .img {
  transform: scale(0.8);
  -ms-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -o-transform: scale(0.8);
}
.div-img:hover .stars {
transform: translate(0px, -13px);
opacity: 1;
font-size: 13px;
}
</style>

TIPO 2

.div-img {
  display: block;
  margin-left: auto;
  margin-right: auto;

}

.div-img .img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
      transform:scale(1);
        -webkit-transform:scale(1);
}

.div-img:hover .img {
opacity: 0.5;
}

.div-img:hover .stars {
transform: translate(0px, -20px);
opacity: 1;
font-size: 15px;
    position: absolute;
    left: 0px;
    top: 100px;
}
</style>

TIPO 3

.div-img {
  display: block;
  margin-left: auto;
  margin-right: auto;

}

.div-img .img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.div-img .stars {
font-size: 0px;
color: #000;
display: block;
text-align: center;
width: 100%;
transform: translate(0px);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  opacity: 0;
top: -30px;
left: -50px;
}

.div-img:hover .img {
transform: translate(0px);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
     -webkit-transform:translate(30px,0px); // Safari and Chrome 
}

.div-img:hover .stars {
transform: translate(0px, -20px);
opacity: 1;
font-size: 15px;
position: absolute;
left: -30px;
top: 33px;
}
</style>

Cómo adaptar a vosotros el widget (parte 1)...

Si observáis los tres códigos, veréis que todos tienen una estructura común que se divide en dos partes que vamos a explicar de forma muy sencilla:

1) <style></style>. El código que se engloba entre estas dos palabras, que indican tanto su inicio como su fin, es el referente al diseño y el funcionamiento del widget. Es diferente en los tres tipos de códigos.

2) <div class="container"></div>. Entre estos dos indicadores se encuentra el contenido del widget, es decir, nuestras imágenes y sus respectivas puntuaciones. Este apartado será el que habrá que actualizar. Es igual en los tres tipos de códigos, con una pequeñísima excepción en el tercero, que veremos más adelante.

Lo que vamos a hacer ahora es centrarnos en el apartado de <div class="container"></div>, para poder adaptar este código general a nuestro caso particular. Por tanto, vamos a cambiar las imágenes, los enlaces y las puntuaciones.

Recordad que ya debéis tener preparadas vuestras imágenes, tanto de la correspondiente a "Últimas reseñas" (opcional) como las portadas de libros, y haber obtenido el enlace de las mismas. Podéis encontrar más de diez estilos diferentes de imágenes de "Últimas reseñas" en esta entrada, y usarlas libremente. :)

TIPO 1 y TIPO 2

Ignoramos el principio del código, que corresponde al apartado <style>, y nos centramos en la segunda parte:

En primer lugar, vamos a comprender el código (situado abajo del texto, en el recuadro amarillo):

1. La parte en verde hace referencia al código que representa la imagen de "Últimas reseñas".

2. La parte en azul es la de las portadas de los libros. He usado un azul claro y otro más oscuro para alternar y que podáis diferenciar de forma más clara el código que representa a las siete imágenes de este ejemplo.

3. Lo que se encuentra entre <div class="container"> y </div> (señalado en mayúscula) es el código que contiene la imagen, el enlace y la puntuación de cada elemento del widget. Si nuestro widget contiene ocho imágenes en total, como es este caso, tendrá ocho de estos códigos.

<div class="container">

</div>

</div>

<div class="container">

</div>

</div>

<div class="container">

</div>

</div>

<div class="container">

</div>

</div>

<div class="container">

</div>

</div>

<div class="container">

</div>

</div>

<div class="container">

</div>

</div>

<div class="container">

</div>

</div>

PARA ADAPTARLO A NOSOTROS...

Cogemos el código de la primera portada de libro (este proceso se repetirá con el resto de imágenes), que encontraréis en el recuadro amarillo de abajo, y solo tenemos que sustituir:

1. El enlace de la imagen de la portada del libro que queremos que aparezca.

2. El enlace que dirige a la entrada que corresponde a esa imagen por el nuestro.

3. Nuestra puntuación. Esto nos lo saltamos en el caso de la imagen de "Última reseñas", si se ha incluido.

En lo que respecta a la puntuación, podemos usar números o, si lo preferimos, símbolos del tipo (★ ❤ ● ■ ♫ ▲ ✿ ◆ ☀ ☁ ☻ ✹ ➽ ◆ ✖) o iconos como los que podemos encontrar en esta web. Sin embargo, por experiencia propia os diré que es más recomendable el uso de símbolos, ya que los iconos pueden dar problemas y es habitual que, cuando intentes modificar el widget para actualizarlo, estos hayan desaparecido y tengas que volver a incluirlos.

Una vez escogido, es tan sencillo como introducir la puntuación entre <div class="stars"></div>, por ejemplo una puntuación de 5/5: <div class="stars">❤❤❤❤❤</div>

Y, como puedes ver por el código en verde claro, también puedes darle el estilo que quieras a los símbolos y a los números (pero no cambiéis el tamaño, eso lo veremos más adelante). En mi caso, el lugar de poner el número de corazones que corresponda a la puntuación, uso los colores naranja (#ff8f00) y gris (#bcbdbd) para señalarla: si se trata de un 3/5, habrá tres corazones en naranja y dos en gris, como en el ejemplo.

IMPORTANTE: En la parte del código height="130" se debe el númerp "130" por la altura de vuestra imagen y esta siempre debe ser la misma en todos los casos. No puede cambiar en todo el widget. A excepción del ancho, que sí puede ser diferente, pero no os lo recomiendo más que para la imagen de "Últimas reseñas" porque se os puede descuadrar todo.

<div class="container">

<div class="stars">

</div>

</div>

</div>

TIPO 3

El proceso es exactamente el mismo, solo hay que tener en cuenta una peculiaridad. Como en este estilo la puntuación está en vertical, es necesario incluir el código <br/> (que se emplea para dejar un espacio entre línea y línea de texto) justo después de cada símbolo, como se ve en el ejemplo de abajo.

</div>

Cómo adaptar a vosotros el widget (parte 2)...

¿Recordáis que al principio del paso anterior hemos dividido el código entre <style> y <div class="container">? Bien, pues ahora vamos a centrarnos en modificar a vuestro gusto un par de aspectos de este apartado en cada uno de los tres estilos.

Si tenéis conocimientos en HTML, podéis trastear lo que queráis. Si no, solo os recomiendo modificar los valores básicos que os indico para que no se os desajuste el widget.

TIPO 1

<style>

.container {

position: relative;

left: 0px;

right: 0px;

margin: 1px; ➨ Cuanto más alto sea su valor, mayor será la distancia entre las imágenes.

top: 0px; ➨ Añade valor para separar al widget de arriba.

bottom: 5px;

float:left;

}

.div-img {

display: block;

margin-left: auto;

margin-right: auto;

}

.div-img .img {

display: block;

margin-left: auto;

margin-right: auto;

width: 100%;

transform: scale(1);

-ms-transform: scale(1);

-moz-transform: scale(1);

-webkit-transform: scale(1);

-o-transform: scale(1);

-webkit-transition: all 500ms ease-in-out;

-moz-transition: all 500ms ease-in-out;

-ms-transition: all 500ms ease-in-out;

-o-transition: all 500ms ease-in-out;

}

.div-img .stars {

font-size: 13px; ➨ Tamaño de la puntuación. Este será el tamaño cuando se inicie la animación.

color: #000;

display: block;

text-align: center;

width: 100%;

transform: translate(0px);

-webkit-transition: all 500ms ease-in-out;

-moz-transition: all 500ms ease-in-out;

-ms-transition: all 500ms ease-in-out;

-o-transition: all 500ms ease-in-out;

opacity: 0;

transition: transfom opacity 1.5s;

}

.div-img:hover .img {

transform: scale(0.8);

-ms-transform: scale(0.8);

-moz-transform: scale(0.8);

-webkit-transform: scale(0.8);

-o-transform: scale(0.8);

}

.div-img:hover .stars {

transform: translate(0px, -13px);

opacity: 1;

font-size: 22px; ➨ Tamaño de la puntuación. Este será el tamaño real que quedará tras finalizar la animación.

}

</style>

Este es un ejemplo a cámara lenta para que veáis a qué me refiero con los tamaños de las puntuaciones: el primero, es con el que se inicia la animación (13px en el ejemplo); y el segundo (22px en el ejemplo), con el que se queda al final.

TIPO 2

<style>

.container {

position: relative;

left: 0px;

right: 0px;

margin: 1px; ➨ Cuanto más alto sea su valor, mayor será la distancia entre las imágenes.

top: 0px; ➨ Añade valor para separar al widget de arriba.

bottom: 5px;

float:left;

}

.div-img {

display: block;

margin-left: auto;

margin-right: auto;

}

.div-img .img {

display: block;

margin-left: auto;

margin-right: auto;

width: 100%;

transform:scale(1);

-webkit-transform:scale(1);

}

.div-img .stars {

font-size: 13px; ➨ Tamaño de la puntuación. Este será el tamaño cuando se inicie la animación.

color: #000;

display: block;

text-align: center;

width: 100%;

transform: translate(0px);

-webkit-transition: all 500ms ease-in-out;

-moz-transition: all 500ms ease-in-out;

-ms-transition: all 500ms ease-in-out;

-o-transition: all 500ms ease-in-out;

opacity: 0;

}

.div-img:hover .img {

opacity: 0.5;

}

.div-img:hover .stars {

transform: translate(0px, -20px); ➨ Si reducís el número, la puntuación aparecerá más abajo; si lo aumentáis, aparecerá más arriba.

opacity: 1;

font-size: 15px; ➨ Tamaño de la puntuación. Este será el tamaño real que quedará tras finalizar la animación

position: absolute;

left: 0px;

top: 100px;

}

</style>

TIPO 3

<style>

.container {

position: relative;

left: 0px;

right: 0px;

margin: 1px; ➨ Cuanto más alto sea su valor, mayor será la distancia entre las imágenes.

top: 0px; ➨ Añade valor para separar al widget de arriba.

bottom: 5px;

float:left;

}

.div-img {

display: block;

margin-left: auto;

margin-right: auto;

}

.div-img .img {

display: block;

margin-left: auto;

margin-right: auto;

width: 100%;

}

.div-img .stars {

font-size: 0px; ➨ Tamaño de la puntuación. Este será el tamaño cuando se inicie la animación. En mi caso, con este estilo, me gusta más que no se produzca este cambio, así que lo dejo en '0'.

color: #000;

display: block;

text-align: center;

width: 100%;

transform: translate(0px);

-webkit-transition: all 500ms ease-in-out;

-moz-transition: all 500ms ease-in-out;

-ms-transition: all 500ms ease-in-out;

-o-transition: all 500ms ease-in-out;

opacity: 0;

top: -30px; ➨ Cuando se produce la animación, la puntuación llega desde arriba hasta colocarse al lado de la imagen. Cuanto mayor sea este número ('-40', '-100'...), más recorrido hará. Yo prefiero que sea corto y que no se note mucho, por eso lo dejé a '-30'.

left: -50px;

}

.div-img:hover .img {

transform: translate(0px);

-webkit-transition: all 500ms ease-in-out;

-moz-transition: all 500ms ease-in-out;

-ms-transition: all 500ms ease-in-out;

-o-transition: all 500ms ease-in-out;

-webkit-transform:translate(30px,0px); // Safari and Chrome

}

.div-img:hover .stars {

transform: translate(0px, -20px);

opacity: 1;

font-size: 15px; ➨ El tamaño de la puntuación.

position: absolute;

left: -30px; ➨ Cuanto mayor sea el número, más separada estará la puntuación de las imágenes.

top: 33px; ➨ Con esto se centra, baja o eleva la puntuación. Si quieres centrarla, deberás jugar con los valores. Si subes el número, la puntuación baja; si reduces el número, la puntuación sube.

}

</style>

Una vez tengamos insertado y modificado a nuestro gusto este código dentro del widget, debemos saber que este apartado de <style> será lo único que siempre dejaremos fijo. Es decir, nunca más tendremos que volver a tocarlo ya que, cuando actualicemos el widget, sólo cambiaremos los códigos relativos a las imágenes de las portadas de los libros.

Cómo actualizar el widget...

Esto es muy sencillo, voy a enseñaros cómo lo hago yo con una imagen para ilustrarlo (recordad que nos olvidamos del <style>). Para que sea más fácil de entender y visualizar, reduciremos el contenido del código a una imagen de "Últimas reseñas" y tres portadas de libros.

Si quieres ampliar la imagen para ver mejor, puedes hacerlo dando click justo encima de ella

Un consejo es que no añadáis demasiadas portadas ni que su tamaño sea ni demasiado pequeño ni demasiado grande, ya que no queda estético encontrarse una enorme cantidad de portadas pequeñas ni tampoco cuatro portadas enormes. Os recomiendo un tamaño más o menos similar al del ejemplo y mostrar una cantidad de portadas que ronde entre 6 y 10, como mucho.

¿Qué te ha parecido este tutorial?

Puedes dejar en los comentarios cualquier duda que tengas.
O alguna sugerencia para la siguiente entrada. :)

¡Hasta la próxima!

12 comentarios

Angy28 de septiembre de 2018, 2:49
esta muy buena la explicación,aunque admito que al inicio me revolví con las opciones. gracias.
ResponderEliminar
Respuestas
Mary-chan28 de septiembre de 2018, 14:13
¡Hola! ^^
Partiendo de que yo no hago reseñas en mi blog, no creo que me sea muy útil esta información, jaja. Pero seguro que a mucha gente le viene bien. De todas formas a mí estas cosas se me dan fatal, así que prefiero toquetear el blog lo menos posible xD
Besos!
ResponderEliminar
Respuestas
Violeta28 de septiembre de 2018, 14:26
Hola guapa!
Genial entrada, ayuda un montón pues anda que no he buscado yo los codigos para ponerlos en mi blog y esta genialmente explicado.

−Fantasy Violet−
Besotes! ♥
ResponderEliminar
Respuestas
Anónimo28 de septiembre de 2018, 21:41
Muchas gracias, aunque por el momento esta no la voy hacer que me queda recargado el blog, pero la anterior de los calendarios me ha servido maravillosamente.
Saludos.
ResponderEliminar
Respuestas
Locas del romance28 de septiembre de 2018, 22:14
Esto me lo tengo que ver con mucha calma porque soy una patata con esto, pero quiero hacer un cambio y este me gusta
un bes❤️
ResponderEliminar
Respuestas
Claudia S.29 de septiembre de 2018, 3:24
Hola Alex! Me ha súper encantado cómo se ve este diseño con las puntuaciones, partiendo del hecho que el diseño actual que tengo es gracias a ti :)
Lo guardaré para ver si le dedico un tiempito y así poner también las puntuaciones. Muchas gracias por compartirlo, está muy bien explicado!! Besos.
ResponderEliminar
Respuestas
Silvia29 de septiembre de 2018, 13:07
Hola!
Una entrada super útil. LLevo un tiempo intentando dar un lavado de cara al blog así que me la apunto para cuando tenga decidida la nueva estética. Con lo negada que soy yo para esto este tipo de entradas me salvan la vida y me ayudan un montón.
Un beso ^-^
ResponderEliminar
Respuestas
Zaskya Benítez30 de septiembre de 2018, 4:27
Hola!
Ay pero como no sabía yo que hacías este tipo de entradas? con lo negada que soy para el diseño, necesito siempre de tutoriales hasta para poder decir como me llamo xD Así que aunque justo ahora no aplicaré este, me lo llevo apuntado que el estilo 1 me ha parecido una belleza.
Saludos!
ResponderEliminar
Respuestas
Mi tarde junto a un libro30 de septiembre de 2018, 16:51
Hola! Este tutorial está genial!!! Alguna que otra vez pensé como hacerlo pero tampoco me paré a buscar info para hacerlo. En cuanto tenga un poquito de tiempo me estudiaré bien la entrada y probaré a hacerlo a ver si lo consigo. Sino te acosaré para que me ayudes, jajaja.
Besos!
ResponderEliminar
Respuestas
JessM || LecturasInfinitas30 de septiembre de 2018, 21:06
Wooow, tú entrada está demasiado completa, muchisimas gracias, yo tengo las reseñas en la lateral pero me gustó la idea de ponerle la puntuación, veré si puedo adaptarla a mi manera :'D

saludos xoxo
ResponderEliminar
Respuestas
Arya1 de octubre de 2018, 10:27
Hola! (✿◠‿◠)
Mil gracias por el consejo, un día que tenga tiempo lo intento a ver que tal me sale ^^
Un beso!
ResponderEliminar
Respuestas
Mar13 de enero de 2020, 21:02
Increíbles totorales! gracias a tí mi blog a quedado increíble. Mil gracias!!! besos ♥︎♥︎♥︎♥︎
ResponderEliminar
Respuestas