Hoy toca el ansiado tutorial de poner el buscador en la barra superior ;) La verdad es que el resultado es genial y el buscador funciona a las mil maravillas, no como el que da blogger. Empezamos!
Lo primero de todo, es recordaros que este tuto es continuación de este otro, así que si os suena a chino ya sabéis donde tenéis que mirar primero ;)
PRIMERA PARTE: AÑADIR EL HTMLRecordad que teníamos que añadir en nuestra plantilla HTML algo como esto:
<div id='barra-superior'>
<div id='menu'>
<ul>
<li><a href='URL 1'>Nombre 1</a></li>
<li><a href='URL 2'>Nombre 2</a></li>
<li><a href='URL RED SOCIAL 1'><span class='socicon'>Nombre red social 1</span></a></li></ul>
</div>
</div>Pues bien, ahora vamos a añadir "un li" más, que es tal que así:
<div id='buscar-top'><form action='/search' id='searchthis' method='get' style='display: inline;'>
<input class='search-box' name='q' placeholder='BUSCAR' size='30' type='text'/>
</form></div>
Donde podéis cambiar el texto que está dentro de la cajita reemplazando lo que está en verde.
De forma que nuestro menú quedaría así:
<div id='barra-superior'>
<div id='menu'>
<ul><li><div id='buscar-top'><form action='/search' id='searchthis' method='get' style='display: inline;'><input class='search-box' name='q' placeholder='BUSCAR' size='30' type='text'/></form></div></li>
<li><a href='URL 1'>Nombre 1</a></li>
<li><a href='URL 2'>Nombre 2</a></li>
<li><a href='URL RED SOCIAL 1'><span class='socicon'>Nombre red social 1</span></a></li></ul>
</div>
</div>Por supuesto, si queréis tener el buscador en la derecha en vez de la izquierda, "el li" lo pondríamos al final ;)SEGUNDA PARTE: AÑADIR EL CSSAhora cuando os metáis al blog, veréis que queda descolocado y feo, para que esto no ocurra, vamos a añadir un poquito de CSS (Plantilla → Personalizar → Avanzado → Añadir CSS):
.search-box{ /*Para cambiar la apariencia de la cajita*/
width:75%; /*Tamaño de la caja entera*/
text-align:center;
padding:2px 0; /*Altura de cajita*/
color:#333333; /*Color de las letras cuando escriba el usuario*/
border:1px solid #cccccc; /*Tamaño, estilo y color del borde, si no queremos borde borrar la línea*/
background:#ffffff; /*Color de fondo*/
font: normal normal 11px Lato; /*Tamaño y tipografia de la palabra BUSCAR (o la que hayas escrito)*/
border-radius:2px; /*Bordes redondeados, si no los quieres, borrar esta línea*/
}
#buscar-top{ /*Para colocarla bien dentro de nuestra barra*/
margin-top:6px; /*Variar para colocarlo bien de altura*/
margin-right:170px; /*Variar para colocarlo bien a lo ancho*/
}
La primera parte no necesita explicación ;) Pero para la segunda os voy a decir alguna cosilla:
• Para colocarlo bien de altura: con ese valor yo creo que a todo el mundo le quedará bien, pero si no es así, aumentando este valor lo bajaréis más abajo y disminuyéndolo (puede tomar valores negativos) lo acercaremos más al tope de la página por arriba
• A lo ancho: esto ya es personal de cada blog, si lo vais aumentando se aproximará más y más a la izquierda, y al contrario, disminuyéndolo más a la derecha.
Nota: si habéis decidido poner el buscador a la derecha, seguramente tengáis que usar un valor negativo para esta última línea si lo queréis llevar muy a la derecha ;)
Espero que os haya gustado el tutorial y que lo compartáis mucho mucho ;) Que a parte de hacerme feliz y ayudarme, me dan ganas de hacer muchos más tutos :D
Pasad un jueves muy chachi!! Besotes muy fuertes!! Laura.