Tutorial: Como poner un "Leer más" con imagen

  Esta es una sección en la que publicaré tutoriales, ya sea con códigos  o no (además de trucos), para modificar y/o agregar cosas a sus blogs.

   En el menú del blog, en Secciones, pueden encontrar la pestaña "Trucos, códigos y más...". Allí hay una lista de las entradas de la sección, que se publicarán semanalmente los sábados (:

Como poner un Leer más con imagen

Ya les había comentado la semana pasada que los Tutoriales Aclarativos fueron para poder realizar este pequeño tutorial sin problemas. Porque aunque no es complicado, requiere editar la plantilla con códigos.

Una vez que tengan decidida la imagen a usar en lugar del texto Leer más, Seguir leyendo, Más información, etc. (Si no sabes lo que es un “Leer más” pásate por aquí, donde lo explico), súbanla. Puede ser en un sito como Imageshack o directamente subirlo a Blogger. En mi caso tengo una entrada en borrador donde subo las imágenes que necesite y de ahí saco la url.

Cuando ya tengan la url de su imagen vayan a su blog y luego a Plantilla à Editar HTML. No se olviden de guardar una copia de resguardo ;)

En la Plantilla busquen este código (click en la Plantilla y Ctrl+F):  

<data:post.jumpText/>

Ahora tienen que borrarlo y remplazarlo por este otro:

 <img  src='aquí la URL de la imagen'/>

Simplemente tienen que poner la url de la imagen. En el caso de querer ajustar el ancho únicamente tienen que decidir cuántos píxeles y poner lo siguiente:

<img  src='aquí la URL de la imagen'/ width='180px'  />

Por defecto, el Leer más o la imagen está a la izquierda pero si les gusta más a la derecha o en el centro solo tienen que agregar estos códigos:

● Para centrar.

<center><img  src='aquí la URL de la imagen'/ width='180px'  /></center>

● Para alinear a la derecha.

<div align="right"><img  src='aquí la URL de la imagen'/ width='180px'  /></div>

Por último, cuando quieran poner el salto para el "Leer más" en su entrada, solo tienen que hacer click en el siguiente ícono y allí donde hayan seleccionado se hará el salto. La ventaja es que ustedes deciden donde cortar la entrada:

Aclaraciones. Si tienen un nivel básico de inglés se habrán dado cuenta el porqué de agregar esas palabra, pero por si acaso lo explico. Además, cuando estén trabajando en HTML con algún gadget pueden aprovechar esto y:

*Si es una imagen ajustarle el ancho y el alto a gusto.

*Si es texto alinearlo a izquierda, derecha o centrarlo.

*A determinadas palabras o frases ponerlas en negrita o cursiva.

Width = significa ancho en inglés.

Height = significa alto en inglés

Center = Significa centro en inglés y por eso lo usamos para “centrar” la imagen.

Right = Significa derecha en inglés y por eso lo usamos para “alinear a la derecha” la imagen

Left = Significa izquierda en inglés y por eso lo usamos para “alinear a la izquierda”. En este caso, por defecto, blogger lo tiene a la izquierda y por eso no nos vemos en necesidad de usarlo.

b = Se utiliza para poner en negrita determinada palabra.

i = Se utiliza para poner en cursiva determinada palabra

¡Y nunca está de más saberlo! Estamos editando en HTML la plantilla y en HTML, las etiquetas se abren con estos símbolos <> y se cierran con los mismos más una barra antes de la palabra </>

Por ej: <center></center>   o   <b></b>

 

Eso fue todo por hoy, ¡espero les sirva!

Y ya que estamos… ¿les gusta mi Seguir leyendo con imagen?