Tutorial: Caixa de pesquisa para blog personalizada

Olá gurias e guris!
fazia muito tempo já que não fazia alguns tutoriais ai pra vocês e seriamente já estava com saudades né ,porque da ultima vez que postei um tutorial um monte de gente comentou lá no vídeo e eu amei.Então bora lá começar o tutorial:

Pra começar vocês vão clicar em Layout depois em adicionar um Gadget ira abrir uma pagina e em uma das escolhas ira estar escrito HTML/JavaScript e na janela que abrir cole isso:

&nbsp;<style>
#search {
float:right;
height: 30px;
margin:10px 0 0 0;
}
#search input.field {
font-family: "Arial","Lucida Sans Unicode",Arial,Verdana,sans-serif;
background-position:top right;
background-repeat:no-repeat;
width: 130px;
padding:7px;
outline: none;
font-size: 13px;
border: none;
z-index: 1;
height:16px;
float:left;
padding-right:30px;
}
#search input.field:focus {
background-position:top right;
background-repeat:no-repeat;
}
#search input.submit {
width:auto;
height:30px;
font-weight:bold;
float:left;
border:none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
cursor:pointer; margin:0 0 0 1px;
}
#search input.field {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiccKPw6YPNnzl8vNvvWjmgrZwh7ews2O5bxiZvrVMMmfqsShN6xCcLOJU_Eoqag9JixYb_HsRJZniQUlU906MsNQzLe4Lhzxr2MDsPUAEgtC-FvavlzgYIh7sjMX1Ur2gNJcIu1CwKQgsG/s30/search_icon.png);
background-color:#F7F0FE; /*cor de fundo de onde digitamos a busca*/
color: #000;/*cor de fonte*/
}
#search input.field:focus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiccKPw6YPNnzl8vNvvWjmgrZwh7ews2O5bxiZvrVMMmfqsShN6xCcLOJU_Eoqag9JixYb_HsRJZniQUlU906MsNQzLe4Lhzxr2MDsPUAEgtC-FvavlzgYIh7sjMX1Ur2gNJcIu1CwKQgsG/s30/search_icon.png);
background-color:#fff;/*cor de fundo do botão Buscar em estado hover*/
}
#search input.submit {
background-color:#DCB3FA; /*cor de fundo do botão Buscar*/
color:#fff;/*cor da fonte do botão Buscar*/
}
</style>
<div id='search'>
<form action='/search' id='searchform' method='get'>
<div><input class='field' id='s' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Digite sua busca..&apos;;}' onfocus='if (this.value == &apos;Digite sua busca..&apos;) {this.value = &apos;&apos;;}' type='text' value='Digite sua busca..'/>
<input class='submit' name='submit' type='submit' value='Buscar'/></div>
</form>
</div>

Esta pronto se quiser mudar alguma cor ,é bem fácil a onde cada coisa esta ,ta escrito do ladinho sua configuração ok .Se caso você quiser mudar a cor e não sabe o código click aqui.

E é assim que vai ficar a sua caixa de pesquisas:

 

Espero muito que vocês tenham gostado ,e se tiver alguma duvida pode comentar que respondo tudinho .Beijos Bruna...

Últimos tutoriais :

Como colocar menu fixo com barra de pesquisa