Como hacer un menú horizontal con submenús y buscador integrado para blogger

En este tutorial para blogger voy a explicar, como realizar un menú horizontal que contiene varios submenús y un buscador integrado en la barra del Menú para uso exclusivo en blogger. Si estabas buscando un tutorial sumamente explicativo para usarlo en tu blog de blogger has llegado al sitio adecuado. Si no tienes un menú en tu blog de blogger hoy te voy a proporcionar un menú realmente estupendo, para que lo utilices en tu blog de blogger.

A continuación mire su demostración en mi blog de demos.

Bueno ahora vamos a trabajar

En primer lugar si usted esta utilizando un plantilla del diseñador de plantillas de blogger, necesitara seguir los siguientes pasos y si no usa la plantilla del diseñador de plantillas de blogger omita este pasó.

Para configurar el menú en una plantilla del diseñador de plantillas de blogger realice lo siguiente:

1 Abrir “Plantilla” y dele un clic en “Editar HTML”

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

2 Busca este código

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

  

Borre el código que esta marcado de color azul class='tabs' .

4 También deberas buscar este otro código

/* Tabs ----------------------------------------------- */

Y vas a ver que tienes un código extenso tal como se muestra en este ejemplo

/* Tabs ----------------------------------------------- */ .tabs-inner {   margin: .5em $(tabs.margin.sides) $(tabs.margin.bottom);   padding: 0; } .tabs-inner .section {   margin: 0; } .tabs-inner .widget ul {   padding: 0;   background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll bottom;   -moz-border-radius: $(tabs.border.radius);   -webkit-border-radius: $(tabs.border.radius);   -goog-ms-border-radius: $(tabs.border.radius);   border-radius: $(tabs.border.radius); } .tabs-inner .widget li {   border: none; } .tabs-inner .widget li a {   display: inline-block;   padding: .5em 1em;   margin-$endSide: $(tabs.spacing);   color: $(tabs.text.color);   font: $(tabs.font);   -moz-border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;   -webkit-border-top-left-radius: $(tab.border.radius);   -webkit-border-top-right-radius: $(tab.border.radius);   -goog-ms-border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;   border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;   background: $(tab.background);   border-$endSide: 1px solid $(tabs.separator.color); } .tabs-inner .widget li:first-child a {   padding-$startSide: 1.25em;   -moz-border-radius-top$startSide: $(tab.first.border.radius);   -moz-border-radius-bottom$startSide: $(tabs.border.radius);   -webkit-border-top-$startSide-radius: $(tab.first.border.radius);   -webkit-border-bottom-$startSide-radius: $(tabs.border.radius);   -goog-ms-border-top-$startSide-radius: $(tab.first.border.radius);   -goog-ms-border-bottom-$startSide-radius: $(tabs.border.radius);   border-top-$startSide-radius: $(tab.first.border.radius);   border-bottom-$startSide-radius: $(tabs.border.radius); } .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {   position: relative;   z-index: 1;   background: $(tabs.selected.background.color) $(tab.selected.background.gradient) repeat scroll bottom;   color: $(tabs.selected.text.color);   -moz-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);   -webkit-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);   -goog-ms-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);   box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15); } /* Headings ----------------------------------------------- */

Recuerda borrar todo el código que esta en esta sección hasta el termino de  /* Headings

----------------------------------------------- */

Y remplázalo por el siguiente código

#crosscol ul {z-index: 200; padding:0 !important;} #crosscol li:hover {position:relative;} #crosscol ul li {padding:0 !important;} .tabs-outer {z-index:1;}

Bueno luego de que hayan hecho todo le damos un clic en Guardar plantilla, ahora nos dirigimos a incrustar el código para que funcione el menú en nuestro blog de blogger, recuerda que los pasos anteriores eran para las personas que utilizan las plantillas del diseñador de plantillas de blogger, y si usted no utiliza una de estas plantillas omita los pasos anteriores y diríjase a realizar las siguientes instrucciones para colocar el código en su blog de blogger. Para las personas que utilizan plantillas del diseñador de plantillas de blogger deberán también seguir los siguientes pasos para que funcione el menú.

A continuación realice los siguientes pasos.

1 Abrir “Plantilla” y dele un clic en “Editar HTML”

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

2 Busca este código ]]></b:skin> y encima de el inserta el siguiente código.

/* by www.ayudadeblogger.com by www.grupodelecluse.com ----------------------------------------------- */ #menuWrapper { width:100%; /* Ancho del menú */ height:35px; padding-left:14px; background:# A62222; /* 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoyRQv3QL750lVlaqkixX_TH09Y83ToyBu7LI96fuwhg5pagu0jiPmwMbNoV9vDIwXb_Nt57R8AYF_pawBRsBM0P22gY2nLlHs_hpshkDk6READLyvIAwgDlCX9ZNDukXLpPMx1VWMvfw/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsP2LmoZy66etoQIjw68VSxiPwreHo8CDD9YxXhjcniFi0EfpRwOFROz86FxfpGNoe0fL2PCRtdGxkFhGaQ4kDv4hGIGTGCnEdQwLTmmBc6NQAbgfVVRm-3Dn3qh2JUogyi961LmjbG1I/s1600/search-bar.png) no-repeat; } #search-box { margin-top: 3px; border:0px; background: transparent; text-align:center; }

3 Ahora dale un clic en “Guardar plantilla”

4 Dirígete a “Diseño” y dale un clic en “Añadir un gadget” y busca el widget que dice “HTML/javascript” e inserta el siguiente código en su interior.

<div id='menuWrapper'> <div class='menu'> <ul> <li><a href="URL del enlace">Inicio</a></li> <li><a href="#">Contacto</a> <ul> <li><a href="URL del enlace">Mi blog</a></li> <li><a href="URL del enlace">Facebook</a></li> <li><a href="URL del enlace">Twitter</a></li> <li><a href="URL del enlace">Google +</a></li> </ul> </li> <li><a href="#">Informacion</a> <ul> <li><a href="URL del enlace">Mi blog</a></li> <li><a href="URL del enlace">Informacion</a></li> <li><a href="URL del enlace">Temas</a></li> <li><a href="URL del enlace">Encuestas</a></li> </ul> </li> <li><a href="#">Mi blog</a> <ul> <li><a href="URL del enlace">mi blog</a></li> <li><a href="URL del enlace">Informacion</a></li> <li><a href="URL del enlace">Temas</a></li> <li><a href="URL del enlace">Encuestas</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>

5 Luego de insertar el código podrás realizar los siguientes cambios al gusto tuyo

Donde dice URL del enlace inserta el link de tu página, y cambia el nombre por el que tu quieras Mi blog y así haces con los demás.

Ahora dale un clic en “Guardar” y visita tu blog, espero haya sido de mucha ayuda este tutorial para blogger.

¿Necitas ayuda?

Cualquier pregunta no dudes en hacérmelo saber y de inmediato te responderé

Saludos

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Menu desplegable

Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.