Home » , » Tutorial-Blogger dale un poco de estilo al boton de leer mas

Tutorial-Blogger dale un poco de estilo al boton de leer mas





suscribete seguiremos subiendo mas tutoriales para que mejores tu blog
  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"/>

  • 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 agregarle un boton como el de mi blog solo hai que remplazar los codigos  CSS de background osea remplaza este codigo #FF0084;


por este-->   


background:url(http://photos4.media.pix.ie/46/B8/46B83923349847E8BE53E8F5EF44AC82-0000341425-0002237810-00400L-71B7621298EE417CAC09D4F042A96473.gif);


y este codigo #FF0050;


por este-->    


background:url(http://photos4.media.pix.ie/71/9E/719EBA70CF36425C8F478BF9BD086BC6-0000341425-0002237812-00400L-ECE38C8FAD504B4DA82D2358D8ACB1C3.gif);

Solo queda por aclarar tres cosas:

A.- Si el boton con la lectura "leer mas "  es corto y quieres incluir otro mensaje dentro de dicho boton, 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, aqui pudes encontrar muchos. 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).




¿no entendiste nada ?
asmelo saber y deja tu comentario yo con gusto dare respuesta

Like us on Facebook
Follow us on Twitter
Recommend us on Google Plus
Subscribe me on RSS