viernes, 24 de julio de 2009

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="http://1.bp.blogspot.com/_BQ05SdY_Qk0/SgOE90j4JdI/AAAAAAAAAJ8/1KD4Lv0D9Ik/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="http://lh3.ggpht.com/_BQ05SdY_Qk0/Sl9BQf12QsI/AAAAAAAAATc/2kW8gfh88KU/twitter-icon.png" img=""/></a>

</center>

</td>

<td>

<center>

<a href="http://feeds2.feedburner.com/AlgunasTonteriasBlog" target="_blank" title="Algunas Tonterias Blog Feed"><img border="0" src="http://2.bp.blogspot.com/_BQ05SdY_Qk0/SgOE97YJA4I/AAAAAAAAAKE/n7VDnhrlKn0/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="http://lh3.ggpht.com/_BQ05SdY_Qk0/Sl9BQhnBqbI/AAAAAAAAATg/vaf8JKhr8yg/fotolog%2048x48.jpg" 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.

4 comentarios:

  1. hola ise una barra de menu pero todos me llevan al inicio xq pasa eso
    http://animenaruto-musica.blogspot.com/

    ayudame siii

    ResponderEliminar
  2. Hola! Como va?
    Muchas gracias por pasar y dejar tu comentario!
    Visité tu web y me fije en la barra de menú que pusiste! El problema esta en que "musica" y "peliculas" son referencias a la web de inicio "http://animenaruto-musica.blogspot.com/" creo que deberias editar el codigo HTML de esta forma:

    Esta es una parte de tu código HTML actual de la barra de menú:

    <ul class="barrademenu">
        <li><a href="http://animenaruto-musica.blogspot.com/" title="animenaruto-musica/">Inicio</a></li>
        <li><a href="http://animenaruto-musica.blogspot.com/" title="">musica
    </a></li>
        <li><a href="http://animenaruto-musica.blogspot.com/" title="peliculas">peliculas</a></li>
    </ul>

    Ahora, para que muestre tus posts de musica al hacer click sobre "musica" deberias poner esto:

    <ul class="barrademenu">
        <li><a href="http://animenaruto-musica.blogspot.com/" title="animenaruto-musica/">Inicio</a></li>
        <li><a href="http://animenaruto-musica.blogspot.com/search/label/musica" title="">musica
    </a></li>
        <li><a href="http://animenaruto-musica.blogspot.com/" title="peliculas">peliculas</a></li>
    </ul>

    Lo mismo deberias hacer para el de "peliculas" pero todavia no creaste una sección (etiqueta) para eso!

    Espero que esto te sirva!

    Un abrazo!

    Admin de Algunas Tonterias Blog
    http://algunastonterias.com.ar/

    ResponderEliminar
  3. igualmente ahora es mucho mas facil hacerlo en blogger, ya que agregaron las "Paginas": El nuevo diseñador de plantillas de Blogger y Páginas de Blogger

    ResponderEliminar

Podes usar algunos códigos HTML, como por ejemplo:
<a href="http://mipagina.com">nombre de mi pagina </a>

<b>texto en negrita</b>

<i>texto en italica</i>


Si quieren poner algún código HTML pasen por esta web (SimpleCode) y procesen el texto, luego lo copian y lo pegan en el cuadro de comentarios sacandole las etiquetas <code> y </code>

Buscador:

Búsqueda personalizada

Contactanos:

¿Tenes Dudas, Consultas, Ideas o Preguntas?
¿Queres enviarnos algo para que pongamos en el blog?
¿Queres hacer un intercambio de banners? Política de intercambios de links y banners

Mandanos un mail a:
y también agreganos al MSN!!


La web fue creada el 13/02/08 por Juanma! (GreenDay). Hasta el dia de la fecha, la misma contiene mas de 200 Posts con mucho humor, mini juegos, freebies, novedades y muchisimas cosas mas.

Licencia de los posts:
Pueden copiar, distribuir, exhibir y/o ejecutar la obra:
Deben especificar la fuente del post (www.algunastonterias.com.ar)
No pueden usar los posts con fines comerciales.
No pueden transformar o alterar los posts.