27/11/16

ABL | Diseño&Tutoriales: Widget de "Últimas reseñas"


¡Hola a todos, buscadores de lápices!

Volvemos a retomar nuestra sección de Ayuda al Bloguero literario con una entrada dedicada al diseño y a los tutoriales. Hoy os voy a enseñar a crear un widget donde podréis presentar a vuestros seguidores las últimas reseñas que hayáis publicado en vuestro blog.

Estoy segura de que habréis visto este tipo de widget por muchos blogs literarios, ya que se ha convertido en un elemento casi indispensable. Personalmente, creo que es un instrumento muy útil y cómodo (además de atractivo) de poder mostrar de un vistazo las últimas reseñas que habéis compartido con vuestros seguidores. De hecho, cuando entro a un blog literario, es de lo primero que espero encontrar.

Aunque hay variedades muy diferentes entre sí, yo me estoy refiriendo a los de este tipo, aquellos horizontales que se sitúan debajo de la imagen de cabecera del blog. El ejemplo de abajo, como podéis ver, es el de este mismo blog. Esta modalidad es la más común y, en mi opinión, la más práctica y, a la vez, atractiva.

Algo importante es aclarar que, en este caso, trabajaremos con imágenes estáticas aunque, si estáis interesados en los widget de "Últimas reseñas" de carrusel de imágenes (en los que las portadas van pasando, de modo que se pueden mostrar muchas más), podéis decírmelo en los comentarios y le dedicaré otro tutorial más adelante.


Y lo que vamos a aprender hoy es a crear este tipo de widget que, en realidad, es muy sencillo de hacer y de mantener actualizado. ¡Vamos a ello!

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

En primer lugar, tenemos que tener en cuenta que este widget va a estar formado por dos elementos: la imagen que incluye el texto "Últimas reseñas" y las imágenes de las portadas de los libros de los que se han escrito las reseñas.


De modo que el paso inicial es saber cuántas reseñas queremos mostrar en el widget, además del tamaño que tendrán las portadas. Esto último será determinante para poder añadir más o menos imágenes, aunque el ancho de nuestro blog también es una variable a tener en cuenta.

El método más sencillo –y que os recomiendo– para determinar esto es escoger el tamaño que queréis que tengan las portadas y, una vez creado el widget y obtenido el código de la primera imagen de portada (cosa que os enseñaré a hacer en el paso 2), insertar dicho código el número de veces que queráis (que será el número de portadas que podréis mostrar en el widget) y realizar comprobaciones para ver cuántas portadas os caben en una línea.

Vamos a aclarar todo esto mucho mejor en el paso 2, y veréis que es muy sencillo.


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 94x130 píxeles. (Recordad: AnchoxAlto)
Lo que tenemos que hacer ahora es subir estas imágenes a la web, por lo que debemos valernos de una plataforma de subida de imágenes. Hay muchas y para todos los gustos, si no sabéis cuál usar, esta misma os servirá: tinypic.com

Entráis en la página web y le dais a "Seleccionar archivo", escogéis vuestra imagen de "Últimas reseñas" y hacéis click en "Cargar ahora". Es posible que, en este paso, os aparezca una ventana para insertar un código y confirmar que no sois robots. De modo que basta con que escribáis el texto que os piden y listo.

Tras unos segundos, la imagen se habrá subido y os encontraréis con una serie de códigos. Debéis escoger el de "Dirección HTML para sitios Web", lo copias y lo guardáis, porque 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. A continuación, se abrirá una ventana en la que podréis encontrar diferentes tipos de widget, 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 que copiamos anteriormente, que será algo así:

<a href="http://es.tinypic.com?ref=2cboma" target="_blank"><img src="http://i64.tinypic.com/2cboma.jpg" border="0" alt="Image and video hosting by TinyPic"></a>

Ahora os voy a explicar qué significan los textos según su color. El verde es el enlace vinculado a la imagen; nosotros deberíamos insertar aquí, por ejemplo, la dirección de la página en la que recopilemos las reseñas (de tenerla) o bien la de la etiqueta mediante la que designáis a las entradas que incluyen reseñas. Sin embargo, también podéis dejar la imagen sin enlace, en cuyo caso sólo habría que sustituir el texto en verde por un "#".

