Menú en las nuevas plantillas de diseño

Desde que Blogger introdujo en nuestro panel la opción de utilizar las nuevas plantillas de diseño, recibo constantes consultas solicitando la forma de incluir un menú horizontal en las mismas.

A menudo lo que solicitáis es el poder incluir uno de los menús que yo explico en mi blog para las plantillas anteriores, esto me ha hecho darme cuenta de que muchos de vosotros no sabéis que todas las plantillas del nuevo diseñador incluyen la posibilidad de usar su propio menú horizontal.

En realidad las nuevas plantillas incluyen todo el código necesario para utilizar un menú, incluido el CSS que hará que el menú se adapte perfectamente al diseño del blog.

Algunos ejemplos de menús en distintas plantillas de Diseño

Hay dos maneras de incluir el menú horizontal en las nuevas plantillas, utilizando las nuevas Páginas Independientes de Blogger o usando la Lista de enlaces.

Incluir el menú horizontal utilizando la Lista de Enlaces.

[1] Vamos a Diseño en nuestro panel y vemos que debajo de la cabecera hay una opción para incluir un gadget:

[2] Pinchamos para añadir un nuevo gadget y escogemos "Lista de enlaces".

[3] Configuramos el gadget tal como veis en la imagen, dejando vacío el título y el número de enlaces a mostrar y añadiendo los enlaces que se mostrarán en el menú. Podríamos añadir un enlace con la url del blog y el texto "Inicio" por ejemplo y en los demás podremos enlazar una entrada, otro blog o lo que queramos.

[4] Guardamos los cambios al gadget y ya podremos ver como ha quedado el menú. Para añadir más enlaces, lo haríamos editando el gadget que acabamos de configurar y que se mostrará en Diseño debajo del header.

Incluir el menú horizontal utilizando las Páginas estáticas.

[1] Desde Diseño - Editar páginas, añadimos las páginas nuevas que vamos a necesitar que se mostrarán en el menú horizontal.

[2] Una vez editada la página estática, pinchamos en "Publicar página" y se mostrará la pregunta "¿Cómo te gustaría que apareciese el gadget Páginas?", tenemos que marcar entonces la opción "pestañas del blog":

[3] Añadimos tantas páginas como pestañas tendrá nuestro menú y ya será visible en el blog el menú horizontal que mostrará además un diseño acorde con nuestra plantilla.
En Diseño podremos ya ver el gadget "Paginas" debajo del header y desde allí podemos editarlo si lo necesitamos.

Añadir otros enlaces en el gadget de páginas estáticas

Ya hemos visto que desde hace algún tiempo podemos añadir páginas estáticas fácilmente a nuestro blog.
El problema es que una vez añadidas, los enlaces en forma de menú se muestran en el blog, pero solo los enlaces que hemos creado a las páginas estáticas.

Varias personas me han preguntado como añadir en ese mismo menú enlaces a otras páginas que no sean estáticas, por ejemplo una página de etiquetas, a una entrada concreta o incluso a una página externa.

Vamos a ver como hacerlo, pero antes de empezar hemos de tener añadidas las páginas estáticas.

[1] Una vez en nuestro escritorio de Blogger, vamos a Diseño - Edición HTML.

[2] Marcamos la casilla de "Expandir las plantillas de artilugios".

[3] Como ya tenemos añadidas las páginas estáticas, localizamos en la plantilla el gadget que las muestra y que será algo como esto:

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

[4] Una vez localizado, añadiremos los enlaces que necesitamos justo después de </b:loop> tal como vemos en este ejemplo:

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:loop>

JUSTO AQUI AÑADIMOS LOS ENLACES

</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

[5] Los nuevos enlaces los colocamos de esta manera, uno debajo de otro:

<li><a href="DIRECCION_DEL_ENLACE">TEXTO_DEL_ENLACE</a></li>

[6] Usamos "Vista previa" y tendremos que ver algo como esto, los nuevos enlaces a continuación de las páginas estáticas en el orden en que los hayamos ido colocando:

[7] Si todo está correcto, guardamos los cambios.


Nota:

Si lo necesitas, puedes ver como añadir los enlaces en un menú a distintas páginas, entradas, archivos, etc.

Banderas de traducción en el menú

Me preguntan en un comentario:

Tengo en el blog un menú como el que tienes en la parte superior de tu blog, y querría poner unas banderitas para traducir el blog. ¿Podrías decirme como hacer para incluirlas en el menú?

Cualquier menú tendrá una estructura parecida a esta:

<div id="tabsmenu">
<ul>
<li><a href="#"><span>INICIO</span>
</a></li>
<li><a href="mailto:direccion email"><span>CONTACTO</span></a></li>
<li><a href="http://www.blogger.com/"><span>BLOGGER</span></a></li>
<li><a href="http://www.google.es"><span>GOOGLE</span></a></li>
<li><a href="http://elescaparatederosa.blogspot.com/"><span>EL ESCAPARATE</span></a></li>
</ul>
</div>

Como véis en el ejemplo, en este caso es una lista colocada dentro de un <div> así que, como cualquier lista, comienza con la etiqueta <ul> termina con la etiqueta de cierre </ul> y dentro de estas se incluyen los "item" o enlaces del menú, que comienzan con la etiqueta <li> y terminan con la correspondiente etiqueta de cierre </li>.

Para colocar cualquier otro "item" o pestaña nueva en el menú, tendríamos que hacerlo colocando el código correspondiente entre <ul> y </ul>, en el caso de las banderitas de traducción, lo haremos justo antes del cierre (</ul>):

<div id="tabsmenu">
<ul>
<li><a href="#"><span>INICIO</span>
</a></li>
<li><a href="mailto:direccion email"><span>CONTACTO</span></a></li>
<li><a href="http://www.blogger.com/"><span>BLOGGER</span></a></li>
<li><a href="http://www.google.es"><span>GOOGLE</span></a></li>
<li><a href="http://elescaparatederosa.blogspot.com/"><span>EL ESCAPARATE</span></a></li>
<li><a href="URL_DEL_BLOG_TRADUCIDO_A_INGLES">
<img alt="Translate to English" src="URL_DE_IMAGEN_BANDERA_INGLESA" title="Translate to English"/></a><a href="URL_DEL_BLOG_TRADUCIDO_A_POTUGUES"><img alt="Traduzir para o Português" src="URL_DE_IMAGEN_BANDERA_PORTUGUESA" title="Traduzir para o Português"/></a></li>
</ul>
</div>

Procuraremos no usar unas imágenes demasiado grandes para las banderitas o el menú podría desconfigurarse...

Para hacer la traducción del blog, usaremos el servicio de traducción de Google, para ello colocamos la url de nuestro blog allí y una vez traducido al idioma que necesitamos, copiamos la url del navegador y la colocamos en el código donde dice URL_DEL_BLOG_TRADUCIDO_A... el idioma que sea.

Como la url resultante en Google es "enorme" podemos hacer uso de una página online para acortar direcciones como notlong o url(x) entre otras.

También puedes hacerlo desde aquí mismo a través de este pequeño formulario que usa el servicio de TinyURL

Ingresa la URL completa a acortar :

Como añadir los enlaces en un menú

