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