martes, 10 de septiembre de 2013

Añade Etiquetas de Encabezados Con Efecto Hover a Tu blogger

By andante77 1:14 p.m. , , , , , Leave a Comment
Existen muchas razones de usar etiquetas de encabezado pata definir tus documentos de HTML y provee una estructura en tu pagina o blog.Mas muchos diseñadores han tenido el habito en no usar las Etiquetas de Encabezado,o solo usan uno o dos en un documento o articulo, y usando imagenes, etiquetas de letras, y texto estilizado en su lugar.
Pero cuando usas etiqueta de encabezados ,esto te ayuda con el SEO, con la accesibilidad,y con la estructura general de tu pagina.Etiquetas de encabezado hace tu articulo elegante en el cual los lectores pueden dar lectura a tu contenido propiamente.Te mostrare los siguientes Etquetas de encabezado hechas con puro  CSS.Vamos a añadirlo.


Añadir Etiqueta de Encabezado a Blogger


  1. Selecciona cualquier de los encabezados de abajo.
  2. Copie el codigo de la Etiqueta de Encabezado
  3. Entre luego a la Cuenta de Blogger > Deseño > Editar HTML.
  4. Encuentra la etuqueta ]]></b:skin>
  5. Añade el codigo de abajo seleccionado antes de esta etiqueta ]]></b:skin>.

Encabezado 1





Lorem Ipsum Dolor Sit Amet
.hb1{
color: #6600FF;
font-size: 20px;
background: #BCF5A9;
margin: 0px 0px 5px;
padding: 3px 0 6px 10px;
border-left:4px solid #FF0000;
}
.hb1:hover {
background:#f2f2f2;
)

Encabezado 2



Lorem Ipsum Dolor Sit Amet


.hb2{
color: #000;
font-size: 20px;
font-family:Verdana;
background: #fff;
margin: 0px 0px 5px;
padding: 3px 0 3px 10px;
border-left:4px solid #FF0000;
}
.hb2:hover {
background:#F6CECE;
}



Encabezado 3




Lorem Ipsum Dolor Sit Amet


.hb3{
background:#FFFFFF;
font-weight: bold;
font-family:consolas;
font-size:19px;
color:#FA5858;
text:1px 1px 1px #AAA;
border-bottom:4px solid #Ff0000;
-moz-border-radius:0 0 6px 6px;
-webkit-border-radius:0 0 6px 6px;
border-radius:0 0 6px 6px;
-moz-box-shadow:1px 1px 22px #AAA;
-webkit-box-shadow:1px 1px 2px #AAA;
box-shadow:1px 1px 24px #AAA;
text-transform:capitalize;
display:block;
width:96%;line-height:1;
margin:6px 3px;
padding:4px 10px}
.hb3:hover {
background:#E0E0F8;
}


Encabezado 4





Lorem Ipsum Dolor Sit Amet


.hb4{
font-size:20px;
padding:5px;
font-family:consolas;
color:#0000FF;
text:1px 1px 1px #333;
background:#CEF6CE;
border-left:20px solid #FF0040;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
}

Como Usarlos En los Articulos en Blogger ? 

1.Entra en el Editor de Articulos
2. Cambia la etiqueta en el Editor HTML.
3.Pega el codigo de abajo
<div class="YOUR HEADLINE CLASS ejemplo hb1">Escribe el Texto de Encabezado Aqui</div>


Como Ejemplo -si usas este codigo -
<div class="hb4">Escribe el Texto de Encabezado Aqui</div>


Entonces el resultado sera el siguiente:

Lorem Ipsum Dolor Sit Amet

Esperando que estos etiquetas de encabezados,te sean de ayuda para estructurar positivamente el contenido de tus articulos estructuradamente y con animacion. 
If You Enjoyed This, Take 5 Seconds To Share It

0 comentarios:

Publicar un comentario