Viajar por Europa

octubre 20, 2010

configurar boton "leer mas" para Blogger

Configurar el botón leer mas para Blogger

Poner un boton leer más en blogger

sustituyendo al actual, sencillo pero que es poco amigable. Todos los trucos y consejos están previstos igualmente para las plantillas nuevas. Todos los sitios de ayuda para blogger están enfocados a la plantilla minima, yo lo adapto a la plantilla nueva, así sirve para ambas plantillas de blogger.

El comando "leer mas" es nuevo en Blogger lo cual nos facilita mucho la labor, al tener posibilidad de cortar los spots facilmente. Es muy fácil configurar un boton con la función "leer mas". así se le dá a esta función un aire estilo magazine y más amigable para los usuarios.


Blogger no ha sido práctico al incluir "el boton leer mas", no sé si porque no quiere copiar a Wordpress o porque esta nueva función ha sido instalada, para salir del paso,  estilo chapuza. Le podría haber dado mas protagonismo y realmente haber diseñado un botón. A mi parecer lo podría haber puesto al final de la linea por la que se parte el artículo, o igual que  está situado pero a la derecha, igual que un estilo botón sería mucho más apropiado. La solución dada por Blogger a "leer mas"  ni es práctica, ni elegante para el usuario.

A excepción de poder modificar el mensaje "leer mas" por otro, por ejemplo "ampliar info",  la configuración básica de Blogger no nos permite otra cosa. El comando "leer mas" aparece justo debajo de la cabecera, a la izquieda y con un estilo poco destacado, impersonal. Tenemos que adaptarla y hacer lo que Blogger no hizo. Diseñar un botón leer más que destaque en nuestro blogger y si además le dá un aire señorial mejor.

Accediendo al HTML de nuestro blog podemos modificar la configuración  de "leer mas" que blogger ha incluido, dandole una imagen más amigable, como por ejemplo un botón que destaque el enlace e incluso modificar la situación del nuevo "boton leer mas" a la derecha, con lo que mejoramos un comando que actualmente pasa casi desapercibido.

Voy a explicar lo que he encontrado por la red, pero con la diferencia de que voy a transmitir ésta información paso a paso, para los ecesivamente novatos en Blogger.



Ante todo aclarar que parece ser que este truco para Blogger es indiferente aplicarlo en las plantillas mínimas de Blogger (las antiguas) o en las plantillas modernas (actuales de Blogger). Esto ya es una ventaja, porque la red anda escasa de soluciones para la plantillas nuevas de blogger.

Pasos a seguir para modificar "leer mas" por un botón indicativo:

  1. Descarga la plantilla de tu blogspot con la que estás trabajando en tu ordenador, para tener una copia de seguridad.
  2. Edita el HTML de la plantilla con la que estés trabajando. Casi siempre le doy la opcion "expandir". Ya sabes "diseño", "editar HTML".        
  3. Buscar en la plantilla (control+F), "Buscar" /*Content
  4. Verás en pantalla lo siguiente:
 type="automatic" default="right" value="right"/>
*/
/* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);


  • Ve bajando linea por linea hasta llegar a:

/* Header
----------------------------------------------- */

  • Justo antes de "Header" pega los siguientes comandos de CSS
.jump-link {
background: #FF0084;
padding: 1px 5px;
border: 1px solid #FF0000;
width: 70px;
}
.jump-link a {
color: #FFF;
text-decoration: none;
font-weight: bold;
}
.jump-link:hover {
background: #FF0050;
border: 1px solid #FF0000;
}
.jump-link a:hover{
}

Si quieres saber  más sobre CSS en los comandos que aquí te aparecen te recomiendo w3scholls/css

Solo queda por aclarar tres cosas:

A.- Si el boton con la lectura "leer mas" es corto y quieres incluir otro mensaje dentro , por ejemplo cambias "leer mas" por "ampliar informacion que necesita más espacio, con el valor del comanto width modificas el largo del boton.

B.- Si quieres que el boton "leer mas" te aparezca de bajo de la cabecera pero situado a la derecha en lugar de estar situado como originalmente a la izquierda, añadir justo antes de: jump-link:hover
La siguiente instrucción:

    .jump-link {
    float:right;
    }

C.- Para modificar el color de fondo del boton y el color al que cambia cuando pasas el ratón por encima -Hover- al pulsar el boton "leer mas" no te compliques buscando información de colores y códigos CSS, entra en "diseño" "modificar plantilla" fijate en el código de color de los titulares del blog. Cambia los códigos CSS de los colores en las lineas de "background" con del color de la plantilla de tu blog, así el boton "leer mas" guarda la estética. (He cambiado a estos colores #2288bb y #33aaff en mi plantilla del blog de prueba).

Solo me queda decirte que he probado personalmente en mi blogspot de pruebas esta configuración sobre el comando "leer mas" y funciona con Blogger.


1 comentario:

  1. HOLA AMIGO, INTENTÉ SEGUIR TUS INSTRUCCIONES, PERO NO ME FIGURA "/* CONTENTS", POR LO CUAL NO SUPE DONDE POSICIONARME. TE PEDIRIA POR FAVOR QUE ME AYUDES. SALUDOS Y MUCHAS GRACIAS

    ResponderEliminar

Si haces un comentario procura que no sea anónimo y si estás solicitando algo al menos espero que votes en Google Plus. Saludos.