Caixa de pesquisa personalizada para o Blogger

ID 13161461 © Andrey Navrotskiy

Olá amigos Mult-focos, vamos aprender hoje como fazer uma caixa de pesquisa personalizada para o Blogger.

Trazemos um estilo com seis cores diferentes onde um deles combinará certamente com o seu Blogger.

Desenhado por Design3edge 

A sua colocação é super fácil, basta escolher uma das seis cores, copiar o código correspondente, colar onde deseja colocar o gadget  caixa de pesquisa e esta pronto. Não sabe adicionar gadget? Aprenda aqui, vamos lá.

Modelo 1

<style type="text/css"> #MF-searchbox{background:url(http://i1316.photobucket.com/albums/t609/Multfocos/Estilo1_zpse7e365e5.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#MF-searchform{display: block;padding: 10px 12px;margin:0;} form#MF-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#MF-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <br /> <div id="MF-searchbox"> <form id="MF-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...";}'/><br /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form> </div>

Modelo 2

<style type="text/css"> #MF-searchbox{background:url(http://i1316.photobucket.com/albums/t609/Multfocos/Estilo2_zps4b36ad6e.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#MF-searchform{display: block;padding: 10px 12px;margin:0;} form#MF-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#MF-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <br /> <div id="MF-searchbox"> <form id="MF-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...";}'/><br /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form> </div>

Modelo 3

<style type="text/css"> #MF-searchbox{background:url(http://i1316.photobucket.com/albums/t609/Multfocos/Estilo3_zpsee41fdf0.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#MF-searchform{display: block;padding: 10px 12px;margin:0;} form#MF-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#MF-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <br /> <div id="MF-searchbox"> <form id="MF-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...";}'/><br /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form> </div>

Modelo 4

<style type="text/css"> #MF-searchbox{background:url(http://i1316.photobucket.com/albums/t609/Multfocos/Estilo4_zps433a7298.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#MF-searchform{display: block;padding: 10px 12px;margin:0;} form#MF-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#MF-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <br /> <div id="MF-searchbox"> <form id="MF-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...";}'/><br /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form> </div>

Modelo 5

<style type="text/css"> #MF-searchbox{background:url(http://i1316.photobucket.com/albums/t609/Multfocos/Estilo5_zps6d6c370c.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#MF-searchform{display: block;padding: 10px 12px;margin:0;} form#MF-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#MF-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <br /> <div id="MF-searchbox"> <form id="MF-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...";}'/><br /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form> </div>

Modelo 6

<style type="text/css"> #MF-searchbox{background:url(http://i1316.photobucket.com/albums/t609/Multfocos/Estilo6_zps3c0e0bd2.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#MF-searchform{display: block;padding: 10px 12px;margin:0;} form#MF-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#MF-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <br /> <div id="MF-searchbox"> <form id="MF-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...";}'/><br /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form> </div>


Bem pessoal realmente muito fácil e fácil também é você deixar seu comentário, valeu.