PRIMERA PARTE: AÑADIR EL HTML
Recordad 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>
<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>
</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í:
.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 ;)
<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>
<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>
<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>
</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 CSS
Ahora 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):
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*/
}
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 ;)
No hay comentarios: