domingo, 4 de septiembre de 2016

Ayuda Bloguera #2: ¿Cómo hacer un gadget con mis últimas reseñas?


¡Hola a todxs! Como ya deben saber, diseñar un blog puede ser un gran dolor de cabeza, más aún cuando tenemos que lidiar con el lío que es el código HTML. Por eso se me ocurrió hacer esta sección de Literatura Express en la cual de manera esporádica (porque yo también aprendo sobre la marcha) ir explicando algunos trucos para que puedan agregarle cada vez más cosas a sus blogs. 

La vez anterior expliqué cómo poner una imagen en lugar del texto en el salto de línea y a juzgar por las visitas y los comentarios, a muchos de ustedes les sirvió. Para los que son nuevos y no leyeron la entrada, pueden leerla aquí

Para hoy se me ocurrió enseñarles algo que aprendí a hacer hace muy poco: el gadget de las últimas reseñas que pueden ver en la parte de arriba de mi blog. ¡Espero que les sea útil y puedan usarlo ustedes!
Antes de empezar tienen que decidir si quieren una imagen que diga "últimas reseñas" como tengo yo o si directamente quieren que les aparezcan las portadas de los libros que reseñaron. En caso de que elijan la primera opción lean del punto 1 al 7, y si deciden que no quieren usar la imagen que les digo lean el punto 3, 4, 8 y 9. 

1. Para diseñar la imagen pueden usar cualquier editor, yo suelo usar es PicMonkey porque es online y muy fácil de aprender a manejar. Les recomiendo usar una dimensión de 190px por 190px pero pueden usar las que deseen. 

2. Una vez que tienen esa imagen van a necesitar subirla a algún tipo de álbum web para poder copiar la URL, en mi caso utilicé Picasa Web Album. Lo mismo van a tener que hacer con las portadas de los libros si es que no las suben en las reseñas. 

3. Ahora toca ir a Blogger y en el menú que aparece a la izquierda ir al que dice "Diseño", una vez allí hay que tocar el botón que dice "Agregar un gadget" y elegir la opción HTML. 

4. Bien, lo primero que hay que hacer es centrar la información que va a aparecer, para que quede mucho más estético y ordenado. Una vez que tengan abierto el gadget de HTML escriban esto:
<center></center>

5. Ahora tienen que poner las imágenes, primero la que hicieron en el punto 1. Lo que hay que hacer es poner el siguiente código entre el código que pusimos anteriormente, quedaría algo así: 

<center><img src="URL DE LA IMAGEN" width="ANCHO DE LA IMAGEN" height="ALTO DE LA IMAGEN" /></center>

6. Lo siguiente es agregar las imágenes de las portadas con sus respectivos links de las reseñas que escribieron, mi recomendación es que para esas imágenes usen dimensiones de 190 px de alto por 120 px de ancho. Quedaría algo así:

<center><img src="URL DE LA IMAGEN" width="ANCHO DE LA IMAGEN" height="ALTO DE LA IMAGEN" /><a href="LINK DE SU RESEÑA" target="_blank" title="Reseña"><img height="ALTO DE LA IMAGEN" src="URL DE LA IMAGEN DE PORTADA" width="ANCHO DE LA IMAGEN" / /></a></center>

7. Lo único que tienen que hacer ahora es reemplazar todo lo que está en rojo por lo que que se indica y repetir el paso 6 hasta que estés satisfecho con la cantidad de reseñas que quieras mostrar, siempre teniendo cuidado de ponerlo entre los dos códigos que están en verde. En caso de que quieras que haya un margen de espacio entre las imágenes tenes que agregar &nbsp al final de cada imagen. Quedaría así: 

<center><img src="URL DE LA IMAGEN" width="ANCHO DE LA IMAGEN" height="ALTO DE LA IMAGEN" />&nbsp<a href="LINK DE SU RESEÑA" target="_blank" title="Reseña"><img height="ALTO DE LA IMAGEN" src="URL DE LA IMAGEN DE PORTADA" width="ANCHO DE LA IMAGEN" / /></a>&nbsp</center>

8. En caso de que eligieran no hacer una imagen que diga "Últimas reseñas", una vez que tengan puesto el código verde es hora de empezar a poner las reseñas. Mi recomendación es que usen unas dimensiones de 190 px de alto por 120 px de ancho pero es decisión de cada uno. Quedaría entonces lo siguiente: 

<center><a href="LINK DE SU RESEÑA" target="_blank" title="Reseña"><img height="ALTO DE LA IMAGEN" src="URL DE LA IMAGEN DE PORTADA" width="ANCHO DE LA IMAGEN" / /></a></center>

9. Lo único que tienen que hacer ahora es reemplazar todo lo que está en rojo por lo que que se indica y repetir el paso 6 hasta que estés satisfecho con la cantidad de reseñas que quieras mostrar, siempre teniendo cuidado de poner todo entre los dos códigos que están en verde. En caso de que quieras que haya un margen de espacio entre las imágenes tenes que agregar &nbsp al final de cada imagen. Quedaría así:

