13.7.14

Tutorial: Caixa de busca personalizada

Oi!
Bom hoje eu trouxe um tuto de caixa de busca personalizada! A caixa de busca fica bem bacana! Da para mudar as cores e tudo! Vamos lá!


  • Click em Layout >> Adicionar um gadget >> HTML/JavaScript
  •  Copie o código.Cole esse código lá:


 <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://lh4.googleusercontent.com/-kWepQUL6ypo/T_bcpvbb5nI/AAAAAAAACFo/OhezBRoj15E/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://lh4.googleusercontent.com/-kWepQUL6ypo/T_bcpvbb5nI/AAAAAAAACFo/OhezBRoj15E/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>

  • Salve.


Eu negritei as cores que podem ser alteradas
-Cor da fonte
-Cor do fundo onde digitamos
-Cor do fundo do botão buscar
-Cor do fundo do botão buscar em hover

As cores são aquelas que estão com hashtag que são as cores hexadecimais em HTML, click aqui para acessar a Tabela de cores hexadecimais!

-P4nda

Nenhum comentário:

Postar um comentário

-Proibido brigas
-Comente se gostou da postagem
-Não comente palavrões ou comentários ofensivos
-Não comente spans e divulgação de postagens ou blogs, se não seu comentário será excluido.
-Comente a URL do seu blog para visitarmos!
-Comente no que devemos melhorar!
- Use sinais legais : ☁☀☃☂♣♥♪♫
Obrigada por comentar ;)