Blog Animando: Menu Horizontal para tu blog

Anuncios

Diseña tu mundo antonio100101 Animaciones Fihnecjovenes

Menu Horizontal para tu blog

Este menú es muy útil y fácil de poner en tu blog, en dos simples pasos lo tendrás funcionando.



Ejemplo del menu:



Para añadirlo a nuestro blog nos situaremos en Plantilla/Edición HTML.
Después de <head> /añadiremos lo siguiente:




<style type='text/css'>
      #chromemenu{
      width: 100%;
      font-weight: bold;
      font-size: 90%;
      }

      #chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
      content: ".";
      display: block;
      height: 1px;
      clear: both;
      visibility: hidden;
      }

      #chromemenu ul{
      border: 5px double #660000;
      width: 99%;
      background-color: #000000; center
      center repeat-x;
      padding: 5px 0;
      margin: 0;
      text-align: left; /*set value to "right" for example to align menu to the left of page*/
      }

      #chromemenu ul li{
      display: inline;
      }

      #chromemenu ul li a{
      color: #cccc66 ;
      padding: 5px;
      margin: 10;
      text-decoration: none;
      border-right: 3px double #660000;
      }

      #chromemenu ul li a:hover{
      background-color: #660000; center
      center repeat-x;
      }

      </style>

(con estos codigos podemos modificar el color y tamaño de nuestro menu)

Una vez guardados los cambios nos dirigimos a; Añadir un elemento de página/HTML Javascript donde añadiremos lo siguiente:




<div id="chromemenu">
<ul>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
</ul>
</div>




Aqui por ultimo vamos a modificar lo que esta de color Naranja agregando la URL del sitio o pagina donde quieramos que nos enlaze y lo que esta en color Rojo  es donde podemos agregar los titulos de las paginas donde enlazamos















No hay comentarios:

Publicar un comentario

Deja tu comentario