FOLLOW ME!

SOCIAL NETWORK

AFILIAME
Not A Single Song
Para más botones, haz clic aquí

Personalizar enlace de "sigue leyendo"

8 abr. 2012


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.
¿Qué es el enlace 'sigue leyendo'?
Lo puedes ver en el 90% de mis entradas y 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.
¿Cómo lo pongo en mis entradas?
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 cambiarlo y que ponga 'seguir 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. 
¿Cómo personalizarlo?
Si quieres personalizar un poco el link, te vas a la pestaña Plantilla, te metes en la Editar HTML, haces clic en la caja del código y aprietas CTRL+F para que te salga el buscador, buscas ]]></b:skin> y antes de ello, pegas lo siguiente y si quieres puedes modificar lo que está marcado.
.jump-link {
float: center;  /* Alineación */
background: #ff0000; /* Color de fondo */
border: 1px solid #ffffff;  /* Grosor y color del borde */
padding: 2px 2px;
}
.jump-link a {
color: #ffffff; /* Color del link */
text-decoration: none;
}
.jump-link:hover {
background: #000000; /* Color de fondo al pasar el cursor */
border: 1px solid #fffff; /* Grososo y color del borde al pasar el cursor */
}

¿Y si quiero reemplazar el link por una imagen? 
1. Te vas a ir a la pestaña Plantilla de tu blog y te vas a meter en Editar HTML. Primero que nada, haces clic en la caja del código y luego abres el buscador (CTRL+F) y ahi buscas: <data:post.jumpText/>
2. Y a eso lo reemplazas por <img src="URL de la imagen"/> , pero aún no guardes los cambios.

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!

12 comentarios :

  1. Lo entiendo a la perfección :) Ahora lo hago, grax! :)

    ResponderEliminar
    Respuestas
    1. Fantástico Yoaa :) Me alegra que te haya servido! Besotes!

      Eliminar
  2. Me encanta, ya que tienes mi pedido, lo podrías hacer o ya lo hago yo cuando me lo entregues?

    Gracias.

    ResponderEliminar
    Respuestas
    1. Si, claro yo te lo hago si así lo quieres :)

      Eliminar
    2. Si por favor.
      Muchas gracias <3

      Eliminar
  3. Gracais Katie. Amo tu blog, la verdad me sirvió mucho!!

    ResponderEliminar
  4. gracias esta precioso leer más amo tu blog sigue siendo genial....Un besote :*

    ResponderEliminar
  5. En la plantilla True Colors no sirve. ¿Cómo puedo ponerlo?

    ResponderEliminar
    Respuestas
    1. Si que sirve, lo que pasa es que ya está puesto y tenes que reemplazar la imagen.

      Abri el blog, copia el URL de la imagen de 'sigue leyendo' que ya sale (para copiarlo, clic derecho - copiar URL de la imagen) y anda al código, tilda la casilla de expandir artilugios, abri el buscador y pega el link de la imagen, te va a salir.. reemplazas el link y ya está :)

      Eliminar
  6. hola!!! lo he intentado para el blog, pero busco en lo de ctl+f y me aparece que no existe con lo de como puedo hacer para que me aparezca??

    ResponderEliminar