Blog Animando: Menu horizontal para tu blog

Anuncios

Diseña tu mundo antonio100101 Animaciones Fihnecjovenes
Mostrando entradas con la etiqueta Menu horizontal para tu blog. Mostrar todas las entradas
Mostrando entradas con la etiqueta Menu horizontal para tu blog. Mostrar todas las entradas

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