Incluir un menú en el blog no resulta demasiado complicado, especialmente cuando lo añadimos siguiendo las instrucciones de cualquier web de menús o desde alguna de las entradas de mi blog al respecto por ejemplo.

El mayor problema que se presenta y que yo misma he comprobado a través de algunos de los correos que recibo, suele ser a la hora de construir los enlaces del menú, en concreto la pregunta que más se repite es:

¿Como hago para que las pestañas de mi menú lleven a tal o cual página?

Dependiendo del tipo de menú, este constará de códigos distintos para su funcionamiento, pero siempre incluirá el código HTML que será necesario precisamente para la construcción de los enlaces, y que será algo parecido a este código:

<div class="MenuLove">
<div id="Lovenav">
<ul>
<li><a href="url-de_la_pagina" title="cartel_enlace">Inicio</a></li>
<li><a href="url-de_la_pagina" title="cartel_enlace">Enlace_1</a></li>
<li><a href="url-de_la_pagina" title="cartel_enlace">Enlace_2</a></li>
<li><a href="url-de_la_pagina" title="cartel_enlace">Enlace_3</a></li>
<li><a href="url-de_la_pagina" title="cartel_enlace">Enlace_4</a></li>
</ul>
</div>
</div>

Visto así, no es complicado de configurar:

url-de_la_pagina Sustituimos esto por la url de la página o destino que vamos a enlazar.

cartel_enlace Sustituimos por una pequeña descripción, que se mostrará en un cartelito (tooltip) al pasar el ratón sobre la pestaña del menú.

Enlace_1, Enlace_2, etc. Sustituimos por el texto de cada enlace que se verá en el menú.



El problema aparece cuando, a pesar de que sabemos que vamos a enlazar, no tenemos claro como obtener exactamente la url de destino...
Veremos a continuación como conseguir la url de los enlaces más habituales en cualquier menú:

Enlazar una pestaña con la página de Inicio o Home.

Como veis en el código de ejemplo, es el primer enlace que he puesto, allí en lugar de "url-de_la_pagina" es donde colocaríamos la url de nuestro blog.

Enlazar una pestaña con la página de nuestro perfil.

Entramos a la página de nuestro perfil de Blogger y copiamos la url que vemos en el navegador, esa url es la que usaremos en el enlace que dirá "Mi perfil" por ejemplo.

http://www.blogger.com/profile/06743611108067453905

Enlazar una pestaña con una entrada.

Si tenemos añadido en una entrada el formulario de correo, un mensaje de bienvenida, o lo que sea, y queremos enlazar esa entrada concreta en el menú, pinchamos sobre el título de la entrada para que dicha entrada se muestre en su propia página (donde se ven los comentarios debajo de ella) y copiamos la url que vemos en el navegador. Esa es la url que usaremos para enlazar la entrada desde la pestaña correspondiente del menú.

http://elescaparatederosa.blogspot.com/2009/08/manual-blogger-para-principiantes.html

Enlazar una pestaña con una etiqueta concreta.

El procedimiento es exactamente igual que para las entradas, solo que en este caso usaremos la url que vemos una vez hemos pinchado sobre la etiqueta a enlazar, y que mostrará todas las entradas con esa etiqueta.

http://elescaparatederosa.blogspot.com/search/label/Blogger

Enlazar una pestaña con un mes de archivo.

Para mostrar solo las entradas del mes de vacaciones o lo que sea... El mismo procedimiento que los anteriores, pero obtendríamos la url pinchando sobre el mes a enlazar en el gadget de archivos:

http://elescaparatederosa.blogspot.com/2009_07_01_archive.html

Enlazar una pestaña con el "suscribirse".

Si no estamos usando un servicio distinto al de Blogger para facilitar la suscripción, la url a colocar en el enlace y que por defecto proporciona Blogger, sería esta:

http://NOMBRE DE NUESTRO BLOG.blogspot.com/feeds/posts/default


Para enlazar un sitio fuera del blog, por supuesto que tendríamos que colocar la url del sitio en el enlace.

Menú de pestañas

Hace tiempo publiqué como instalar un menú de pestañas en Blogger usando las etiquetas.
En ese menú, cada vez que se etiqueta una entrada, una nueva pestaña aparece de forma automática en el menú, esto hace que el aspecto del menú deje bastante que desear cuando en el blog usamos demasiadas etiquetas.

Basándonos en la misma idea y usando casi el mismo código, vamos a instalar un menú con el mismo aspecto que el de pestañas con etiquetas, pero en el que incluiremos los enlaces que creamos oportuno.

Antes de empezar, podéis ver un ejemplo funcionando en este blogs de pruebas instalado sobre las entradas.

[1] Una vez en nuestro panel de Blogger vamos a Edición HTML y colocamos el CSS necesario para el menú.

El lugar adecuado para colocar cualquier código CSS es siempre entre las etiquetas <b:skin><![CDATA[/* y ]]>%lt;/b:skin> de nuestra plantilla.

En este caso estaría bien ponerlo después de la sección del header, más o menos antes de /* Outer-Wrapper-------- */ por ejemplo:

/* Menu pestañas*/

#tabsmenu {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5;
line-height:normal;
}
#tabsmenu ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsmenu li {
display:inline;
margin:0;
padding:0;
}
#tabsmenu a {
float:left;
background:url("IMAGEN IZQUIERDA (LEFT)") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsmenu a span {
float:left;
display:block;
background:url("IMAGEN DERECHA (RIGHT)") no-repeat right top;
padding:5px 14px 4px 4px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsmenu a span {float:none;}
/* End IE5-Mac hack */
#tabsmenu a:hover {
background-position:0% -42px;
}
#tabsmenu a:hover span {
background-position:100% -42px;
}

[2] Como veis en el código, se necesitan dos imágenes para que formen las pestañas, una que irá en "IMAGEN IZQUIERDA (LEFT)" y otra en "IMAGEN DERECHA (RIGHT".

Podéis descargar las imagenes en varios colores en este archivo en formato .zip y una vez escogidas las que vais a usar, las subís a un alojamiento de imágenes o al mismo Blogger para obtener su url.
No os será dificil reconocer cual es cada imagen ya que se llaman tableft y tabright respectivamente y terminan con una letra que identifica cada pareja: tableftB, tabrightB

Guardamos los cambios.

[3] Vamos ahora a la parte de Diseño de nuestro panel, pinchamos en añadir un nuevo gadget HTML y pegamos dentro este código:

<div id="tabsmenu">
<ul>
<li><a href="#"><span>INICIO</span>
</a></li>
<li><a href="mailto:direccion email"><span>CONTACTO</span></a></li>
<li><a href="http://www.blogger.com/"><span>BLOGGER</span></a></li>
<li><a href="http://www.google.es"><span>GOOGLE</span></a></li>
<li><a href="http://elescaparatederosa.blogspot.com/"><span>EL ESCAPARATE</span></a></li>
</ul>
</div>

Es aquí donde editaremos los enlaces del menú y la información que se mostrará en las pestañas.
Después arrastramos el gadget a debajo del header o a la parte del croscoll  por ejemplo.
Si necesitamos un espacio extra en esa zona podemos consultar como añadir elementos adicionales en Diseño o ver también como aprovechar la zona del croscoll.

Mini menú

