Personalizar la etiqueta more

Desde hace unos meses si accedemos por Blogger Draft en nuestro editor de entradas tenemos la opción para ocultar y expandir parte de la entrada, es lo que conocemos como leer más o read more.

A estas alturas todos sabemos que hay un icono en la barra de herramientas que inserta la etiqueta <!-- more -->  nos muestra un enlace de texto justo donde deseamos que la entrada sea resumida. Podemos cambiar ese texto por otro en Plantilla de diseño/Entradas del blog.

Por defecto el texto que se muestra es "Más información" y desde ahí lo podemos cambiar por cualquier otro texto.

También podemos personalizarlo y darle apariencia de botón, para ello nos situamos justo antes de ]]></b:skin> y añadimos unos estilos al enlace.

.jump-link a {

text-decoration:none;

color:#FFFFFF;

padding:5px;

background:none repeat scroll 0 0 #339999;

}

Es posible que muestre borde, sombra  y  esquinas redondeadas añadiendo:

border: 1px solid #ccc;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

-khtml-border-radius: 5px;

-moz-box-shadow: 1px 2px 2px #C0C0C0;

-webkit-box-shadow:1px 2px 2px #C0C0C0;

box-shadow:1px 2px 2px #696969;

filter: progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=120,strength=4); /* IE7 and lower */

O situarlo a la derecha con:

float:right;

Y que muestre un color distinto al pasar el cursor (efecto hover)

.jump-link a:hover {

background:none repeat scroll 0 0 #cc7799;

color:#FFFFFF;

}

Si por el contrario hemos creado una imagen y queremos lucirla en lugar de texto omitimos todo lo anterior y marcamos para expandir la plantilla. 

Buscamos la etiqueta <data:post.jumpText/> que es la que genera los datos del enlace y la sustituimos por:

<img expr:alt='data:olderPageTitle' src='url-imagen'/>

Donde url-imagen lo sustituimos por la url de nuestra imagen que previamente habremos subido a un servidor, una entrada de Blogger es válida, luego eliminamos la entrada conservando la imagen y listo.