El azul es el enlace de la imagen en sí, es decir, lo que hace que podamos ver la imagen. Por ello, este código nunca se debe modificar, pues perderíamos la imagen.

El texto en rojo es el que da nombre a la imagen, por lo que nosotros podemos cambiarlo por algo así como "Últimas reseñas".

Una vez tengamos insertado y modificado a nuestro gusto este código dentro del widget, debemos saber que 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 crear el widget (parte 2)...

Ahora vamos a insertar las imágenes de las portadas de los libros. Para ello, también deberemos subirlas a la web, de modo que seguiremos el mismo proceso que con la imagen de "Últimas reseñas" en el paso 2 (desde la señal de la estrella).

Una vez tengamos el código de nuestra portada (que será prácticamente igual al de la otra imagen), debemos pegarlo justo seguido al otro código. De modo que la imagen de "Últimas reseñas" y la de la portada aparezcan de uno detrás del otro, es decir, en fila.

En este punto será cuando hagamos lo que os dije en el paso 1, es decir, vamos a averiguar cuántas imágenes de ese tamaño que hemos escogido podemos incluir en nuestro widget. Para ello sólo tenemos que pegar el código de la portada que hemos subido el número de veces equivalentes al de las portadas que nos gustaría mostrar. Cinco, por ejemplo (de modo que tendríamos la imagen de "Últimas reseñas" y seis portadas de libros).


Ahora hacemos click en "Guardar" y vemos qué tal ha quedado nuestro blog. En el caso de que las imágenes queden en una línea, como el ejemplo de este blog que os puse más arriba, significa que el widget acepta justo esa cantidad de portadas o bien podríamos incluso añadir alguna más.

Sin embargo, si se crea una segunda fila de portadas, significa que hemos introducido más de las que podemos presentar en el widget. En este caso, lo que podemos hacer es:
  • 1) Eliminar portadas hasta que obtengamos el número justo que nos permite el widget.
  • 2) Reducir el tamaño de las portadas para que así podamos incluir más.
En este caso, lo único que tenemos que hacer es probar mediante el proceso de añadir o eliminar códigos de la imagen de portada dentro del widget.

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 bonito 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.


Cómo personalizar el widget...

Ahora sólo tenéis que poner el widget a vuestro gusto. De modo que tenéis que subir el resto de portadas de las últimas reseñas que habéis publicado en el blog. Los pasos para ello son los mismos que seguisteis para la primera portada, que nos sirvió para determinar el número de portadas que mostrará nuestro widget.

Lo único que hay que hacer es dejar el código de la imagen de "Últimas reseñas" sin tocar y, de forma seguida, añadir el resto de códigos que pertenezcan a las portadas que se presentarán en el widget.

No os olvidéis de modificar los códigos de esas imágenes según os he explicado más arriba, para que podáis añadirles el enlace para que vuestros lectores clicken sobre la imagen y vayan a la reseña; y, por supuesto, el nombre de la imagen, que sea el del libro en cuestión.

Una vez realizado esto, enhorabuena, ¡ya tenéis vuestro widget de "Últimas reseñas!



Cómo actualizar el widget...

El único requisito de este widget es el mantenimiento constante que debe tener por vuestra parte. Ya que, conforme vayáis publicando nuevas reseñas en vuestro blog, deberéis ir actualizando las portadas del widget. Eso se traduce en volver a los pasos anteriores y subir las nuevas imágenes (editando los nuevos códigos).

Para esto lo único que debéis tener en cuenta es que, cuando tengáis el código de una nueva portada, tenéis que borrar del widget el código de la que sería la portada más antigua para así poder subir justo después del código de la imagen de "Últimas reseñas" ese nuevo código de la portada que pertenece a la reseña más reciente.

Este proceso se repetirá cada vez que subáis una nueva reseña al blog. De modo que el código que tengáis en vuestro blogs sería algo así:

