En este articulo te mostrare añadir efectos a nuestros encabezados en blogger que distingan estos del resto del parrafo.Le añadiremos un efecto animado al encabezado o Hover-cuando pones el cursor del mouse sobre los encabezados estos cambian de color tanto el texto como el fondo del encabezado.Resalta que es un encabezado que es tan importante para los motores de busqueda y los encabezados resumen de lo que trata tu articulo,he aqui de la importancia de hacer los encabezados resaltar.
Compartire contigo unos encabezados con agradable y atractivos estilos hechos con la transicion de Css3.Con Css3 puedes darle a los encabezados un efecto de desvanecer,que anteriormente solo se hacia con Jquery.
Chequea Como Rotar Imagenes 3d con Css3
Los encabezados que te dejare para que puedas personaliztarlos y insertarlos en tu blog de blogger tiene el efecto de cambio o animacion de desvanecerse y otros mas,estos efectos son compatibles con la mayoria de los navegadores conocidos como Firefox, Chrome, Opera and Safari.
De seguro que los visitantes o lectores de tus articulos les encantaran y mejorara la funcion de encabezados y añade estilo a tus articulos.
Paso para añadir estilo atractivo de encabezado con Efectos de Transicion CSS3 en Blogger
Este es un Encabezado Estilo 1 con Efecto de Texto Iluminado.
.post h3 { background: #2E5C11; padding: 10px; color: #fff; font-size: 20px; -webkit-border-radius: 0px 10px 0px 10px; border-radius: 0px 10px 0px 10px; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .post h3:hover { background: #587A43; color: #fff; text-shadow: 2px 2px 10px #f4fff2; filter: dropshadow(color=#f4fff2, offx=2, offy=2); }
Estees un Encabezado Estilo 2 con Efecto cambio de Borde.
.post h3 { background: #7D1064; padding: 10px; color: #fff; font-size: 20px; -webkit-border-radius: 0px 10px 0px 10px; border-radius: 0px 10px 0px 10px; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .post h3:hover { background: #AB1A89; color: #fff; -webkit-border-radius: 10px 0px 10px 0px; border-radius: 10px 0px 10px 0px; }
Este es Encabezado Estilo 3 con Efecto Doble Borde.
.post h3 { background: #E8AA00; padding: 10px; color: #fff; font-size: 20px; -webkit-border-radius: 0px 10px 0px 10px; border-radius: 0px 10px 0px 10px; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .post h3:hover { background: #FFCD42; color: #000; border: 4px double #693F08; }
Este es el Encabezado Estilo 4 con Efecto de Sombra.
.post h3 { background: #1F8399; padding: 10px; color: #fff; font-size: 20px; -webkit-border-radius: 0px 10px 0px 10px; border-radius: 0px 10px 0px 10px; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .post h3:hover { background: #19A1BF; color: #fff; -webkit-box-shadow: 3px 3px 10px 1px #1F8399; box-shadow: 3px 3px 10px 1px #1F8399; }
Este es Encabezado Estilo 5 con todos los efectos anteriores.
.post h3 { background: #C72C6A; padding: 10px; color: #fff; font-size: 20px; -webkit-border-radius: 0px 10px 0px 10px; border-radius: 0px 10px 0px 10px; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .post h3:hover { background: #AD0348; color: #fff; text-shadow: 4px 4px 10px #f4fff2; filter: dropshadow(color=#f4fff2, offx=2, offy=2); border: 4px double #FFCFE2; -webkit-border-radius: 10px 0px 10px 0px; border-radius: 10px 0px 10px 0px; -webkit-box-shadow: 3px 3px 10px 1px #C72C6A; box-shadow: 3px 3px 10px 1px #1F8399; }
Como Usarlo y Personalizarlo:
El proceso para aplicarlo es el siguiente:.
- Entra en Blogger.com -> Plantilla -> Editar HTML
- Busca la siguiente etiqueta ]]></b:skin> (Tip:- Use Ctrl + F para busqueda)
- Arriba de esta etiqueta ]]></b:skin>pegue uno de los codigos arriba de esta y guarda la plantilla..
Luego cuando desees escribir un Articulo y desees utilizar un encabezado encierralo entre la siguiente etiqueta <h3>Encabezado Va Aqui</h3>
Chequea Como Añadir Galeria de Imagenes con Css3
Personalizacion:
1.Para cambiar el color de fondo, altere el codigo resaltado en Marron.- Para cambiar el color de la letra, altere el codigo resaltado en Verde.
0 comentarios:
Publicar un comentario