Cómo añadir un menú horizontal a tu página de blogger

Antes de empezar a hacer pruebas con este artículo y vuestro blog os recomiendo que hagáis una copia de seguridad de vuestra plantilla por si falla algo, lo podéis hacer desde la pestaña de edición de plantilla de blogger.

Lo primero que debemos hacer es ir a edicion de plantilla de nuestro blogger y expandimos artilugios. Ahora abrimos el fichero .css como archivo de texto, copiamos el contenido de este y lo pegamos justo encima de la etiqueta ]]></b:skin>. El contenido será algo así:


ul#menu { width: 100%; height: 43px; background: #FFF url("images/menu-bg.gif") top left repeat-x; font-size: 0.8em; font-family: "Lucida Grande", Verdana, sans-serif; font-weight: bold; list-style-type: none; margin: 0; padding: 0; }



ul#menu li { display: block; float: left; margin: 0 0 0 5px; }



ul#menu li a { height: 43px; color: #777; text-decoration: none; display: block; float: left; line-height: 200%; padding: 8px 15px 0; }



ul#menu li a:hover { color: #333; }



ul#menu li a.current{ color: #FFF; background: #FFF url("images/current-bg.gif") top left repeat-x; padding: 5px 15px 0; }




Lo siguiente que debemos hacer es alojar las imágenes de nuestro menú en un servidor para poder utilizarlas en nuestro blog.

Una vez subidas nuestras imágenes, tendremos que cambiar en el código que hemos añadido anteriormente, donde pone URL de la imágen por la dirección donde las hemos subido. En mi caso por ejemplo es algo parecido a:


ul#menu li a:hover { color: #333; background-image: url("http://tecnoloxiaxa.googlepages.com/botonplasticoamarillo.gif") ; }


Ya sólo nos queda un paso, una vez que hemos definido el estilo de nuestro menú, solo nos faltará añadirlo a nuestro blog. Entre las etiquetas , añadimos el siguiente código:


<ul id="menu">

<li><a href="#" title="">Pagina1</a></li>

<li><a href="#" title="">Pagina2</a></li>

<li><a href="#" title="">Pagina3</a></li>

<li><a href="#" title="">Pagina4</a></li>

<li><a href="#" title="">Pagina5</a></li>

</ul>


Cada fila será un apartado del menú por lo que podréis añadir y eliminar las que queráis. Por último sustituir "#" por la dirección de la página a la que queréis que vaya el enlace de cada apartado y "PaginaN" por el texto que quieres que aparzca en cada opción. De esta forma ya tendréis vuestro menú integrado en blogger

En mi página por ejemplo, el código del menú es:


<ul id='menu'>

<li><a href='http://tecnoloxiaxa.blogspot.com' title='Inicio'>Inicio</a></li>

<li><a href='http://tecnoloxiaxa.googlepages.com/home' target='_blank' title='Manuales'>Manuales</a></li>

<li><a href='http://www.acarballeira.es/joomla/' target='_blank' title='Página departamento Informática A Carballeira'>A Carballeira</a></li>

<li><a href='https://msdn30.e-academy.com/elms/Security/Login.aspx?campus=iesc_info' target='_blank' title='Software Programa ELMS de Microsoft'>ELMS</a></li>

<li><a href='http://tecnoloxiaxa.blogspot.com/2008/06/contacta-conmigo.html' title='Formulario de Contacto'>Contactar</a></li>

</ul>

Fuente:
http://www.ayudaparamiweb.com/2008/08/como-poner-un-men-vertical-en-blogger.html