Personaliza tu Blog: Menú con Sub-Secciones

Por Makita desde Chile 
Algunas de las lectoras que han escrito a BeBloggera por ayuda en la personalización de sus blogs, han preguntado por el menú que maneja las distintas secciones de nuestro blog, hoy las ayudaré con eso para que todo les resulte mucho más ordenado.

Menú con Buscador

Lo primero que deben hacer es habilitar sus plantillas a que soporten este tipo de menús (CSS) por lo que deben ir a Plantilla->Edición HTML y sin expandir los artilugios buscar lo siguiente:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>

Deben eliminar lo que esta destacado y buscar nuevamente si ese extracto se encuentra en el código, si es así, deben eliminarlo también.

Luego hay que buscar /* Tabs y reemplaza todo hasta /* Headings con lo siguiente:

#crosscol ul {

z-index:200;
padding:0 !important;
}
#crosscol li:hover {
position:relative;
}#crosscol ul li {
padding:0 !important;
}.tabs-outer {
z-index:1;
}:
Te debe quedar así:
/* Tabs----------------------------------------------- */#crosscol ul {
z-index: 200;
padding:0 !important;
}#crosscol li:hover {
position:relative;
}#crosscol ul li {
padding:0 !important;
}.tabs-outer {
z-index:1;
}:/* Headings----------------------------------------------- */
Con esto cualquier menú con subpestañas debería funcionar correctamente en las plantillas de Blogger.... ahora a insertar nuestro menú.
Se debe buscar en el código ]]></b:skin> y antes de él debes pegar:
* Menu horizontal con buscador----------------------------------------------- */#menuWrapper {width:100%; /* Ancho del menú */height:35px;padding-left:14px;background:#333333; /* Color de fondo */border-radius:20px; /* Bordes redondeados */}.menu {width: 100%;float: left;font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;font-size:13px; /* Tamaño de la fuente */font-weight:bold;}.menu ul {float:left;height:0px;list-style:none;margin:0;padding:0;border-radius: 0px 0px 20px 20px; /* Bordes redondeados del submenú */}.menu li{float:left;padding:0px;}.menu li a{background:#333333 url(http://lh4.googleusercontent.com/-iqgCHipLGx4/T5DqLrsVALI/AAAAAAAACaI/bcIY7SV8s5I/s35/separador.gif) bottom right no-repeat;color:#cccccc; /* Color de la fuente */display:block;font-weight:normal;line-height:35px;margin:0px;padding:0px 25px; /* Espacio entre cada pestaña */text-align:center;text-decoration:none;}.menu li a:hover, .menu ul li:hover a {background: #2580a2; /* Color de las pestañas al pasar el cursor */color:#FFFFFF; /* Color del texto al pasar el cursor */text-decoration:none;}.menu li ul {background:#333333; /* Color de fondo del submenú */display:none;height:auto;padding:0px;margin:0px;position:absolute;width:200px; /* Ancho del submenú */z-index:100;border-top:1px solid #fff; /* Borde superior del submenú */}.menu li:hover ul{display:block;}.menu li li {display:block;float:none;margin:0px;padding:0px;width:200px;}.menu li:hover li a {background:none;border-radius: 0px 0px 20px 20px; /* Borde de las subpestañas */}.menu li ul a {display:block;height:35px;font-size:12px;font-style:normal;margin:0px;padding:0px 10px 0px 15px;text-align:left;}.menu li ul a:hover, .menu li ul li:hover a{background:#2580a2; /* Color de las subpestañas al pasar el cursor */color:#ffffff;text-decoration:none;}

#search {width: 228px; /* Ancho del buscador */height: 22px;float: right;text-align: center;margin-top: 6px;margin-right: 6px;/* Imagen de fondo del buscador */background: url(http://4.bp.blogspot.com/_qgZA1ny_dAs/Szuhn02zO6I/AAAAAAAADdI/u2etpRWlwF8/s1600/search-bar.png) no-repeat;}#search-box {margin-top: 3px;border:0px;background: transparent;text-align:center;}

Puedes modificar los campos que estan destacados para personalizarlos y que se adapten al estilo de tu blog, luego debes guardar la plantilla. En este punto aún no podrás ver los resultados ya que solo son los estilos.
Ahora vamos a agregar el menú en el blog.
Ve a Diseño y agrega un gadget HTML/JavaScript, luego pega el siguiente código que corresponde a la estructura que tendrá el menú:
<div id='menuWrapper'><div class='menu'><ul><li><a href="URL del enlace">Pestaña 1</a></li><li><a href="#">Pestaña 2</a><ul><li><a href="URL del enlace">Pestaña 2.1</a></li><li><a href="URL del enlace">Pestaña 2.2</a></li><li><a href="URL del enlace">Pestaña 2.3</a></li><li><a href="URL del enlace">Pestaña 2.4</a></li></ul></li><li><a href="#">Pestaña 3</a><ul><li><a href="URL del enlace">Pestaña 3.1</a></li><li><a href="URL del enlace">Pestaña 3.2</a></li><li><a href="URL del enlace">Pestaña 3.3</a></li><li><a href="URL del enlace">Pestaña 3.4</a></li></ul></li>

<li><a href="#">Pestaña 4</a><ul><li><a href="URL del enlace">Pestaña 4.1</a></li><li><a href="URL del enlace">Pestaña 4.2</a></li><li><a href="URL del enlace">Pestaña 4.3</a></li><li><a href="URL del enlace">Pestaña 4.4</a></li></ul></li></ul><form action='/search' id='search' method='get' name='searchForm' style='display:inline;'><input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form></div></div>

Aquí puedes empezar a jugar, se pueden agregar o quitar pestañas, según tus necesidades.
En "URL del enlace" va la dirección que quieras que se acceda al presionar, donde dice "Pestaña" agregas el nombre que desees.
Recuerda guardar la plantilla original antes de comenzar a modificar todos los códigos que se han entregado en esta entrada.
Espero que les ayude y no olviden dejar sus inquitudes.
Fuente: http://ciudadblogger.com/