Cómo poner una barra de menú en blogger

Fuente: www.kozmica.com

Esta guía es para hacer una barra de menú en blogger como la mía, ya van varias veces que me preguntan cómo hacerlo, y pues aquí les va mi guía. Antes de empezar guarda un backup de tu plantilla por si algo sale mal la puedas recuperar sin problemas.

El objetivo es lograr algo como esto para tu blog:

Para empezar, tienes que tener la opción de añadir más elementos de página en la sección del header, así:

Blogger no nos lo permite por default, pero eso se resuelve fácil, vas a editar HTML de tu plantilla y buscas lo siguiente:

<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>


Donde cambiarás maxwidgets a 2 y showaddelement a yes. Quedando así:

<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’yes’>

Eso va a permitirnos añadir otro elemento arriba o bajo el header.

Lo que sigue es pegar un código en la plantilla para el menú. Esto lo vas a pegar antes de </head>

<!--/* css del menu que va debajo de la imagen de header -->

<style type='text/css'>

.barrademenu {

margin: 0;

padding: 0;

float: left; width: 100%;

font-family: Tahoma;

font-size: 13px;

font-weight: bold;

margin-top: -8px;

border-bottom: 0px solid #4C4646;

border-top: 0px solid #4C4646;

background: #000000;

}

.barrademenu table {display: inline;}

.barrademenu table a, .solidblockmenu table a:visited {

float: right;

padding: 0px 10px;

text-decoration: none;

color: #717D7D;

border-right: 0px solid #4C4646;

outline: none;

}

.barrademenu table a:hover {

color: #FFFFFF !important;

background: transparent #FFFFFF;

outline: none;

}

</style>

En ese código se incluye el estilo que va a tener el menú, puedes alterarle los colores si quieres que son los numeros de 6 dígitos (#000000, ver links al final del post), o usando nombres comunes de colores en inglés (white, blue, pink). Con el código así como está obtienes un menú igual al mio. Trata de jugar con los colores para crear uno que vaya con tu diseño.

Ya que pegaste el código, guardas los cambios y vas a agregar elementos de página, agregas un nuevo gadget tipo HTML/Javascript y en él vas a pegar lo siguiente:

<ul class="barrademenu">

<table border="0" cellspacing="0" width="850">

<tbody>

<tr><td>

<center>

<a href="http://algunastonteriasblog.blogspot.com/" title="”Página de inicio de Algunas Tonterias Blog”">Inicio</a>

</center>

</td>

<td>

<center>

<a href="http://algunastonteriasblog.blogspot.com/2008/01/acerca-de-algunas-tonterias-blog.html" title="”Información acerca del blog.”">Acerca de</a>

</center>

</td>

<td>

<center>

<a href="http://algunastonteriasblog.blogspot.com/2008/01/como-contactar-al-administrador.html" title="”Contáctanos”">Contacto</a>

</center>

</td>

<td>

<center>

<a href="http://algunastonteriasblog.blogspot.com/2008/01/pginas-web-amigas.html" title="”Páginas Web Amigas”">Webs Amigas</a>

</center>

</td>

<td>

<center>

<a href="http://algunastonteriasblog.blogspot.com/search/label/Mini%20Juegos" title="”Probá y Jugá nuestros mini juegos online desde nuestra web!”">Mini Juegos</a>

</center>

</td>

<td>

<center>

<a href="http://www.unforoparatodos.com/foro/" title="”Foro UnForoParaTodos.”">Foro</a>

</center>

</td>

<td>

<center>

<a href="http://www.facebook.com/pages/Algunas-Tonterias-Blog/96483005890?ref=ts" target="_blank" title="Algunas Tonterias Blog en Facebook"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjQGQST5tUPFvHabz6e1nXjwqlr6SR8N68t-vuhj4Xrfa8z0MZzNY240HN9ZqQ55RCLc363X8cvRwu6cJ9oNJrUiAWlNkOVBL2FgQjfDjaGHdHmGxRRnpIep4S3Cwxv7C8qYv4wV5zYqw/s200/facebook.png" img=""/></a>

</center>

</td>

<td>

<center>

<a href="http://twitter.com/alg_tonterias" target="_blank" title="Algunas Tonterias Blog en Twitter"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlXKDUv6l1Wx137y_xLFRRQLvRIfxBXioarlMCMehWt-Ze7DRlyrtsl4ivdZd7DJQYncTA-aX-tqgSSFfCFT32n7EXGplFsDqq2bOMJeKvmKEDsHNcKCQqmVaYgCVj7-X4cEQSRLgmnaw/" img=""/></a>

</center>

</td>

<td>

<center>

<a href="http://feeds2.feedburner.com/AlgunasTonteriasBlog" target="_blank" title="Algunas Tonterias Blog Feed"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKSR_IYe8OU0LkxBeReUn8x7XN7dvWSXAL5PwmAob-AhlxR3YaDEd78LDJHQvVBprbeQBDtQ9TPhmUxO_u2PxeoRrWhmwOTJPeox2iw2-4wi0REl_2Gd5VAWQ1KeTCeIhB5BDR7lnuPpg/s200/feed.png" img=""/></a>

</center>

</td>

<td>

<center>

<a href="http://www.fotolog.com/algunastonterias" target="_blank" title="Algunas Tonterias Flog"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZn9MgSppoVwM7gQwxMBaY49Ue9ntFZp6sEJCezzrFosBJJXcxixLuLv-NHVr7_sTL06J2WmdTZrmB7vGOpPbEPebjCBvgYUDfSxwWLsbuWq7KlsmLm-z3btDcyFmM3J9uPyZv06ku4Vc/" img=""/></a>

</center>

</td>

<td>

<center>

<form id="searchform" action="/search" style="display: inline;" name="searchform" method="get"><input id="search-box" value="Buscar en el blog!" name="q"/><input id="search-btn" value="Buscar!" type="submit"/></form></center>

</td>

</tr></tbody>

</table>

</ul>

Luego deberías cambiar mis datos por los tuyos y listo!

NOTAS:
Para buscar y encontrar algo fácilmente en la plantilla usa Control+F.

Te puede servir:
Web Color Chart / Para cambiar los colores del menú, no olvides el # antes de el código del color.
HTML color codes / Otra web con códigos de color.