<a href="http://dondestamilapiz.blogspot.com.es/search/label/Rese%C3%B1as%20literarias" target="_blank"><img src="http://i64.tinypic.com/2cboma.png" border="0" alt="Últimas Reseñas"/></a><a href="http://dondestamilapiz.blogspot.com.es/2016/11/resena-la-sirena-kiera-cass.html" target="_blank"><img src="http://i63.tinypic.com/282jp8j.png" border="0" alt="La sirena"/></a><a href="http://dondestamilapiz.blogspot.com.es/2016/11/resena-la-bruja-debe-arder-danielle.html" target="_blank"><img src="http://i64.tinypic.com/fwsimr.png" border="0" alt="La bruja debe arder"/></a><a href="http://dondestamilapiz.blogspot.com.es/2016/11/fotoresena-breve-gatopedia-ilustrada.html" target="_blank"><img src="http://i68.tinypic.com/20tqwxe.png" border="0" alt="Breve Gatopedia Ilustrada"/></a>

Como podéis ver, el código de color rojo hace referencia al de la imagen de "Últimas reseñas" (que nunca tocaremos) y el resto, representados por diversos colores, son los códigos pertenecientes a las imágenes de las portadas de las últimas reseñas que hemos subido al blog.




¿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!

28 comentarios:

  1. Estos tutoriales me encantan *-*
    Lo tendré en cuenta para cuando quiera cambiar el diseño del blog. ¡Gracias por compartirlo! :D
    ¡Besos!

    ResponderEliminar
  2. QUE GENIAAAAL!!!
    Yo siempre he querido colocar uno en mi blog, y nunca he sabido como. Graciaaas!!
    Esta semana me pongo con esto a ver como me queda *-*

    ResponderEliminar
  3. ¡WOOW! Gracias por compartir tus conocimientos dnvfdkjfkd muy buen tutorial, me gustaría saber como hacerlo con movimiento para poner más, para cuando cambie el diseño del blog.

    ¡Nos leemos! ¡Saludos!

    ResponderEliminar
    Respuestas
    1. ¡Hola!
      ¡Claro! Lo tendré en cuenta para otro tutorial sobre este tipo de widget en movimiento para más adelante. :)
      ¡Nos leemos!

      Eliminar
  4. Hola!
    Concuerdo totalmente contigo con que el widget de últimas reseñas se ha hecho indispensable porque le permitimos a los lectores del blog tener una visualización más rápida de los últimos libros que se han hablado y todo se hace más dinámico.
    Te haz explicado super bien con el tuturial, muchas gracias por compartirlo y la paciencia.
    Besos

    ResponderEliminar
  5. ¡Hola!
    Gracias por el tutorial, cuando tenga un poco de tiempo me pondré con él para ponerlo en mi blog^^
    Un beso!

    ResponderEliminar
  6. ¡Hola! Muy buen tutorial. Yo tengo el slider de imágenes, pero cuando me canse de él (puede ser pronto porque no logro controlar la velocidad de avance de imágenes) es posible que utilice el tuyo :)

    Gracias por la ayuda ^^

    ResponderEliminar
  7. ¡Hola guapa!
    ¿Me has leído la mente? Justo estaba pensando en este widget y vas tu y subes el tutorial x'D
    Muchas gracias, ya lo intenté y quedó genial :')
    Besos!!

    ResponderEliminar
  8. Hola! Justo quería una cosa así y no sabia como ponerlo con lo que esta entrada me ha venido genial. Intentaré hacerlo sino llamaré a Alex al rescate, jajaja.
    Besos!

    ResponderEliminar
  9. Hola!
    Nunca había visto esta sección tuya, pero tengo que cotillearla con más atención porque todo esto es muy muy muy muy útil para mí. Yo soy muy negada, pero lo explicas tan bien que seguro que hasta yo puedo ahcerlo jajaja
    Un besote!

    ResponderEliminar
  10. Hola!
    Un tutorial muy completo! gracias por el!
    Un beso 😘

    ResponderEliminar
  11. Genial, muchísimas gracias por el tutorial ^^
    ¡Un besazo!

    ResponderEliminar
  12. Hola Alex!

    Me encanta este tuto, pero como meta uno de estos bajo la cabecera, voy a volver a los lectores majaras-regaderas perdidos (ya tengo uno en la el lateral derecho).
    Tinypic es la leche. Te vale para un zurzío y un descosío. Eso sí, es de agradecer sobretodo para los que empiezan en el mundillo estos tutoriales. ^^

    Un besoteeee!! ♥

    ResponderEliminar
  13. Hola! Pero qu etutorial mas util! La verdad es que soy nueva en Blogger y cada pequeña modificacion me cuesta muchisimo es como si todo viniera explicado en chino! Es muy considerado de tu parte esta clase de tutoriales, ademas explicas muy bien! Gracias!

    Beso!

    ResponderEliminar
  14. Graciasssss, a mi es que me da pereza hacer estas cosas jajajajjajajajaa .

    ResponderEliminar
  15. Gracias ale, lo tendré en cuenta para un futuro si cambio la plantilla, la que tengo actualmente tiene un widget que hace lo que hace este, pero con otro formato. ¡Un besito! 💝

    ResponderEliminar
  16. Hola, Alex:

    Muy buen tutorial. Yo ya lo tengo en mi blog y en su momento saqué la ayuda de otro blog, pero lo de la imagen previa a las portadas lo tuve que solucionar yo solita. Y bueno, como algo de experiencia tengo con blogger pues no me costó demasiado, pero para gente que todavía no sepa cómo hacerlo, me parece estupendo que lo expliques todo paso a paso :)

    Un saludo imaginativo...

    Patt

    ResponderEliminar
  17. Hola
    Ahora sí que lo vi, jeje.
    Encantada con tus tutos, me ha encantado.
    Un besote.

    ResponderEliminar
  18. Hola, antes que nada muchas gracias por tus tutoriales. Gracias a ti aprendí a hacer lo de las barras que se van llenando y ahora esto, que llevo tiempo queriendo hacerlo y sin saber como. Si sigues subiendo cosas de estas, al menos yo, te lo agradecería mucho; porque la verdad es que tu blog me encanta: es sencillo y precioso. Para agradecertelo, quiero nominarte a un book-tag (el primero que hago yo), por si te apetece hacerlo. Aquí lo tienes: http://buscadorhistorias.blogspot.com.es/2016/11/book-tag-5-los-signos-del-zodiaco.html. Un beso ^^

    ResponderEliminar
  19. Un widget super útil y fácil de hacer :D

    Personalmente me gustaría ver un tutorial del calendario que tienes en la barra lateral con las entradas publicadas en el mes, por mas que busco no encuentro ningún tutorial que quede bonito /:

    Saludos Alexandra!

    ResponderEliminar
    Respuestas
    1. ¡Hola!
      Ya sois varios los que me lo habéis pedido así que, más adelante os traeré un tutorial para hacer el calendario. En realidad es muy sencillo y también es fácil de actualizar. :)
      Me alegra que te haya gustado. ❤
      ¡Nos leemos!

      Eliminar
  20. Hola Alex!

    El tutorial está genial, sencillo y muy practico. Tengo un menu como este en mi blog y es muy util, me encantan los blogs que suelen usar este tipo de menú porque me parece más facil para seguir las reseñas publicadas.

    Besos

    ResponderEliminar
  21. Hola guapa!! que bien explicado! creo que puede ser de mucha utilidad para nuestros blogs y, además, quedará genial. Gracias por compartirlo. Besos!!

    ResponderEliminar
  22. Hola!
    Que bien te explicas unicornito ^^ Ahora haz alguno de algo cuqui que yo no acabe de meter en el blog ¬¬ jajaja
    Un besazo!

    ResponderEliminar
  23. hola,
    he alucinado, nos lo has explicado fenomenal... me lo apunto para ponerlo cuando acabe Navidad, besitos

    ResponderEliminar
  24. Muchas gracias por este tutorial, vienen genial!!!

    ResponderEliminar
  25. ¡Hola! Me encanta estos super consejo útiles para blog a lo bricomanía (?) NO SÉ QUE ACABO DE DECIR. Ay, tengo mucho sueño ya, me voy a dormir mejor. He ojeado varios que quiero cambiar mi diseño y son muy útiles la verdad e_e ¡Besos!

    ResponderEliminar