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(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; } |
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 == "") this.value = "Buscar...";' onfocus='if (this.value == "Buscar...") this.value = "";' 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
34 comentarios: