2/09/2013

Cambiar el "leer más" en Blogger


"Leer más" o "Read more" es el texto que en las plantillas estilo magazine nos habilita para acceder al texto completo de un artículo haciendo click sobre el mensaje o invitación a entrar. 
Se puede cambiar el texto de ese link por otro o por una imagen, o bien, asignarle un poco de CSS para darle una vista mucho más bonita.

Recuerda que siempre antes de hacer una modificación en tu plantilla debes hacer una copia de resguardo a la que recurrir si algo sale mal.

A- Cambiar el texto por otro lo puedes lograr simplemente expandiendo los artilugios de tu plantilla y buscando mediante "Ctr + F" el texto que figura inicialmente y cambiarlo por otro que sea de tu agrado. Nada más fácil.

B- También es posible que la plantilla esté bien conformada de fábrica y puedas ver el texto que viene por defecto en el enlace y que en español debe decir Más información » . Para cambiar ese texto por otro entra en Diseño y haz click en Editar sobre el elemento Entradas del blog. Ahí cambia el texto Más información » por lo que tú quieras.


 Claro, en este caso el control sobre la tecla de "Leer más" está dado por un parámetro denominado "jump-link" que si está correctamente activo se encuentra en una línea de código como la que sigue y que deberías encontrar antes de  <div class='post-footer'>


    <b:if cond='data:blog.pageType != &quot;item&quot;'>
     <div align='right'> <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> 
      </div>  </div>
    </b:if>
       <div class='post-footer'>

Asi que si te funciona correctamente y quieres adaptarlo para que luzca más bonito o luzca como un hermoso botón sin necesidad de una imagen, debes definir el CSS para él. Entonces entra en Plantilla | Edición de HTML y pega por ejemplo antes de ]]></b:skin> lo siguiente:

 .jump-link {
float:right;
background: #04B4AE; /* Color de fondo */
border: 1px solid #000;
font-weight: bold;
padding: 1px 2px;
margin-left:20px;
}
.jump-link a {
color: #FFF; /* Color del texto */
text-decoration: none;
font-weight: bold;
}
.jump-link:hover {
background: #045FB4; /* Color de fondo al pasar el cursor */
border: 1px solid #000;
text-decoration:none;
}

Te va a quedar algo así:


Claro que hay cientos de maneras de hacerlo y es el amigo Oloblogger quien nos da algunos ejemplos muy interesantes en su entrada sobre el tema que puedes leer aquí http://www.oloblogger.com/2012/03/algunas-ideas-para-el-salto-leer-mas-u.html

Te puedes divertir probando los diferentes tipos de botones que nos recomienda, pero es importante que se encuentre funcionando correctamente el parámetro "jump-link" en tu plantilla.

C- Ahora que si lo que quieres es simplemente cambiar el "Leer más" por una imagen que lo represente, deberás simplemente buscar el siguiente código con los artilugios expandidos:

<a expr:href='data:post.url'> Leer Más</a>

Y remplazalo por este:

<a expr:href='data:post.url'> <img src="URL de la imagen"/></a>

Y eso sería todo lo que habría que hacer. Solo tienes que cambiar donde dice URL de la imagen por la dirección de la imagen que quieres poner, recuerda que tiene que ser pequeña para que se vea bien.

Listo..

A lucharla.

Las fuentes de información de gente que sabe y armaron este post son :
 http://ciudadblogger.com/2009/11/personalizar-enlace-de-leer-mas.html
http://www.oloblogger.com/2012/03/algunas-ideas-para-el-salto-leer-mas-u.html
http://softnex.blogspot.com.ar/2010/03/como-cambiar-el-leer-mas-por-una-imagen.html

1 comentario:

  1. Buenas,
    Quisiera saber como hacer que al cambiarlo por una imagen, esta salga a la derecha?
    Muchas gracias por la ayuda de antemano

    ResponderEliminar

Nota: solo los miembros de este blog pueden publicar comentarios.