Me pregunta Surplus21 como colocar un "mini-menú" como el que tengo en el footer del Escaparate, donde he colocado algunos iconos enlazados con diferentes servicios o páginas: Mi perfil en Blogger, en Twitter, Technorati, etc...

No es más que un div al que he añadido algunos estilos y en el que he colocado los distintos iconos con enlace uno detrás de otro.

El código se coloca en un gadget HTML en la sidebar o donde queráis mostrar el mini menú:

<div style="text-align: center; background:#fff; border:2px solid #82B7C4; width: 100%;">

<span class="pushbutton"><a href="http://www.blogger.com/profile/06743611108067453905" target="_blank" title="Sobre mi"><img src="
http://4.bp.blogspot.com/_8PJ-pgoBhWQ/ScYgNwl4KeI/AAAAAAAAGYg/FL3sBqDjVlE/s320/personal.png"/></a></span>

<span class="pushbutton"><a href="mailto:lejaniaimposible@hotmail.com" title="Email"><img src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/ScYgVjvmKwI/AAAAAAAAGYw/68TckepVJX8/s320/email_edit.png"/></a></span>

<span class="pushbutton"><a href="http://feeds.feedburner.com/blogspot/hnBy" target="_blank" title="Suscribe"><img src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/SP9USfdc9aI/AAAAAAAAEgk/LKHLLAOgJ68/s320-R/16-rss-square.png"/></a></span>

<span class="pushbutton"><a href="http://twitter.com/RosaTorre" target="_blank" title="Sigueme en Twitter"><img src="http://4.bp.blogspot.com/_8PJ-pgoBhWQ/ScYjtuhV8CI/AAAAAAAAGZA/OGZ2EDm70Uo/s320/twitter.png"/></a></span>

</div>

La primera línea del código es donde se aplican los estilos del div o contenedor:

text-align: center; La alineación del contenido (los iconos) que en este caso es al centro.
background:#fff; El color de fondo.
border:2px solid #82B7C4; El grosor, aspecto y color del borde.
width: 100%; Ocupará todo el ancho de donde esté colocado, a no ser que cambiemos 100 por un valor menor.

La parte de código que corresponde a cada icono, es la que empieza por <span class="pushbutton"> y acaba por </span> esto es una clase que he añadido a cada icono para conseguir el efecto de "botón pulsar".

He dejado mis datos en el código de cada icono para que os sirvan de guía al colocar los vuestros.

Una vez añadido el código en el gadget y hechos los cambios necesarios, colocamos además estas líneas de CSS en nuestra plantilla antes de ]]></b:skin>, esto marcará la separación entre los iconos (2px) y le dará el efecto de pulsado:

.pushbutton{padding: 2px;}
.pushbutton a:hover {position: relative; top: 1px; left: 1px;}

También podemos usar el CSS en el mismo gadget si os resulta más cómodo, solo tenéis que pegar el código sobre el que habéis puesto para el mini menú de esta manera:

<style type="text/css">
.pushbutton{padding: 2px;}
.pushbutton a:hover {position: relative; top: 1px; left: 1px;}
</style>

Menú con sub-menus

Podéis verlo funcionando en mi blog de pruebas de menús, bajo el nombre de "MENU DOS (ROBS).

[1] Añadimos el código CSS necesario desde "Edición HTML" en nuestro panel sin expandir la plantilla de artilugios, justo antes de ]]></b:skin>:

/* MENU DOS (Robs)
----------------------------------------------- */

#subnavbar {
background: #64343C;
width: 873px;
height: 27px;
font-weight:bold;
color: #FFFFFF;
margin: 0px;
padding: 0px;
font-family:"Trebuchet MS";
}

#subnav {
margin: 0px;
padding: 0px;
}

#subnav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#subnav li {
list-style: none;
margin: 0px;
padding: 0px;
}

#subnav li a, #subnav li a:link, #subnav li a:visited {
color: #FFFFFF;
display: block;
font-size: 11px;
text-transform: uppercase;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
border-left: 1px solid #FFFFFF;
}

#subnav li a:hover, #subnav li a:active {
background: #999999;
color: #000000;
display: block;
text-decoration: none;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
}

#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #64343C;
width: 120px;
heigth: 20px
float: none;
margin: 0px;
padding: 5px 10px 5px 10px;
border-bottom: 1px solid #FFFFFF;

border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

#subnav li li a:hover, #subnav li li a:active {
background: #999999;
margin: 0px;
padding: 5px 10px 5px 10px;
}

#subnav li {
float: left;
padding: 0px;
}

#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0px;
padding: 0px;
}

#subnav li li {
}

#subnav li ul a {
width: 140px;
}

#subnav li ul a:hover, #subnav li ul a:active {
}

#subnav li ul ul {
margin: -25px 0 0 161px;
}

#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
left: -999em;
}

#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
left: auto;
}

#subnav li:hover, #subnav li.sfhover {
position: static;
}

Es en este código donde podemos hacer los cambios para escoger otro color diferente para el menú por ejemplo, cambiando los códigos de color en "background".

Lo principal a tener en cuenta es la anchura del menú, que está establecida en 873px en esta parte del código (señalado en negrita):

#subnavbar {
background: #64343C;
width: 873px;
height: 27px;
font-weight:bold;
color: #FFFFFF;
margin: 0px;
padding: 0px;
font-family:"Trebuchet MS";
}

Ahí tendréis que cambiar ese valor (873px) por el que mejor se adapte al sitio donde irá colocado. Si vais a ponerlo debajo de la cabecera, lo más adecuado será que tenga el mismo ancho que esta por ejemplo.
También podéis sustituir el valor en pixeles por un porcentaje, así si ponéis "width: 100%" el menú ocupará el ancho total disponible del sitio donde esté colocado.

[2] Colocamos ahora el código necesario para armar nuestro menú en un gadget HTML que arrastraremos luego a donde vayamos a mostrar el menú:

<div id="subnavbar">
<ul id="subnav">

<li><a href="URL DEL BLOG" title="Inicio">INICIO</a>
</li>
<li><a href="" title="">PESTAÑA1</a>
<ul>
<li><a href="" title="">SUB-PESTAÑA1</a>
</li>
<li><a href="" title="">SUB-PESTAÑA1</a>
</li>
<li><a href="" title="">SUB-PESTAÑA1</a>
</li>
</ul>
</li>
<li><a href="mailto:" title="Enviame un email">CONTACTO</a>
</li>
<li><a href="" title="">PESTAÑA2</a>
<ul>
<li><a href="" title="">SUB-PESTAÑA2</a>
</li>
<li><a href="" title="">SUB-PESTAÑA2</a>
</li>
<li><a href="" title="">SUB-PESTAÑA2</a>
</li>
</ul>
</li>
<li><a href="" title="">PESTAÑA3</a>
<ul>
<li><a href="" title="">SUB-PESTAÑA3</a>
</li>
<li><a href="" title="">SUB-PESTAÑA3</a>
</li>
</ul>
</li>
<li><a href="" title="">PESTAÑA4</a>
<ul>
<li><a href="" title="">SUB-PESTAÑA4</a>
</li>
<li><a href="" title="">SUB-PESTAÑA4</a>
</li>
</ul>
</li>
<li><a href="" title="">PESTAÑA5</a>

