Una barra de busqueda siempre es imprescindible para un blog. Lo que pasa es que la mayoria de estas vienen con un diseño bastante simple. Por eso he diseñado esta tan maja que la podemos aplicar a Blogger o a cualquier otra plataforma de blogs. La barra funciona con JQuery y en el CSS le he añadido colores gradientes en tonos azulados, ademas de bordes redondeados y sombras para darle un toque mas 'cool'.
Para añadirla a nuestro blog, lo primero es añadir los estilos en nuestra plantilla.
<style>
#searchContainer {
margin:20px;
}
/* Estilo de la barra de busqueda */
#field {
float:left;
width:150px;
height:32px;
line-height:27px;
text-indent:10px;
font-family:arial, sans-serif;
font-size:1em;
color:#000000;
border-radius:20px;
background: #fff;
border:solid 1px #6E7C86;
-webkit-box-shadow: 0px 0px 0px #000000;-moz-box-shadow: 0px 0px 0px rgba(0,0,0,.8);box-shadow: 1px 1px 1px #000000 inset, 1px 7px 7px rgba(0, 0, 0, 0.6);background-image: -moz-linear-gradient(center top , #B4CAD3, #ffffff) !important;}
/* Estilo del boton Buscar */
#submit {
background-image: -moz-linear-gradient(center top , #B6D3F4, #000000) !important;
border: 1px solid #9AC9FF !important;
border-radius: 18px 18px 18px 18px;
box-shadow: 0 1px 1px white inset, 0 3px 3px rgba(0, 0, 0, 0.6);
color: #F3F782 !important;
display: inline-block;
font: 600 14px/1.4 "myriad-pro-1","myriad-pro-2","Lucida Grande",Sans-Serif;
padding: 7px 7px;
position: relative;margin-left:10px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);}
}
/* Estilo del boton Buscar en hover */
#submit:hover {
box-shadow: 0 2px 6px white inset, 0 3px 3px rgba(0, 0, 0, 0.6);
}
#submit:active {
box-shadow: 0 2px 6px white inset, 0 1px 1px rgba(0, 0, 0, 0.6);
top: 2px;
}
</style>
Luego, en nuestra plantilla, antes de </head> ponemos el codigo JQuery Javascript.
<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript">
<script type='text/javascript'>
$().ready(function() {
// if text input field value is not empty show the "X" button
$("#field").keyup(function() {
$("#x").fadeIn();
if ($.trim($("#field").val()) == "") {
$("#x").fadeOut();
}
});
// on click of "X", delete input field value and hide "X"
$("#x").click(function() {
$("#field").val("");
$(this).hide();
});
});
</script>
|
Y por ultimo, alli donde queramos mostrarla, añadimos el codigo HTML.
<div id="searchContainer">
<form action="/search" method="get" name="SUYB">
<input id="field" name="q" type="text" /><input id="submit" name="submit" type="submit" value="BUSCAR" /></form>
</div>
|
Al igual que con el CSS, el Javascript tambien nos da muchas posibilidades en cuanto al diseño de texto se refiere. En este caso lo animamos como si las letras estuvieran bailando, a la vez que cambian de color y aumentan y disminuyen de tamaño. Para añadirlo a tu blog o web, solo tienes que copiar el codigo de abajo. Escribes el texto donde esta indicado en rojo, pero recuerda que tienes que escribirlo del reves para que se lea bien. 
