Lo primero que hay que hacer es editar la plantilla de nuestro blog
El siguiente paso ya dentro del código le damos a las teclas CTRL + F y buscamos la siguiente línea de código
Cuando encuentres el código, luego de seguida vas encontrar un código parecido con el siguiente, que tendrás de modifícalo, dejando de la siguiente forma:
(maxwidgets=´10´ showaddelement=´yes´
Locked=´false´)
El siguiente paso es crear el menú; le voy a dejar un menú de ejemplo que lo pueden modificar a vuestro gusto
...Nav bar desplegale
<div id='navbar'>
<ul id='nav'>
<li>
<a href="https://frioyelectronica.blogspot.com/p/inicio.html">INICIO</a>
</li>
<li>
<a href='https://frioyelectronica.blogspot.com/p/contactame.html'>CONTACTO</a>
</li>
<li>
<a href='#'>Programacion</a>
<ul>
<li><a href='https://frioyelectronica.blogspot.com/p/curso-html.html'>Curso HTML</a></li>
<li><a href='https://frioyelectronica.blogspot.com/p/curso-css-index.html'>Curso CSS</a></li>
<li><a href='https://frioyelectronica.blogspot.com/p/curso-de-php-indice.html'>Curso PHP</a></li>
<li><a href='https://frioyelectronica.blogspot.com/p/curso-sql-indice.html'>Curso SQL</a></li>
</ul>
</li>
<li>
<a href='#'>Refrigeracion</a>
<ul>
<li><a href='https://frioyelectronica.blogspot.com/p/curso-de-refrigeracion-industrial-index.html'>Curso de Refrigeración Industrial</a></li>
<li><a href='#'>Refrigeracion</a></li>
</ul>
</li>
<li>
<a href='#'>Electronica</a>
<ul>
<li><a href='https://frioyelectronica.blogspot.com/p/curso-de-electronica.html'>Curso de Electrónica Básica </a></li>
<li><a href='https://frioyelectronica.blogspot.com/p/curso-electricidad-index.html'>Curso de Electricidad </a></li>
<li><a href='#'>Temas de Electricidad </a></li>
</ul>
</li>
<li>
<a href="">Blogguer</a>
</li>
<li>
<a href="https://frioyelectronica.blogspot.com/p/1-pagina.html">Sobre Mi</a>
</li>
</ul>
</div>
Después del menú creado se van a bloguer -> diseño -> nuevo gadget e implantan un gadget nel local onde quedan el menú
Nota el gadget tiene de ser tipo HTML/JavaScript para poder implantar el código
Estilos del navbar
Con los pasos anteriores concluidos, solo nos falta poner los estilos a nuestro navbar
Editamos la plantilla de nuestro blog con HTML
adentro del código clicamos las teclas CTRL+F para buscar el siguiente código:
Por encima de esos elementos copiamos el código que tenemos a continuación y lo pegamos ahí
/** Navegación bar**/ #navbar { background: #bdbfbf; width: 900px; color: #d8f602; margin: 0px; padding: 0; position: relative; border-top:0px solid; height:35px; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; border-left:1px solid #333; border-right:1px solid #333; height:35px; } #nav li a, #nav li a:link, #nav li a:visited { color: #FFF; display: block; font:normal 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; } #nav li a:hover, #nav li a:active { background: #023d90; color: #0a0a0a; display: block; text-decoration: none; margin: 0; padding: 9px 12px 10px 12px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 160px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -25px 0 0 161px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #023d90; width: 150px; color: #FFF; display: block; font:normal 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; z-index:9999; border-bottom:1px dotted #333; } #nav li li a:hover, #navli li a:active { background: #70b6bd; color: #FFF; display: block; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; }
Si no hubo errores debe funcionar, como estás viendo el mío lo tengo con ese código
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias