Oloblogger

Modificar el aspecto del corte "Más información"

Posted: 15 Feb 2011 07:10 AM PST

Me refiero con el título, al jump-link o corte para leer más, que se puede insertar manualmente en una entrada mediante el correspondiente icono de la barra de herramientas del editor Blogger (pestaña Redactar) y que sirve para mostrar en la página inicio o en las de navegación, sólo una porción de dicha entrada.

Si queremos, también se puede crear ese corte desde la pestaña HTML, tecleando manualmente  Ese conjunto de letras y símbolos que no es más que un comentario de código, no visible, es interpretado por Blogger como un "leer más".

En un principio, la forma más fácil de modificar el aspecto de ese corte es desde Diseño ► Elementos de Página ► Entradas del Blog ► Editar. Ahí podemos configurar unas cuantas cosas y entre ellas, el texto que saldrá al final del resumen y que sirve de enlace para ver el post completo.

En Texto del enlace de la página de entrada es dónde podremos introducir el nuevo texto deseado. Por defecto viene Más información »

Si además queremos crear algún efecto para que cambie el enlace al pasar el puntero por encima de ese texto, ya no nos queda más remedio que echar mano del CSS. Para ello, como siempre, tenemos que insertar las nuevas propiedades antes del cierre del skin (]]></b:skin>).

La clase que controla ese enlace es jump-link y, por ejemplo, para un cambio de color y de tamaño como este...

Más información »

...lo que habría que insertar sería algo así:

.jump-link a {
line-height: 16px;
font-size: 12px;
color: #990000;
}
.jump-link a:hover {
font-weight: bold;
font-size: 16px;
color: #993366;
}

Pero vamos a dar una vueltecita de tuerca más e intentemos cambiar el texto por una imagen. Hemos usado una construída con una tipografía no estándar, pero podríamos hacerlo exactamente igual con cualquier otro tipo de imagen.

Más información »

.jump-link {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZprw362viAC6ZUBT8lPX_sOsufsws8f2X0Lc_gGQlNdWxLUBmZ3EdsZkCpvuGd1AuAVYlkmcS2ksTejilSUckB0YhfKs9rgk_7i-WuyV1oeqLQXNCP0XwzyJkQ2s1SJ_0vS5Xl9GDJ5ip/s400/leermas.gif) no-repeat;}
.jump-link a {
width:140px;
height:30px;
font-size:0px;
display:block;
}

Al ancla (.jump-link a) hay que darle un tamaño (width/height) igual al de la imagen que se quiera utilizar. Para que no salga el texto que por defecto lleva el enlace, le asignamos un tamaño cero. Y por último, el toque mágico del display:block para que la imagen a pesar de carecer de texto, sirva en toda su extensión como link.

Si por último, queremos añadir un efecto rollover con una segunda imagen, sólo tendremos que añadir un poquito más de código:

Más información »

.jump-link a:hover {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSOH3bGY_5AYkGDCW31YwjcZQp8u9PWEk4H9fKoht2G0xNej-EtcoB_jrj2tPAeJ6naIA0a_n5IHf9rfXTiZNhd7VMJbgqTood6hie_DM4OrzV27bNwFGa5OyZX9v4BztYEpJEJD-mIrt3/s400/leermas2.gif) no-repeat;

}