Cómo incluir un menú sencillo en Blogger

El menú que se muestra en la cabecera de este blog es la primera aportación al mismo en cuanto a modificación de código se refiere. Bien, veamos los pasos a realizar para conseguirlo.

  Lo primero que hacemos es dirigirnos al panel de administración de nuestro blog, diseño y pulsamos sobre añadir un gadget.

  

  Se nos abrirá una ventana con diversos gadgets ya disponibles. En nuestro caso no elegiremos ninguno de esos si no que elegiremos hacerlo desde código html o javascript. 

  
  Nos aparece una ventana en la que ponemos título al gadget que estamos creando y un espacio en el que escribir el código. El código de nuestro menú en html sería el siguiente:

  <div id='menu'>
<ul>
<li><a href='http://underdaw.blogspot.com.es/search/label/apache'><span>Apache</span></a></li>
<li><a href='http://underdaw.blogspot.com.es/search/label/desarrollo'><span>Desarrollo</span></a></li>
<li><a href='http://underdaw.blogspot.com.es/search/label/Desarrollo%20Web'><span>Desarrollo Web</span></a></li>
<li><a href='http://underdaw.blogspot.com.es/search/label/Despliegue%20de%20aplicaciones%20web'><span>Despliegue de aplicaciones web</span></a></li>
<li><a href='http://underdaw.blogspot.com.es/search/label/php'><span>php</span></a></li>
<li><a href='http://underdaw.blogspot.com.es/search/label/xampp'><span>xampp</span></a></li>
<li><a href='http://underdaw.blogspot.com.es/search/label/javascript'><span>JavaScript</span></a></li>
</ul>
</div>

El código consiste en una lista en la que cada elemento de la lista contiene un enlace. De forma geéneria el contenido de cada enlace sería:

<a href='url a la que se dirige'><span>Texto que se muestra</span></a>

Una vez hecho esto tenemos una lista a la que sólo falta darle un pequeño retoque de css para que se muestre como en la imagen:

  Para introducir el código css vamos desde nuestro panel de administración a Plantilla -> Personalizar -> Avanzado -> Añadir CSS. En el área de texto que aparece ponemos el siguiente código:

  #menu ul{
    background-color:blue;
}
#menu a span{
    color:white;
    font-family:"comic sans ms";
}

Este código accede al id 'menu' que pusimos en el código html cambiándole el color del fondo, de las letras, así como la fuente de la misma.