Tutorial: Personalizar enlace de "Sigue leyendo"

Click en "Sigue Leyendo" para ver el Tutorial...

Primero lo primero, ya que en este tutorial explicaré como personalizarlo pero por si no sabes ni siquiera como se pone el enlace te lo explico rapidamente.

El enlace de "Seguir leyendo" es como el que tengo yo que permite "ocultar" una parte de la entrada para continuar leyendo tras hacer clic en un link. Personalmente me resulta muy útil ya que, como subo muchas imágenes al blog, eso hace que las mismas no aparezcan en la portada principal del blog y este no tarde tanto en cargarse.

Ponerlo en tus entradas es muy sencillo. Cuando estés escribiendo (o bien cuando ya hayas terminado) sólo tienes que situarte donde quieres que se produzca el corte y apretar el icono que te señalo a continuación.

Cuando le hayas hecho clic, te aparecerá una especie de línea divisora. Lo que quede debajo de la misma es lo que aparecerá cuando pinches en "Seguir leyendo".

Ahora si te vas a tu blog, te aparecerá por defecto que ese link dice "Más información". Si tu sólo quieres cambiar el link por "Sigue leyendo" u otra cosa sólo tienes que ir a la pestaña "Diseño" de tu blog y hacer clic en "Editar" en el elemento "Entradas del blog". Y modificas lo que dice "Texto del enlace de la página de entrada". Luego guardas los cambios y ya. 

Si quieres decorar un poco el link, te vas a la pestaña "Plantilla", te metes en la "Edición de HTML" y aprietas CTRL+F para que te salga el buscador, buscas ]]></b:skin> y ANTES de ello, pegas lo siguiente y si quieres, modificas los colores:

.jump-link {
float: center;  /* Alineación */
background: #ff0000; /* Color de fondo */
border: 1px solid #ffffff;  /* Grosor&Color del borde */
padding: 2px 2px;
}
.jump-link a {
color: #ffffff;
text-decoration: none;
}
.jump-link:hover {
background: #000000; /* Color de fondo al pasar el cursor */
border: 1px solid #fffff;
}

Ahora te explicaré como poner una imagen, así como lo tengo yo.

1. Te vas a ir a la pestaña "Plantilla" de tu blog y te vas a meter en la edición de HTML de tu blog. Primero que nada, tildas la casilla de "Expandir artilugios" y luego abres el buscador del explorador (CTRL+F) y ahi buscas lo siguiente:

<data:post.jumpText/>

2. Y a eso lo reemplazas por lo siguiente, pero aún no guardes los cambios.

<img src="URL de la imagen"/>

3. Ya que tengas la imagen que quieres utilizar, la cargas a Tinypic y copias el último de los links que te da, que dice "Enlace directo para presentaciones" y te vas al código de tu blog y reemplazas lo que dice URL de tu imagen por ese link. 

Te aparecerá, por defecto la imagen alineada hacia la izquierda. Pero si quieres centrarla todo lo que tienes que hacer es agregar <center></center> antes y después de la sentencia de la imagen; es decir tiene que quedar así: <center><img src="URL de la imagen"/></center>

Y listo! Si tienes alguna duda, comenta y te ayudaré :) Espero que te haya servido. Besos!

Cartelitos "Sigue Leyendo":

 

Creditos: (X)