jueves, 12 de septiembre de 2013

Tutorial: Menú horizontal con subpestañas y buscador.

¡Hola, dragons!

Mientras Sweet Nothing termina los pedidos restantes, os traigo un nuevo tutorial, esta vez encargado por Dillaardi. Espero que os sirva y haga vuestros blogs más dinámicos. ¿De qué trata este tutorial? Pues de hacer un sencillo menú con buscador integrado, como muestra el de la imagen.

Parte 1

Antes de instalar cualquier menú que no tenga blogger, debemos seguir una serie de pasos:

1. Plantilla > Edición HTML > Plantilla de formato > Ctrl + F. Buscamos esto y eliminamos lo que está en rosa (si hay más de uno, bórralo tambien):

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


2. Ahora buscamos esta otra parte:

 /* Tabs

3. Y eliminamos todo lo que hay dentro de ello (en el caso de la plantilla Awesome sería esto):

/* Tabs
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}
#layout .tabs-outer {
overflow: visible;
}
.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;
border-top: 1px solid $(tabs.border.color);
}
.tabs-cap-bottom {
bottom: 0;
}
.tabs-inner .widget li a {
display: inline-block;
margin: 0;
padding: .6em 1.5em;
font: $(tabs.font);
color: $(tabs.text.color);
border-top: 1px solid $(tabs.border.color);
border-bottom: 1px solid $(tabs.border.color);
border-$startSide: 1px solid $(tabs.border.color);
}
.tabs-inner .widget li:last-child a {
border-$endSide: 1px solid $(tabs.border.color);
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
color: $(tabs.selected.text.color);
}
/* Headings
----------------------------------------------- */

4. Y en su lugar, coloca esto:

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

Ahora ya podemos agregar cualquier menú a nuestro blog.


*** 


Parte 2


1. Plantilla > Edición HTML > Plantilla de formato > Ctrl + f. Buscamos ]]></b:skin> y antes de ello pegamos:

/* 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;
}

2. Ahora podéis personalizarlo a vuestro gusto o dejarlo así.

3. Ahora vamos a diseño > Añadir un nuevo gadget de HTML/Javascript y pegamos esto:


 <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>

4. Aquí llega lo difícil. Hay que poner las URL de los enlaces donde se indica así como el nombre de las pestañas asignadas a cada URL.
Si quisieras poner otra pestaña antes de </ul> (mostrado en color ojo), pegas esto:


<li><a href="URL del enlace">Pestaña 5</a></li>

Y si quisieras que la pestaña tuviera subpestañas añades esto:

 <li><a href="#">Pestaña 5</a>
<ul>
<li><a href="URL del enlace">Pestaña 5.1</a></li>
<li><a href="URL del enlace">Pestaña 5.2</a></li>
<li><a href="URL del enlace">Pestaña 5.3</a></li>
<li><a href="URL del enlace">Pestaña 5.4</a></li>
</ul>
</li>

Y ya está. Sé que puede parecer un poco aparatoso, pero si haces cada paso lentamente y con cuidado te puede salir un menú precioso ^^

¡Un beso! 

*créditos a Ciudad blogger por el tip

6 comentarios:

  1. Yo lo intenté con algo parecido pero mi blog no sale lo de ]]> ,así que lo puse con el HTML y también funciona,¡A ver si con este si sale!
    ¡Gracias!^^

    ResponderEliminar
  2. Antes lo usé una vez, pero no me gustó y lo quité, así que... Pues nada, éso. ¡Un besito!

    ResponderEliminar
  3. Juju probaré a ver que tal me sale^^
    besos

    ResponderEliminar
  4. Pff no me fío a tocar el HTML xD

    Un beso^^

    ResponderEliminar
  5. Probaré a cambiarlo, aunque parece un poco complicado, jajajaja
    ¡Muchísimas gracias por vuestros tutoriales!
    Besos :3

    ResponderEliminar
  6. ¡Muchas gracias por hacer el tutorial, en serio!
    Me voy a poner a ello con el blog ^^. ¡Un beso!

    ResponderEliminar