Como añadir un gadget con tus mejores post para Blogger y WordPress

Vamos a poner un widget en Blogger y wordpress para mostrar los post que más nos gusten en la barra lateral o en cualquier parte del blog.

Cuándo llega un visitante al blog un hito es hacer que multiplique las visitas y añadir un gadget con tus mejores post es muy buena idea para que puedan visitarlos.

Este gadget lo vamos a colocar el la barra lateral, aunque lo podemos poner en cualquier parte del blog si creamos un shortcode en WordPress o lo insertamos a mano.

No vamos a utilizar casi código, sólo copiar y pegar, la dificultad de este tutorial es muy baja.

Hay 6 motivos por los que los post relacionados o patrocinados son muy importantes:

Puedes llevar más visitas a post importantes:

Por ejemplo si tienes post en los que anuncias un servicio, afiliados o que te producen ganancias ponerlos a la vista de los lectores es lo mejor que puedes hacer.

Tenerlos organizados en un widget en la barra lateral es una buena idea que te ayudará a crecer.

Mejorar la experiencia de los lectores:

Mejoras la experiencia porque le muestras contenido muy interesante que quizás no encuentre de otra forma navegando en el blog.

Sacas el polvo a post que no merecen estar en el olvido

Hay muchos post que no se merecen haber pasado al baúl de los recuerdos, si los mantienes a la vista en la barra lateral conseguirás que más gente se interese por ellos.

Es más bonito que dejar enlaces vistos

Dependiendo de los lectores que tengas el dejar la sidebar con muchos enlaces puede que no les resulte atractivo o confuso y una imagen vale más que mil palabras.

Este widget es más visual y puedes adaptarlo al estilo del blog.

No siempre la gente encuentra lo que busca dentro del blog, ni en la barra de menú y a veces somos torpes para buscar dentro de las webs, esto es malo porque hay gente que prefieren salir del sitio y volver a buscar desde Google lo que reduce las posibilidades de que vuelvan a dar contigo.

Si les sirves en bandeja contenido apetecible puede que se queden.

Es más ligero y customizable que un plugin

Si tienes un blog en WordPress sabrás que hay muchos widgets que pueden hacer algo parecido, pero son mucho más pesados y o bien se sirven de los más leídos o de categorías concretas.

Quizás los post que quieras promocionar no coinciden con los más leídos o quieres hacer un widget para la sidebar en cada categoría.

Preparando la cuadrícula de post o collage para la sidebar

Creo que las razones para que hagas este widget están más que a la vista, así que lo primero es medir tu sidebar para poner las imágenes lo más adaptadas posible.

Colócate sobre algún elemento y abre el inspector de propiedades web dando clic al botón derecho del ratón y selecciona inspeccionar, verás que te da las medidas de cada elemento, necesitas el ancho, en mi caso la barra es estrecha de algo más de 280px pero si tienes una de 360 px puedes usar una cuadrícula.

Arreglar las imágenes para el widget de tus post favoritos

Este widget queda genial con las imágenes cuadradas, así que si usas instagram puedes aprovechar las mismas fotos reduciéndolas para formar la cuadrícula.

En algunos casos podrás poner 2 o 3 filas. Divide el ancho de tu columna y conseguirás la medida de la imágen, dale un poco más de tamaño si quieres pero hazlo igual en todas, si decides dar 360px a las fotos hazlo en todas.

También puedes hacer el gadget alargado del ancho de la columna con una altura baja, en barras estrechas quedará mejor que en las cuadradas.

Ya que tienes las medidas vamos a un programa de edición que te permita hacer collages como canva o en Photoshop.

Para que te hagas una idea puedes hacer el grid en canva dando tamaño y eligiendo los grid que más te gusten.

Te recomiendo que uses unas líneas divisorias pequeñas, las vas a necesitar ver porque vamos a hacerlo de una manera superfácil.

En este caso he cogido 3 cuadriculas de 4 imágenes para hacerlo de 2 filas.

Puedes subir las imágenes que quieras:

Crear los enlaces de la barra lateral

Cuándo tengas tu imagen lista vamos a una herramienta que crea mapas de imagen online para que te de el código que vamos a insertar.

Vamos a usar esta herramienta: https://www.image-map.net/ porque no requiere registro y es muy fácil de usar, existen otras más avanzadas de pago y se pueden hacer con Photoshop y Dreamweaver pero esta forma es la mejor.

1 Cargar la imágen

Te recomiendo que introduzcas la url de dónde la hayas subido, preferiblemente en tu blog.

2 Añadir la url del post que quieres redirigir

Elije rect que es como te será más fácil arrastrar cuadrados y rectángulos.

Poli es para hacer polígonos con líneas si la forma es irregular, como puedes ver esto da muchas posibilidades creativas.

Pon la Url absoluta y no te olvides del título porque saldrá en los tooltips cuándo pases por encima.

Verás que si pasas sobre la imágen aparecerá un recuadro gris que puedes arrastrar para adaptar a tu foto.

Esta operación la debes hacer con todas las imágenes:

Una vez lo tienes todo puedes seleccionando la imágen que quieras modificar las secciones.

Obtén el código para crear tu widget

Vamos a obtener el código para pegarlo en nuestro blog:

Para añadir el widget de mejores post en blogger:

En la barra lateral añade el widget en el símbolo de añadir

Te saldrán varios tipos de widgets en blogger elije HTML javascript

Pega el código asegurándote de que el origen de tu imagen es correcto.

Guarda y el widget con los post destacados quedaría así:

Ve a Widgets y pega el código en un widget de texto en la parte del HTML, no lo hagas en el widget de HTML porque no funciona siempre.

Pega el código asegurándote de que la dirección de la imagen coincida con la que tu tienes alojada.

Como puedes ver es una forma muy fácil de hacerte un widget con los post que tu quieras y que quede bien organizado, al ser foto no se descabala y el código que usamos es mucho menos.

Se puede hacer foto por foto pero de esta manera puede quedar mejor y puedes aprovechas y hacer collages creativos para tu barra lateral.

Espero que te guste y que lo uses mucho!