¡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 == "") this.value = "Buscar...";' onfocus='if (this.value == "Buscar...") this.value = "";' 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
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!
ResponderEliminar¡Gracias!^^
Antes lo usé una vez, pero no me gustó y lo quité, así que... Pues nada, éso. ¡Un besito!
ResponderEliminarJuju probaré a ver que tal me sale^^
ResponderEliminarbesos
Pff no me fío a tocar el HTML xD
ResponderEliminarUn beso^^
Probaré a cambiarlo, aunque parece un poco complicado, jajajaja
ResponderEliminar¡Muchísimas gracias por vuestros tutoriales!
Besos :3
¡Muchas gracias por hacer el tutorial, en serio!
ResponderEliminarMe voy a poner a ello con el blog ^^. ¡Un beso!