9 ago 2014

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?

6 comentarios:

  1. ¡Hola! Muchas gracias por este tutorial ^^

    ¡Muchos besos! :)

    ResponderEliminar
  2. ¡Me funcionó correctamente! Muchísimas gracias.

    ResponderEliminar
    Respuestas
    1. Me alegro que te sirviera, Leila!! Me ecanta la imagen que pusiste, aunque hay muchas cámras xD

      Nos leemos!!

      Eliminar
  3. Que buen tutorial! Está re simple explicado! Cada vez que me quiero poner a editar algo del html tengo que hacer malabares porque todos los tutoriales son viejos y se actualizaron las plantillas y ya no encuentro los códigos!
    No hago entradas muy largas, pero voy a implementarlo para cuando tenga que hacer alguna :P
    Un saludo!! :D

    ResponderEliminar

Gracias por pasar!! Recuerden que un blog se alimenta de sus comentarios ;)

Eso sí, por favor:
*Comenten con respeto, en caso contrario tendré que eliminar el mensaje.
*Avisen si van a decir un Spoiler, así nos ahorramos disgustos.
*Si quieren contactarme, vayan a la pestaña Contacto.

Diviértanse ^.^

¿Te gustó la entrada? ¡Compártela!