<center><a href="LINK DE SU RESEÑA" target="_blank" title="Reseña"><img height="ALTO DE LA IMAGEN" src="URL DE LA IMAGEN DE PORTADA" width="ANCHO DE LA IMAGEN" / /></a>&nbsp</center>

¡Eso es todo! Espero que les haya servido y no dejen de proponer ideas para próximas entradas de Ayuda Bloguera. 

IMPORTANTE: Debido a un par de comentarios creo necesario aclarar que este gadget está diseñado para aparecer en la cabecera de los blogs y no en los gadgets del costado o sidebar, por lo que cuando den por finalizada la edición de su gadget, van a tener que colocarlo debajo del gadget de páginas que hay en sus respectivos blogs (es decir, debajo de la cabecera). ¡Saludos!

17 comentarios:

  1. Holaa!! justo el otro día estaba preguntándome cómo hacer algo así en mi blog jaja muchas gracias por la entrada, me ha servido bastante y voy a ver si puedo hacerlo en mi blog un día de estos:3

    Blessings!!

    ResponderEliminar
    Respuestas
    1. ¡Hola!
      Espero que lo puedas hacer sin problemas :)
      Saludos!

      Eliminar
  2. Hola! Estos tutoriales me sirven tanto cuando se me ocurre remodelar el blog así que volveré a pasar por aquí cuando tenga tiempo de remodelarlo.

    Saludos!!

    ResponderEliminar
    Respuestas
    1. ¡Hola!
      Gracias <3 Se lo difícil que es editar HTML porque yo misma estoy aprendiendo de a poco, pero ánimos que se puede.

      Saludos

      Eliminar
  3. ¡Holaaaaaa!
    OMG, muchas muchas gracias por subir esto, de verdad que es muy útil para las personas como yo que no tenemos mucho talento para esto del html NJKDSFNKJAS:c
    Aunque igual que con la anterior entrada que subiste, tuve un pequeño problema. Es que lo hago todo, pero las imágenes en vez de quedarme hacia el lado me quedan hacia abajo y no entiendo por qué. Nunca he sido la mejor con estas cosas, oc ndsjk.

    De todas formas, muchas muchas muchas gracias.<3

    ¡Cuídate!

    ResponderEliminar
    Respuestas
    1. ¡Hola!
      ¿Cuál es el ancho de sus blogs?
      Tal vez el problema es que están poniendo demasiadas imágenes y no hay lugar, por eso se van hacia abajo. Asegúrense de estar colocando el gadget debajo de las distintas páginas de su blog y no al costado, es decir que una vez que tengan armado el gadget, pasenlo del sidebar a la cabecera.

      Eliminar
    2. Hola, pero con ponga una segunda portada sale hacia abajo

      Eliminar
    3. ¡Hola!
      Acabo de revisar la entrada y corregí una parte del código, tienen que poner todos el código juntos es decir que cuando quieran agregar una nueva imagen pongan el código inmediatamente después del &nbsp sin ningún tipo de espacio.

      Eliminar
  4. ¡Hola!
    pues muy buen tutorial!, seguro que muchas lo van agradecer bastante.
    Pasaré a ver próximas entradas de esta sección, que amo editar jeje
    Un abrazo ♥

    ResponderEliminar
    Respuestas
    1. ¡Gracias Arual!
      Te espero para la próxima :)
      Saludos

      Eliminar
  5. ¡Hola! Me encantan los tutoriales para blogs, siempre lo digo jajaja, pero es la verdad. Porque si no fuera por estos tutoriales mi blog sería una kk D:
    Así que gracias por el tutorial <3
    Un besote.

    ResponderEliminar
    Respuestas
    1. ¡Gracias Cari!
      Yo también aprendí todo por tutoriales de otros blogs jajaja
      Saludos :)

      Eliminar
  6. ¡Hola! La verdad es que suena GENIAL, que buenísima idea tuviste. Lo haré un sábado en la mañana, sin que tenga una montaña de tarea esperándome. XDDDDD ¡Saludos y que tengas un buen día! Precioso blog que tienes. :D

    ResponderEliminar
    Respuestas
    1. ¡Gracias!
      Espero que puedas hacerlo sin problemas :)

      Saludos

      Eliminar
  7. ¡Hola!
    Se que ya comenté aquí pero te vengo a avisar que te nominé como Best Blog http://abramoselmundo.blogspot.cl/2016/09/premio-best-blog.html#more <3
    Te lo iba a comentar en la entrada de Scarlette pero aún no termino Cinder y no me quería hacer spoiler así que hola estoy acá NJKDSFNKJADFNK.

    Me encantaría conocer tus respuestas. c:

    ¡Saludos!<3

    ResponderEliminar
    Respuestas
    1. ¡Gracias Emma! En cuanto tengo un tiempo lo hago :)
      Nos leemos!!

      Eliminar