<ul>
<li><a href="" title="">SUB-PESTAÑA5</a>
</li>
<li><a href="" title="">SUB-PESTAÑA5</a>
</li>
<li><a href="" title="">SUB-PESTAÑA5</a>
</li>
<li><a href="" title="">SUB-PESTAÑA5</a>
</li>
</ul>

</li></ul></div>

Es en este código donde tenemos que colocar los enlaces y el texto que aparecerá en cada pestaña del menú y de los sub-menús.

Donde dice a herf= se coloca cada enlace entre las comillas.
Entre las comillas de title= colocamos el texto explicativo que se verá al pasar el puntero sobre el enlace.
En PESTAÑA1, PESTAÑA2, etc. colocamos el texto que se verá en cada pestaña del menú y en SUB-PESTAÑA1, SUB-PESTAÑA2, etc. el texto que se verá en cada sub-menú.


Para añadir más pestañas y subpestañas al menú, fijaros muy bien en como está construido el código:

El contenido de las pestañas que no van a incluir subpestañas, va incluido entre <li> y </li>

<li><a href="URL DEL BLOG" title="Inicio">INICIO</a></li>

El contenido de la pestaña que incluirá subpestañas irá incluido entre <li> y <ul> a continuación estarán las subpestañas (cada una incluida entre <li> y </li>) y para cerrar terminaremos con </ul> </li>


<li><a href="" title="">PESTAÑA3</a><ul>
<li><a href="" title="">SUB-PESTAÑA3</a></li>
<li><a href="" title="">SUB-PESTAÑA3</a></li>
</ul>
</li>

Menú desplegable con color

Aunque hace tiempo que publiqué como hacer un menú desplegable para incluir enlaces, se me ha ocurrido gracias a un comentario de Friol que podría hacer esta entrada para explicar un poco como personalizar este tipo de menús.

[1] Menú desplegable sencillo.

Colocamos este código en un gadget HTMLJavascript:

<select onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" class="combobox" name="SiteMap" size="1">
<option selected/>TITULO
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA

<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
</select>

Y este sería el resultado:


TITULO

TITULO DE LA PAGINA
TITULO DE LA PAGINA
TITULO DE LA PAGINA
TITULO DE LA PAGINA
TITULO DE LA PAGINA
TITULO DE LA PAGINA


[2] Menú desplegable con opción "Ir".

Colocamos este código en un gadget HTMLJavascript:

<script language="JavaScript">
function Ir_amigos(form) {var myindex=form.dest.selectedIndex
window.open(form.dest.options[myindex].value, target="_parent", "toolbar=yes,scrollbars=yes,location=yes"); }
</script>
<form name="mis_enlaces">
<select name="dest" class="combobox" SIZE=1>
<option class="amarillo" selected value="">BLOGS AMIGOS
<option class="rojo" value="URL DE LA PAGINA">LINK1
<option class="azul" value="URL DE LA PAGINA">LINK2
<option class="verde" value="URL DE LA PAGINA">LINK3
</select><input type="button" value="Ir" onClick="Ir_amigos(this.form)">
</form>

Y este sería el resultado:

BLOGS AMIGOS
LINK1
LINK2
LINK3

[3] Menú desplegable con enlaces que abren en "página nueva".

Colocamos este código en un gadget HTMLJavascript:

<script language="JavaScript">
<!--
function sitios_enlaces(form) {
var myindex=form.destino.selectedIndex
window.open(form.destino.options[myindex].value,"main",""); }
//-->
</script>
<form name="miForma">
<select name="destino" size=1>
<option selected value=""> MIS FAVORITOS
<option value="URL DE LA PAGINA">LINK1
<option value="URL DE LA PAGINA">LINK2
<option value="URL DE LA PAGINA">LINK3
<option value="URL DE LA PAGINA">LINK4
<option value="URL DE LA PAGINA">LINK5
</select><input type="button" class="boton" value="Ir" onClick="sitios_enlaces(this.form)">
</form>

Y este sería el resultado:

MIS FAVORITOS
LINK1
LINK2
LINK3
LINK4
LINK5

Como veis los tres menús son sencillos de instalar y con distintas opciones según sean nuestras necesidades.
Supongo que os habréis fijado en que he destacado en negrita alguna parte de su código, en concreto son unas "clases" añadidas en cada menú para darles color mediante CSS.

En el primer menú, la clase añadida (class="combobox") controlará tanto la "cajita" como los enlaces una vez desplegados.
Si añadimos algo como esto en el CSS de nuestra plantilla (antes de ]]></b:skin>) "ordenamos" al menú que tenga un color de fondo y que su texto sea de color blanco:

.combobox {
background-color: #009900;
color: #ffffff;
}

El resultado sería este:


TITULO
TITULO DE LA PAGINA
TITULO DE LA PAGINA
TITULO DE LA PAGINA
TITULO DE LA PAGINA
TITULO DE LA PAGINA
TITULO DE LA PAGINA


En el segundo menú, he mantenido la clase class="combobox" pero además he añadido una clase distinta a cada enlace, así que si añadimos algo como esto en el CSS de la plantilla, cada enlace del menú se mostrará de distinto color:

.azul {
background-color: #0000FF;
color: #ffffff;
}
.rojo {
background-color: #FF0000;
color: #ffffff;
}
.verde {
background-color: #009900;
color: #ffffff;
}
.amarillo{
background-color: #FFFF00;
color: #000000;
}

El resultado sería este:

BLOGS AMIGOS
LINK1
LINK2
LINK3

En el tercer menú, lo que he hecho ha sido añadir una clase al botón imput (class="boton"), así que colocando estas líneas en el CSS, tendríamos un botón con el texto en negrita y de color amarillo, de fondo rojo y con un borde de color gris:

.boton {
color:yellow;
background-color:red;
font-weight: bold;
border: 2px solid #ddd;
}

Resultado:

MIS FAVORITOS
LINK1
LINK2
LINK3
LINK4
LINK5

Menu minislide

Un sencillo menú con CSS y Javascript que podéis ver con el nombre de "menú uno (minislide)" en mi blog de pruebas.

[1] Necesitaremos descargar el archivo javascript a nuestro PC y subirlo depués a un alojamiento de archivos de donde, una vez subido, obtendremos su url.
Lo colocamos entonces antes del </head> de nuestra plantilla de esta manera:

<script src='URL_DEL_ARCHIVO_JAVASCRIPT' type='text/javascript'/>

[2] Incluiremos ahora el código CSS necesario antes del ]]></b:skin> de nuestra plantilla:

/*MENU UNO (Minislide)
Stephen Clark
www.sgclark.com/sandbox/minislide
----------------------------------------------------------------------- */

#nav {padding:10px 0px 0px 0; margin: 0 0 20px 0; float:left; width:100%; border-bottom:1px solid #888888;}


#minislide {
        float: left;
        margin: 0;
        padding: 0px 10px 0px 10px;
        position:relative;
        z-index:2;
        }

#minislide li {
        float: left;
        margin: 0;
        padding: 0;
        display: inline;
        list-style: none;
        position:relative;
        text-transform:uppercase;
        }

#minislide a:link, #minislide a:visited {
        float: left;
        line-height: 19px;
        font-weight: bold;
        margin: 0 10px 0px 10px;
        text-decoration: none;
        color: #888888;
        }

