Elegantes Coloridos Search Boxes Para Blogger

En el este articulo te traigo una serie de Caja de Busqueda(Search Boxes)muy limpios y atractivos para que facilmente integrarlos a tu blog de blogger. Este sencilla Caja de Busqueda con la opcion de distintos colores.

Estos son en  PSD  diseñados por  Design3edge y convertidos para Blogger.

Como Añadir Cajas de Busqueda a Blogger

1. Entra en tu cuenta de Blogger  -> Diseño .
2. Da Click en Añadir un Gadget donde desees colocarlo.
3. Selecciona luego HTML/JavaScript de la Lista.
4. Pon el codigo de abajo de Caja de Busqueda dentro de este y luego Guarda el Gadget.

Estilo 1 de Caja de Busqueda

<style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5_j8AZFz9DWiWgEg4inOD5m4xwFETt1bR3MYpe1aifT4MUb80Iy3mKdGziQbozx9qNKQCdTFVpzhRsWh6b__rTboUiOVvcicZqMeVPw_doFEVmJ7Ku6zoGE3FsOBvq6yKp20LKyNpNDKC/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div>

Estilo 2 de Caja de Busqueda

<style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiWGD6Iyq-t_nB-EigE9_hoLAdJq1FlWwifR3xiCprZMLQO2PDoBDUAb8TDGzV2Tn-UYzIT7pUAAv7Bz_g7qplBsxjP3qjJcUp6_aS95y4siNLnfeBt5dfea7P5ChBLs4JVvoHVhi-yAoK/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div>

Estilo 3 de Caja de Busqueda

<style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA1hg1oNLc75E5zGB0jj8bLkuQA-_7GxTftN58oUIW-lx6Qhu3XiP1HedzuBlJXscOrNgyTJH-vy8_qYwkNiuSK_M-Z6FSFYd8y_vtVyfTIqPG-ImsSnIdq8TGfQVPkUcvqMoInGxAlqRW/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 12px;margin:0;} form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value=""/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div>

Bueno eso es todo espera que te sean de gran ayuda.

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati