miércoles, 27 de julio de 2016

Ayuda Bloguera #1: ¿Cómo hacer para poner una imagen en el salto de línea?


¡Hola a todxs! Como saben, diseñar tu blog es una parte muy importante para empezar a tener éxito como bloguero/a, pero editar y trabajar con el código HTML puede ser un gran dolor de cabeza. Por eso se me ocurrió inaugurar una nueva sección de Literatura Express en la que voy haciendo tutoriales muy básicos de lo que yo misma voy aprendiendo para que mi blog esté cada vez más lindo. 

Para empezar con esta sección les traigo un problema muy común que seguro todos han sufrido y es que cuando escribimos una entrada muy larga y no queremos que se vea toda en la página principal, le agregamos un salto de línea. Lo malo es que, si no lo editamos un poco, no es muy visible y para nada llamativo. Hoy te voy a enseñar cómo hacer para que el salto de línea no sólo sea visible sino también hermoso. 


1. Primero, hay que elegir una imagen para usar como salto de línea. Si me preguntan a mí, les recomiendo una página muy buena que diseña botones hermosos (el que uso en mi blog lo encontré allí) y, además, son totalmente gratis: Creative Mindly

2. Una vez que tengan la imagen que quieran usar, deben subirla a algún álbum virtual, como Picasa Web, que les permita acceder a la URL de la foto. 

3. Ahora es tiempo de editar la plantilla: Elegís la opción "plantilla" en el menú que te aparece a la izquierda de Blogger y, antes de modificar nada, haces una copia de seguridad para garantizar que si te equivocas podes volver a la configuración anterior. 

4. Una vez que tengas la copia de seguridad, elegís la opción: "Editar HTML" y te mostrará el código completo de tu blog. 

5. Aprieta CONTROL + F para buscar el siguiente texto: JumpLink 
Debería aparecerte un código que se ve así, el que le indica a Blogger qué hay que hacer cada vez que insertamos un salto de línea o JumpLink: 

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'> <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div> </b:if>


6. Para modificar el código y que, en lugar de que te aparezca el texto "Leer más" o "Seguir Leyendo", te aparezca la imagen que elegiste, tenes que anular la parte del código que está en azul más arriba, cambiándola por esto, para que Blogger no lo lea: 

<!--<data:post.jumpText/>--> 

7. Una vez que anulaste eso ^^, hay que agregarle la imagen con el siguiente código

<img src="DIRECCIÓN_DE_TU_IMAGEN" width="ANCHO" height="ALTO"/></a>

En conclusión, el código quedaría así:

<b:if cond='data:post.hasJumpLink'>

<div class='jump-link'> <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><!--<data:post.jumpText/>--><img src="DIRECCIÓN_DE_TU_IMAGEN" width="ANCHO" height="ALTO"/></a> </div> </b:if>

Ahora, solo tenés que cambiar el texto que está en verde por la URL de la imagen que subiste al álbum virtual en el paso 2 y agregarle el alto y el ancho correspondientes.

¡Espero que les haya sido útil! Comenten con dudas o ideas para próximas entradas de Ayuda Bloguera :)

6 comentarios:

  1. Ay qué maravilla de entrada *_* muchas gracias, voy a intentarlo.

    ResponderEliminar
    Respuestas
    1. ¡Gracias! Yo aprendí a hacerlo hace poco pero es re útil :)
      Saludos!

      Eliminar
  2. Muchísimas gracias por este post! <33

    ResponderEliminar
    Respuestas
    1. ¡De nada, Rocío! Espero que te sirva :)

      Eliminar
  3. ¡Hola!
    Estoy demasiado maravillada con esto que haces, de verdad es una ayuda tremenda para todas las personas que queremos poner nuestro blog un poquito más bonito pero no sabemos como porque se nos da fatal editar html. Bueno, a mi se me da fatal... espero no ser la única ;n;
    Aunque tuve un problema y es que no sé como descargar la imagen de la página que dejaste ;n; lo he estado intentando mucho y no me funciona jnadskj:c si me quisieras ayudar con esto te amaría por siempre.

    Aún así muchas gracias por el post.<3

    ¡Saludos!

    ResponderEliminar
    Respuestas
    1. ¡Hola Emma!
      Lo único que hay que hacer para descargar las imágenes de la página que recomendé es llegar a una parte en su entrada en la que aparece un círculo negro que dice "Lo Quiero", solo tenes que apretar ahí y te va a llevar a una página de Google Drive en el que hay que presionar el botón con una flecha que apunta hacia abajo y automáticamente te descarga los archivos.

      Espero que puedas hacerlo :)

      Eliminar