En este Tutorial les mostrare un interesante barra de navegacion con efecto de css de subrayado en color azul navy, ademas te dire como añadirlo a tu blog de blogger.Este menu trabaja excelente en la mayoria de los navegadores actuales.Puedes enlazar en este la mayoria de tus paginas principales e importantes de tu blog.Se preparo este Menu fabuloso usando los codigos de Css3 y HTML.Ejemplo:
Demostracion
Ahora vamos a instalarlo en blogger siguiendo estos pasos.
1.Entra a tu cuenta de blogger
4. Encuentre la siguiente etiqueta ]]></b:skin> usando Ctrl+F
5. Pegue el siguiente codigo antes de el etiqueta ]]></b:skin>
/* El codigo de CSS para el menu comienza ciudadblogger.info */
#arrowunderlinecbt{
list-style-type:none;
margin:0;
padding:0;
text-align:center;
font: bold 16px Georgia;
}
#arrowunderlinecbt li{
display:inline;
margin-right:25px;
}
#arrowunderlinecbt li a{
position:relative;
color:navy;
padding-bottom:8px;
text-decoration:none;
}
#arrowunderlinecbt li a:hover{
border-bottom:3px solid #F22C1A;
}
#arrowunderlinecbt li a:hover:after{
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:-5px;
bottom: 0;
border-width:5px;
border-style:solid;
border-color: transparent transparent #F22C1A transparent;
}
#arrowunderlinecbt{
list-style-type:none;
margin:0;
padding:0;
text-align:center;
font: bold 16px Georgia;
}
#arrowunderlinecbt li{
display:inline;
margin-right:25px;
}
#arrowunderlinecbt li a{
position:relative;
color:navy;
padding-bottom:8px;
text-decoration:none;
}
#arrowunderlinecbt li a:hover{
border-bottom:3px solid #F22C1A;
}
#arrowunderlinecbt li a:hover:after{
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:-5px;
bottom: 0;
border-width:5px;
border-style:solid;
border-color: transparent transparent #F22C1A transparent;
}
6. Entra de nuevo en cuenta blogger y da click en Diseño
7. Da Click Añadir un Gadget y selecciona 'HTML/Javascript
8. Pega el codigo de abajo.
<div id="arrowunderlinecbt">
<ul>
<li><a href="#"><span>Pagina Principal</span></a></li>
<li><a href="#"><span>Descargar</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>Sobre Autor</span></a></li>
<li><a href="http://www.ciudadblogger.info/"><span>Contactenos</span></a></li>
</ul>
</div>
<ul>
<li><a href="#"><span>Pagina Principal</span></a></li>
<li><a href="#"><span>Descargar</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>Sobre Autor</span></a></li>
<li><a href="http://www.ciudadblogger.info/"><span>Contactenos</span></a></li>
</ul>
</div>
Reemplace # con tus enlaces.
9. Luego para finaliazar guarda la HTML/Javascript'.
Todo esta listo..
0 comentarios:
Publicar un comentario