#minislide a.active:link, #minislide a.active:visited {
        border-bottom: 5px solid #888888;
        padding-bottom: 1px;
        color: #888888;
        }
      
#minislide a:hover {
        border-bottom: 5px solid #888888;
        padding-bottom: 1px;
        color: #CC0000;
        }
  
#animated-tab {
        position: absolute;
        z-index: 1;
        /*font-size: 85%;*/
        line-height: 19px;
        padding-bottom: 1px;
        border-bottom: 5px solid #888888;
        width:100%;
        }
      
br
        {
        clear:both;
        }

[3] Ya solo nos queda colocar el código necesario para armar los enlaces del menú, lo pondremos dentro de un gadget HTMLJavascript debajo de la cabecera o en el crosscol por ejemplo:

<div id="nav">
<ul id="minislide">
<li><a href="#">Inicio</a></li>
<li><a href="#" title="Mi perfil en Blogger">Perfil</a></li>
<li><a href="#" title="Suscribe Feed">Feed</a></li>
<li><a href="mailto:#" title="Envia un email">Contacto</a></li>
<li><a href="search/label/?max-results=999" title="Ver todas las entradas">Ver todas las entradas</a></li>
</li></ul></div>

Menu de pestañas invertidas

Este es el tipo de menú que usé durante mucho tiempo en El Escaparate y que podéis ver debajo de las etiquetas al pie del header.
Este menú esta sacado de Dynamic Drive, aunque con algunas modificaciones en cuanto a color, tipo de texto, etc. que pueden hacerse sin problemas en el código CSS del menú.
En Dynamic Drive, como podéis ver en la imagen, han usado dos colores: #8b0000 y #d50509, así que para cambiarlos solo tenéis que localizar esos códigos en el CSS del menú y sustituirlos por el código de vuestros colores.

[1] En primer lugar nos descargamos estas dos imágenes a nuestro PC (botón derecho del ratón, guardar como) y las subimos a nuestro propio alojamiento para más tarde usar su url en el código del menú:



Hacerlo así, y no copiéis la url de mis imágenes, pues no sería la primera vez que por problemas de ancho de banda he de trasladar imágenes a otro alojamiento y si eso pasase, el menú se desconfiguraría.


[2] Colocamos ahora el código CSS del menú justo antes de </head>:

<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
#invertedtabs{
margin-left: 4px;
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
padding-left: 5px;
}
#invertedtabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin:0;
margin-bottom: 1em; /*margin between menu and rest of content*/
padding:0;
list-style:none;
}
#invertedtabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
line-height: 1.5em;
}
#invertedtabs a{
float:left;
color: white;
background: #8b0000 url(media/color_tabs_left2.gif) no-repeat left bottom;
margin:0 2px 0 0;
padding:0 0 0 3px;
text-decoration:none;
letter-spacing: 1px;
}
#invertedtabs a span{
float:left;
display:block;
background: transparent url(media/color_tabs_right2.gif) no-repeat right bottom;
padding:3px 9px 3px 6px;
}
#invertedtabs a span{
float:none;
}
#invertedtabs a:hover{
background-color: #d50509;
}
#invertedtabs a:hover span{
background-color: #d50509;
}
#invertedtabs #current a, #invertedtabs #current span{ /*currently selected tab*/
background-color: #d50509;
}
#invertedtabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: #8b0000;
border-bottom: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}
</style>

Es aquí donde tendremos que sustituir: media/color_tabs_left2.gif y media/color_tabs_right2.gif por la url de las imágenes que hemos descargado antes, fijaros que no es demasiado dificil saber en que lugar va cada una, pues la terminación de su url será la misma que la del ejemplo.

Cambiamos también aquí el código de los colores como ya os explicaba antes, por los vuestros.

[3] Colocamos ahora el código necesario para mostrar nuestro menú y donde vamos a construir los enlaces. Podemos ponerlo directamente en un nuevo elemento (Gadget) HTML y arrastrarlo a debajo de la cabecera o, como en mi caso, colocarlo en el "crosscol".


En la entrada "Aprovechando espacios en la plantilla (crosscol)", podéis ver como dar uso a la zona del "crosscol".

<div id="invertedtabsline">&nbsp;</div>

<div id="invertedtabs">
<ul>
<li style="margin-left: 1px"><a href="http://elescaparatederosa.blogspot.com" title="Inicio"><span>Inicio</span></a></li>
<li><a href="mailto:lejaniaimposible@hotmail.com" title="Envia un email"><span>Contacto</span></a></li>
<li><a href="http://feeds.feedburner.com/blogspot/hnBy" title="Suscribete al Escaparate"><span>Suscribe Feed</span></a></li>
<li><a href="http://www.blogger.com/profile/06743611108067453905" title="Sobre mi"><span>Sobre mi</span></a></li>
<li><a href="http://elescaparatederosa.blogspot.com/search/label/?max-results=999" title="Ver todas las entradas"><span>Ver todas las entradas</span></a></li>
</ul>
</div>
<br style="clear: left"/>

Por supuesto tendréis que cambiar en este código mis datos (los he resaltado en negrita) por los vuestros.

Menu barra superior con buscador incluido

Un menú horizontal tipo Navbar para colocar en la parte superior de nuestro blog y que además de los enlaces que añadamos en el, lleva un sencillo buscador incorporado, que funciona muy bien.
Como podéis ver en la imagen de ejemplo, la barra del menú ocupará todo el ancho de la pantalla:

Para colocarlo en nuestro blog solo son necesarios dos simples pasos:

[1] En la parte de "Edición Html" de nuestra plantilla sin expandir las plantillas de artilugios, localizamos la etiqueta ]]></b:skin> y justo antes pegamos este código CSS:

/*-- CSS Menu Superior-- */
#navtop { background: #dcdcdc ; height: 26px; width: 100%; margin: 0px auto 24px auto; font-family: "Century Gothic", Palatino Linotype, Trebuchet MS, sans-serif; font-variant: small-caps; font-weight: bold; color:#737374; font-size: 14px; border-bottom: 1px solid #afafaf;}
.nav {width: 950px; margin: auto;}

