domingo, 7 de julio de 2013

Añadir Menu de Navegacion Jungle Con Css A Blogger

By andante77 1:42 p.m. , , , , Leave a Comment
Menu Jungle Con Css Para Blogger

En este articulo compartire un excelente y divertido ademas de atractivo menu de navegacion para blog de blogger.Este contiene el efecto cuando pasas el cursor sobre el mismo cambia de color rojo.Es muy simple ademas de anadir a tu blog.

Estos son los pasos para integrarlo en tu plantilla de blog de blogger.

1.Entra en tu cuenta de blogger.
2.Escoje el blog donde lo vas a insertar ,luego selecciona plantilla>>Editar Html
3.Una ves en Editar Html da click en editor de html y usa las Ctrl y F para buscar la siguiente etiqueta 
]]></b:skin>
4.Copia y pega el codigo de abajo arriba de la etiqueta ]]></b:skin>
#menu2{
 width:90%;
 margin:25px auto;
}
#menu2 ul{
 list-style:none;
}
#menu2 li{
 display:block;
 float:left;
}
#menu2 li a{
 background:#979797 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4mluoShBJ0PBDFUrc9Y5WKAyigi22UqhBCNSbggT2LKQ0vRxD_9DTYz5yluOOTvFEbU6NM1r2p4Z5Vb9RFzC5h8evOYLTQD89mChWJf5O0RQQjM5uawfvelnH9byNzeKla_dmS2pMhMbp/s1600/menu_bg.gif) repeat-x;
 border:2px solid #939393;
 margin:0 1px;
 padding:15px 15px 15px 15px;
 display:block;
 float:left;
 color:#fff;
 text-transform:uppercase;
 text-decoration:none;
 font-family:Geneva, Arial, Helvetica, sans-serif;
 font-size:13px;
 font-weight:bold;
 height: 50px;
}
#menu2 li a span{
 color:#636363;
 font-size:10px;
 text-transform:lowercase;
 font-family:Geneva, Arial, Helvetica, sans-serif;
 font-weight:normal;
}
#menu2 li a:hover{
 background:#e46825 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKuLbUIDc7zv1LwGli2yUbFhcxMoAdn3T7WB5P0H9kOPweO_TJjkc-okaIHAttBKY-gj9rMsrYvMFvVQL-YloX7ChCSXNgRM4nVmosJoZSih5kvWp-zj8GdxIT-Mh2u_sff4IPgtlt9TG7/s1600/menu_hover.gif) repeat-x;
 border:2px solid #939393;
 text-decoration:none;
}
#menu2 li a:hover span{
 color:#636363;
}
.current{
 background:#bcbcbc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKuLbUIDc7zv1LwGli2yUbFhcxMoAdn3T7WB5P0H9kOPweO_TJjkc-okaIHAttBKY-gj9rMsrYvMFvVQL-YloX7ChCSXNgRM4nVmosJoZSih5kvWp-zj8GdxIT-Mh2u_sff4IPgtlt9TG7/s1600/menu_hover.gif) repeat-x;
 border:2px solid #aeaeae;
 margin:0 1px;
 padding:15px 15px 15px 15px;
 display:block;
 float:left;
 color:#fff;
 text-transform:uppercase;
 text-decoration:none;
 font-family:Geneva, Arial, Helvetica, sans-serif;
 font-size:13px;
 cursor:pointer;
 font-weight:bold;
 height: 50px;
}
.current span{
 color:#636363;
 font-size:10px;
 text-transform:lowercase;
 font-family:Geneva, Arial, Helvetica, sans-serif;
 font-weight:normal;
}

5. Ve a blogger y da click en Diseño

6. Da Click Añadir un Gadget y selecciona 'HTML/Javascript

7. Pega en espacio el codigo de abajo
<<!--Empieza Menu-->
<div id="menu2">
 <ul>
  <li class="current">Pagina Principal<br /><span>te lleva a<br /> Pagina Principal</span></li>
  <li><a href="#">Sobre Autor<br /><span>te lleva a<br />pagina de autor</span></a></li> 
  <li><a href="#">Productos<br /><span>te lleva a<br />pagina de productos</span></a></li>
  <li><a href="#">Asociados<br /><span>te lleva a<br />pagina asociados</span></a></li> 
  <li><a href="#">Contactanos<br /><span>te lleva a<br />pagina de contacto</span></a></li></ul>
</div><!--    Termina Menu-->

Reemplaza # con tus enlaces en la distintas paginas de este menu.

7. Ahora Guarda la HTML/Javascript'.

    Todo listo tus visitantes disfrutaran de menu atractivo y con efecto animado en tu blog...
If You Enjoyed This, Take 5 Seconds To Share It

0 comentarios:

Publicar un comentario