lunes, 1 de julio de 2013

Añadir Barra de Menu de Navegacion Delgada a Tu Blog de Blogger

By andante77 11:39 a.m. , , , Leave a Comment
Anadir barra de navegacion de menu liviano a blogger
En este tutorial te explicare como añadir un delgada y liviana estilizada barra de navegacion con Css3 y Html a tu blog de blogger. Este menu trabaja muy bien con la mayoria de los navegadores de internet modernos. Puedes enlazar tus paginas principales usando esta barra de navegacion.Este es muy facil de añadir a tu blog de blogger solo sigue estos simples pasos.

Chequea Como Añadir Menu Estilo Cinta a tu blogger

Ejemplo:Ver ejemplo da click en boton de demostracion

1.Entra en tu cuenta de Blogger
2.Selecciona Plantilla

3. Da Click en Boton de EDITAR HTML

4. Encuentra la siguiente etiqueta ]]></b:skin> usando Ctrl+F   

5.Pegue el codigo de abajo antes de la etiqueta ]]></b:skin>
/* El Codigo CSS para el menu empieza aqui ciudadblogger.info */
 #rincon_litemenu {
 width:800px;
 background:#166bea; 
 border-bottom: 5px solid #993300; 
 border-top: 1px solid #e14d09; 
 clear: both; 
 overflow: hidden; 
-moz-box-shadow: 2px 3px 5px #000000;
-webkit-box-shadow: 2px 3px 5px #000000;
box-shadow: 2px 3px 5px #000000;

border:none 5px #000000;
-moz-border-radius-topleft: 16px;
-moz-border-radius-topright:16px;
-moz-border-radius-bottomleft:16px;
-moz-border-radius-bottomright:16px;
-webkit-border-top-left-radius:16px;
-webkit-border-top-right-radius:16px;
-webkit-border-bottom-left-radius:16px;
-webkit-border-bottom-right-radius:16px;
border-top-left-radius:16px;
border-top-right-radius:16px;
border-bottom-left-radius:16px;
border-bottom-right-radius:16px;

 } 
 #rincon_litemenu ul { 
 float: left; 
 width: 100%; 
 } 
 #rincon_litemenu li { 
 float: left; 
 list-style-type: none; 
 } 
 #rincon_litemenu li a { 
 background:#166bea; 
 color: #fff; 
 display: block; 
 font-size: 14px; 
 padding: 5px 17px 5px 15px; 
 position: relative; 
 text-decoration: none; 
 } 
 #rincon_litemenu li a:hover { 
 background:#002660; 
 color: #fff; 
 } 
 #rincon_litemenu li li a { 
 background: none; 
 background-color: #0d56c4; 
 border: 1px solid #0d408d; 
 border-top-width: 0; 
 color: #fff; 
 font-size: 14px; 
 padding: 5px 10px; 
 position: relative; 
 text-transform: none; 
 width: 130px; 
 } 
 #rincon_litemenu li li a:hover { 
 background: none; 
 background-color: #166bea; 
 } 
 #rincon_litemenu li ul { 
 height: auto; 
 left: -9999px; 
 margin: 0 0 0 -1px; 
 position: absolute; 
 width: 160px; 
 z-index: 9999; 
 } 
 #rincon_litemenu li:hover ul { 
 left: auto; 
 }


6.Entra nuevamente a tu cuenta de blogger y de click en Diseño

7. Da Click en Añadir un Gadget y selecciona HTML/Javascript

8. Pega el codigo de abajo.
<div id="rincon_litemenu">
<li><a href="#">Pagina Principal</a></li>
<li><a href="#">Sub Menu 1</a> 
 <ul>
<li><a href="#"> Menu 1</a></li>
<li><a href="#"> Menu 2</a></li>
<li><a href="#"> Menu 3</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 2</a> 
 <ul>
<li><a href="#"> Menu 1</a></li>
<li><a href="#"> Menu 2</a></li>
<li><a href="#"> Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="http://www.ciudadblogger.info/">Menu 5</a></li>
</div>

Reemplace # con tus enlaces.

9. Luego guarde  HTML/Javascript'.

    Todo ready...

Chequea Como Añadir Menu Iluminado a tu Blog de Blogger
If You Enjoyed This, Take 5 Seconds To Share It

0 comentarios:

Publicar un comentario