ul.navtop { padding: 0px;}
ul.navtop li { list-style: none; display: inline;}
ul.navtop li a { background: transparent; color:#737374; display: block; float: left; padding: 4px 7px 3px 7px; margin-right: 3px; text-decoration: none; border-right: 1px solid #afafaf; border-left: 1px solid #afafaf;}
ul.navtop li a:visited { text-decoration: none; color: #737374;}
ul.navtop li a:hover { background: #e1477d; color: #ffffff; text-decoration: none; border-right: 1px solid #afafaf; border-left: 1px solid #afafaf; }
ul.navtop li a:active { text-decoration: none; color: #737374; }
ul.navtop li a:focus { color: #41a5c3; outline: 1px dotted #e1477d; }
ul.navtop li.current_page_item a { text-decoration:none; color:#fff; background: #E1477D ; }
ul.navtop li ul { float:left; margin:0; padding:0; }

#searchcont { width: 100%; margin: 12px auto 12px auto; }

#searchform { height:26px; line-height:25px; float:right; margin: 0px; padding: 0px;}
input#s {color: #e1477d; width: 283px; background:#fcfcfc; padding: 2px 4px 2px 4px; border: 1px solid #afafaf;}
input#searchsubmit{ background:#afafaf; color:#fff; font-size:13px; padding: 2px;}

En este código CSS es donde tendréis que cambiar los datos necesarios para modificar el color, tipo de texto, etc. del menú.

[2]  Colocaremos ahora el código necesario para que se muestre la "barra menú" en la parte superior del blog y lo haremos justo sobre <div id='header-wrapper'> y si en esa posición el resultado no es el esperado (dependerá del diseño de la plantilla) lo colocaremos después de <body> donde debería de funcionar:

<!-- Menu Superior -->
<div id='navtop'>
<div class='nav'>
  <ul class='navtop'>
  <li><a href='http://elescaparatederosa.blogspot.com'>Inicio</a></li>
  <li><a href='http://draft.blogger.com/profile/06743611108067453905' title='Perfil Blogger'>Sobre mi</a></li>
<li><a href='http://feeds.feedburner.com/blogspot/hnBy' title='Suscribe Feed'>Suscribe Feed</a></li>
<li><a href='mailto:lejaniaimposible@hotmail.com' title='Contactame'>Contacto</a></li>

<li><a href='http://elescaparatederosa.blogspot.com/search/label/?max-results=999' title='Ver todas las entradas'>Ver todas las entradas</a></li>
  </ul>
<form action='/search' id='searchform' method='get' style='display:inline;'><input id='search-box' name='q' type='text'/><input id='search-btn' type='submit' value='Buscar'/></form>
</div>
</div>
<!-- Fin Menu superior -->

Tendréis que cambiar en el código mis datos por los vuestros, lo que no os será muy difícil  ya que los he colocado resaltados en negrita.

Menú de etiquetas (expandir y contraer)

Una sencilla manera de mostrar las etiquetas en nuestra sidebar de forma que no ocupen casi espacio.
Será muy útil para aquellos que tienen en su blog aplicado un número excesivo de etiquetas, ya que solo se mostrará el título del elemento con el símbolo [+/-] delante y una vez se pinche en este símbolo, las etiquetas aparecerán expandidas debajo hasta que, volviendo a pinchar en el símbolo, se oculten de nuevo.



[Paso 1] En la pestaña de Diseño - Edición Html, localizamos el código del elemento "Etiquetas" sin expandir la plantilla de artilugios:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>

[Paso 2] Sustituimos esa línea por este código:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>

<ul>
<b:loop values='data:labels' var='label'>
<li>

<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
</li>
</b:loop>
</ul>

<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

[Paso 3] Comprobar en "Vista Previa" y si todo está correcto "Guardar Cambios".

CSSplay (Menu numero 4)

A petición de Pizca paso a explicaros como colocar el menú "Professional #4" de CSSplay.


[1] Colocamos el CSS necesario antes de la etiqueta ]]></b:skin> de nuestra plantilla:

/*Credits: CSSplay */
/*URL: http://www.cssplay.co.uk/menus/pro_four */
.preload4 {background: url(http://img361.imageshack.us/img361/9697/profour1bu6.gif);}
.menu4 {padding:0 0 0 1em; margin:0; list-style:none; height:35px; background:url(http://img132.imageshack.us/img132/53/profour0tc2.gif);}
.menu4 li {float:left;}
.menu4 li a {display:block; float:left; height:35px; line-height:33px; color:#aaa; text-decoration:none; font-family:arial, verdana, sans-serif; text-align:center; padding:0 0 0 14px; cursor:pointer; font-size:11px;}
.menu4 li a b {float:left; display:block; padding:0 28px 0 14px; color:#aaa;}
.menu4 li.current a {color:#fff; background:url(http://img132.imageshack.us/img132/7898/profour2rq7.gif);}
.menu4 li.current a b {background:url(http://img132.imageshack.us/img132/7898/profour2rq7.gif) no-repeat right top; color:#fff;}
.menu4 li a:hover {color:#fff; background: url(http://img361.imageshack.us/img361/9697/profour1bu6.gif);}
.menu4 li a:hover b {background:url(http://img361.imageshack.us/img361/9697/profour1bu6.gif) no-repeat right top; color:#fff;}
.menu4 li.current a:hover {color:#fff; background: url(
http://img132.imageshack.us/img132/7898/profour2rq7.gif); cursor:default;}
.menu4 li.current a:hover b {background:url(
http://img132.imageshack.us/img132/7898/profour2rq7.gif) no-repeat right top; color:#fff;}

El código ya está armado con las imágenes necesarias incluidas, las he subido a ImageShak.

[2] El siguiente paso será colocar el código del menú en un nuevo elemento HTML y arrastrar el elemento a debajo del header, una vez añadidos nuestros enlaces:

<ul class="menu4">
<li><a href="URL_DEL_BLOG"><b>Inicio</b></a></li>
<li><a href="URL_PAG_DEL_PERFIL"><b>Sobre mi</b></a></li>
<li><a href="URL_DEL_FEED"><b>Suscribe</b></a></li>
<li><a href="http://blogger.com"><b>Blogger</b></a></li>
<li class="current"><a href="mailto:AQUI_DIRECCION_DE_CORREO"><b>Contacto</b></a></li>
<li><a href="URL_DEL_BLOG"><b>Mi otro blog</b></a></li>
</ul>

He armado los enlaces de ejemplo lo más claramente que he podido, no será demasiado difícil entender como sustituirlos por los vuestros

Nota:
A menudo al intentar arrastrar el elemento debajo de la cabecera, vemos que ahí no hay espacio para más elementos. Para solucionarlo tenemos que localizar esta línea en nuestra plantilla sin expandir artilugios:

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

Y modificar algunos valores para que se vea como esta:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

¡Suerte Pizca!

Menu con imagenes

Revisando los menús de CssPlay he visto este con imágenes que me ha gustado mucho.
Podéis ver como funciona en esa misma página, es el número 15.

(Pincha en la imagen para verla a mayor tamaño)

He armado el CSS necesario con las imágenes (están subidas en ImageShack) para que solo tengáis que copiar y pegar el código y luego armar el menú con vuestros propios datos.

[1] Colocamos este código en el CSS de nuestra plantilla, siempre antes de ]]></b:skin>:

/*Credits: CSSplay */
/*URL: http://www.cssplay.co.uk/menus/pro_15 */
.preload15
{background: url(http://img169.imageshack.us/img169/6923/pro151ns5.gif);
}
.pro15 {
padding:0 0 0 20px;
margin:0;
list-style:none;
height:30px;
background:#1841c8 url(http://img147.imageshack.us/img147/1695/pro150ky7.gif);
}
.pro15 li {
float:left;
}
.pro15 li a {
display:block;
float:left;
height:30px;
line-height:30px; background:url(http://img147.imageshack.us/img147/1695/pro150ky7.gif); color:#ddd;
text-decoration:none;
font-family:arial, verdana, sans-serif;
text-align:center;
padding:0 0 0 10px;
cursor:pointer;
font-size:11px;
}
.pro15 li a b {
float:left;
display:block; background:url(http://img147.imageshack.us/img147/1695/pro150ky7.gif) right top;
padding:0 16px 0 8px;
color:#ddd;
}
.pro15 li.current a {
color:#fff;
background:url(http://img248.imageshack.us/img248/4412/pro152xg1.gif);
}
.pro15 li.current a b {
background:url(http://img248.imageshack.us/img248/4412/pro152xg1.gif) no-repeat right top;
color:#fff;
}
.pro15 li a:hover {
color:#fff;
background: url(http://img169.imageshack.us/img169/6923/pro151ns5.gif);
}
.pro15 li a:hover b {background:url(http://img169.imageshack.us/img169/6923/pro151ns5.gif) no-repeat right top; color:#fff;
}
.pro15 li.current a:hover {
color:#fff;
background: url(http://img248.imageshack.us/img248/4412/pro152xg1.gif);
cursor:default;
}
.pro15 li.current a:hover b {
background:url(http://img248.imageshack.us/img248/4412/pro152xg1.gif) no-repeat right top;
color:#fff;
}
.pro15 li a em {
display:block;
float:left;
width:16px; height:30px;
}
.pro15 li a em.home {
background:url(http://img147.imageshack.us/img147/3286/home2yr5.gif) no-repeat center center;
}
.pro15 li a em.calendar {
background:url(http://img248.imageshack.us/img248/2245/eventstw4.gif) no-repeat center center;
}
.pro15 li a em.camera {
background:url(http://img147.imageshack.us/img147/2013/camerajc9.gif) no-repeat center center;
}
.pro15 li a em.find {
background:url(http://img147.imageshack.us/img147/3066/findou5.gif) no-repeat center center;
}
.pro15 li a em.contact {
background:url(http://img248.imageshack.us/img248/7778/contactqj3.gif) no-repeat center center;
}
.pro15 li a em.search {
background:url(http://img248.imageshack.us/img248/5774/searchnp0.gif) no-repeat center center;
}

[2] Una vez guardados los cambios, en la parte de "Diseño" de nuestra plantilla, añadimos un nuevo elemento HTML y colocamos dentro el código para armar el menú, luego podemos arrastrarlo a debajo de la cabecera:

<ul class="pro15">
<li><a href="#"><em class="home"></em><b>Inicio</b></a></li>
<li class="current"><a href="#nogo"><em class="calendar"></em><b>Archivo</b></a></li>
<li><a href="#"><em class="camera"></em><b>Imagenes</b></a></li>
<li><a href="#"><em class="find"></em><b>Paginas amigas</b></a></li>
<li><a href="#"><em class="contact"></em><b>Contacto</b></a></li>
<li><a href="#"><em class="search"></em><b>Buscador</b></a></li>
</ul>

En <a href="> colocamos la url de nuestros enlaces, sustituyendo al #.
Podemos cambiar las imágenes de las pestañas por unas propias, siempre que sean de 16x16 pixeles, no será difícil identificar cada imagen, ya que si nos fijamos en su url, vemos que por su nombre (aunque en inglés) es fácil saber cual es cual.
Lo que no deberíamos cambiar es la clase, es decir, donde vemos em class="home", por ejemplo, ya que si lo hacemos el menú no funcionará.

AVISO:

Algunas imágenes han sido borradas de ImageShack y el menú se verá imcompleto, podéis descargar aqui el pack con las imágenes y subirlas a vuestro propio alojamiento para evitar este tipo de problemas.

Simple menu con CSS

Un sencillo menú construido mediante CSS y usando solo una imagen.


[1] Colocamos las líneas de CSS dentro de nuestra plantilla antes de ]]></b:skin>:

#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}

#nav-menu li
{
float: left;
margin: 0 0.15em;
}

#nav-menu li a
{
background: url(http://img410.imageshack.us/img410/9401/cssnavbm2.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 6em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}

/* Hide from IE5-Mac \*/
#nav-menu li a
{
float: none
}
/* End hide */

#nav-menu
{
width:30em
}

[2] Añadimos el código necesario para construir los enlaces del menú en un elemento HTML de la plantilla y lo arrastramos sobre las entradas o debajo de la cabecera:

<div id="nav-menu">
<ul>
<li><a href="http://elescaparatederosa.blogspot.com">Inicio</a></li>
<li><a href="mailto:lejaniaimposible@hotmail.com">Contacto</a></li>
<li><a href="http://blogger.com">Blogger</a></li>
</ul>
</div>

[3] En este último código es donde tenéis que colocar vuestros propios datos para construir los enlaces.
En el ejemplo hay solo tres botones, pero pueden añadirse más, duplicando las líneas del código y añadiendo los datos del enlace:

<li><a href="Url_del_enlace">Enlace</a></li>

Añadir un menú-bar al blog

Es un hack de Beautiful Beta, muy fácil de implementar en el blog.
En solo dos pasos, tendremos una barra para menú sobre la cabecera del blog.
Pensad que estas explicaciones son para la plantilla Mínima de Blogger, si estáis usando otra, pudiera ser o no, que la colocación de los códigos fuese distinta...


[1] Vamos al html de nuestra plantilla y buscamos esto:

<div id='header-wrapper'>

Justo a continuación añadimos este código:

<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList2' locked='true' title='Menubar' type='LinkList'/>
</b:section>

En el ejemplo se supone que ya tienes un elemento "Lista" añadido, de ahí el id='LinkList2', si se da el caso de que ya tenemos varios elemento "Lista" añadidos hemos de saber "cual toca" para cambiar su id. Para no complicarnos demasiado, lo mejor es poner en el id un número elevado:

<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList50' locked='true' title='Menubar' type='LinkList'/>
</b:section>

[2] En el CSS de la plantilla añadimos el código para nuestro menubar, si tenemos alguna duda de donde situar el código, lo ponemos antes de ]]></b:skin>:

#menubar h2 {display:none;}

#menubar ul {
list-style: none;
}
#menubar li {
float: left;
}

#menubar a:link, #menubar a:visited, #menubar a:hover {
padding: 5px;
display: block;
color: #003399;
}

#menubar a:hover {
background-color: #CC3300;
}

Cambiamos los colores de los links a nuestro gusto.
Vamos a plantilla y veremos el nuevo elemento menubar sobre la cabecera, pinchamos en editar y vamos completando los campos como cuando añadimos un nuevo elemento "lista".

Podéis ver como queda en Beautiful Beta, ellos lo tienen sobre la cabecera, pero si lo queremos justo debajo de nuestra cabecera (también queda muy bien), ponemos el primer código justo después de esto :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='nbgeyhtuytk (cabecera)' type='Header'/>
</b:section>

¡Gracias por tus aportes Eulalia!

Menus y cabeceras en flash a la carta

Mi amiga DyDy me envía una interesante propuesta para compartir con todos vosotros.

¿Quieres una cabecera o un menú hecho en flash para tu blog?
DyDy te lo hace "a la carta" con las medidas, estilos, los links ya incluidos...o sea, prácticamente te lo proporciona todo hecho.
Una vez terminado su trabajo, tan solo hay que utilizar un código para colocar el menú o el header en el blog:

<embed src=" URL DE TU FLASH " width=" ANCHO " height=" ALTO " type="application/x-shockwave-flash" play="true" loop="true" menu="true"></embed>

Lo he probado personalmente y funciona tanto en un elemento como añadiéndolo directamente en la plantilla, además funciona sin problemas en IExplorer y Firefox.
En el caso de los menús, bastaría con añadir el código en un elemento HtmlJavascript y arrastrarlo luego debajo de nuestro header, por ejemplo.
En el caso de la cabecera, tendríamos que incluir el código directamente en la plantilla y lo hariamos añadiendo el código para el flash, justo antes de <div id='header-wrapper'>, de esta manera:

<div id='header'>
<embed src=" URL DE TU FLASH " width=" ANCHO " height=" ALTO " type="application/x-shockwave-flash" play="true" loop="true" menu="true"></embed>
</div>

Si algún problema surgiera con el tema de la colocación en vuestro blog del código flash, estaré encantada de intentar ayudaros.
En cuanto a lo demás, tan solo tenéis que contactar con DyDy, ella tiene un foro en su web, donde podéis solicitar su ayuda o consultarle cualquier duda. Y lo mejor de todo esto, es que es gratis, DyDy lo hace porque le gusta y simplemente desea ayudar a los demás.

Para ampliar esta información, visita a DyDy en Flashmania

Etiquetas en forma de menú desplegable

Cuando añadimos un nuevo elemento de "Archivos" a nuestra sidebar, Blogger nos da tres opciones distintas para mostrarlo, una de ellas es en forma de "Menú desplegable".
Es opción no está disponible cuando el elemento que añadimos es el de "Etiquetas".
Si hemos escogido esa opción para mostrar los Archivos del blog, estaría bien poder hacer lo mismo con las Etiquetas, quedaría bastante bien estéticamente, creo yo...

[1] Añadimos el elemento "Etiquetas" a nuestro blog (si no lo hemos añadido antes)

[2] Vamos a la parte del HTML de nuestra plantilla y sin expandir artilugios buscamos esta línea de código:

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Tendremos en cuenta que si le hemos puesto algún título a nuestro elemento de Etiquetas, se verá en esa línea title=
Lo mismo que si, por ejemplo, tenemos mas de un elemento de Etiquetas añadido, entonces cambiará el id= por id=2, id=3...

[3] Una vez localizado el elemento correcto, cambiamos esa línea de código por esto:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Etiquetas del Escaparate</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

[4] Cambiamos en el código donde dice Etiquetas del Escaparate por lo que vamos a mostrar en el menú cuando está "recogido".
Usamos la vista previa y si ha ido todo bien, guardamos cambios.

Así se verá


Nota
Este widget funcionará igual que el de "archivos" de Blogger, es decir, automáticamente se añadirá al menú cada nueva etiqueta que coloquemos en las entradas.

Menu desplegable con opciones

Ya había mostrado antes como hacer un sencillo menú desplegable para nuestro blog.
El problema que surgía con este menú era que no ofrecía la posibilidad de abrir los links en una ventana aparte. Con este nuevo menú desplegable tendremos la posibilidad de dar a nuestras visitas la opción de abrir el link en una nueva ventana o no:

El sistema para obtener el menú es fácil, hemos de copiar un sencillo script y el código para colocar los links todo junto en un nuevo elemento HTML-Javascript, en el caso de la plantilla clásica, lo aplicaremos directamente en la plantilla en la zona de la sidebar.

Código del menú
<script language="javascript">
function ir(){
var thebox=document.menu
if (thebox.windowoption.checked){
if (!window.newwindow)
newwindow=window.open("")
newwindow.location=
thebox.example.options[thebox.example.selectedIndex].value
}
else
location=
thebox.example.options[thebox.example.selectedIndex].value
}

</script>
<form name="menu">
<select name="example" size="1">
<option selected/>Webs de interes
<option value="http://www.google.es/"/>Google
<option value="www.blogger.com"/>Blogger
<option value="http://www.imageshack.us"/>ImagesShack
<option value="http://chuano.net/chuano/util/convsimbolos.php"/>Convertidor Chuano
<option value="http://www.webtaller.com/utilidades/csscoder/colores.php"/>Tabla de colores
<option value="http://pages.google.com/"/>Google Pages
</select>
<input value="OK" onclick="ir()" type="button"/> <br/>
<input value="ON" name="windowoption" type="checkbox"/>
Abrir en una nueva ventana
</form>

* En <option selected/>, es donde pondremos el título que se verá cuando los links no están expandidos.
* Si queremos añadir más links, copiamos una de las líneas y la añadimos antes de </select> y así podemos añadir los que necesitemos.
* Podemos colocar en el menú la url de cualquiera de nuestras entradas o etiquetas.

Construir un menú con CSS Menú Maker

En el blog Cabalas Virtuales me encontré con esta entrada donde Yolanda nos presenta un magnifico tutorial que seguro nos ayudará a crear un menú para nuestro blog sin complicarnos mucho la vida. Yo misma hice uno sin problemas en un blog de pruebas siguiendo las instrucciones de Yoli.

[1] Accedemos a la web de CSS Menú Maker y escogemos el menú que vamos a colocar en el blog.
Por ejemplo este y pinchamos en "Customize":

[2] Se abrirá una nueva pantalla donde veremos un ejemplo del menú elegido y justo debajo, ponemos el número de enlaces que tendrá nuestro menú y pinchamos en "Submit"

[3] Ahora tendremos que ingresar el Título para cada enlace y du dirección (url).

[4] Para comprobar como quedará nuestro menú, pinchamos en "Update your Menu" y podremos ver el menú con nuestros enlaces allí mismo y además en funcionamiento real:

[5] Una vez visto el menú en funcionamiento, si decidimos usarlo, pinchamos en "Generate Menu Code". Nos darán entonces dos opciones:

a)Usando la primera opción tendremos la posibilidad de descargarnos todo lo necesario para construir nuestro menú (html, css, imagenes e instrucciones de instalación) en un archivo zip.

b) Usando la segunda opción tenemos que copiar los códigos generados y pegarlos en nuestra plantilla:

CSS Code Es el código CSS de nuestro menú y hemos de pegarlo en nuestra plantilla justo encima de ]]></b:skin>

HTML Code Este es el código que tenemos que colocar en un elemento html de la plantilla y que luego moveremos debajo de la cabecera en el caso de que hayamos escogido un menú horizontal como el de mi ejemplo.

<ul id='menu'>
<li ><a href='http://http://elescaparatederosa.blogspot.com'>El Escaparate</a></li >
<li ><a href='http://http://cabalasvirtuales.blogspot.com'>Cabalas Virtuales</a></li >
<li ><a href='http://http://eternamentecabreada.blogspot.com'>Eternamente Cabreada</a></li >
</ul>

[6] Completados estos pasos descargamos el archivo con las imagenes del menú pinchando en "Click here to download Image files" Es una archivo en formato zip. que hemos de descomprimir para obtener las imagenes.
Subiremos las imágenes a un alojamiento gratuito o al mismo Blogger y pondremos la dirección de las imagenes en el código CSS del menú, es decir, el primer código que colocamos antes de ]]></b:skin> donde dice

background:transparent url("URL_DE_LA_IMAGEN") repeat-x top left;

En el caso del menú de este ejemplo, serán tres imágenes que no serán difíciles de colocar guiándonos por su nombre.

Enlace: CSS Menú Maker