Venho trazer para vocês hoje um tutoria para personalizar a caixa de busca do seu site/blog. Espero que gostem, se for útil deixe seu feedback em baixo para nós ajudar e compartilhe com seus amigos.
Procure pela seguinte tag:
]]>
Cole acima dela o seguinte CSS:
/* Busca
----------------------------------------------- */
.buscador {
margin:0pt;
padding:0pt;
}
.buscador span {
margin:0pt;
padding:0pt;
}
#search{
display: none;
}
#sidebar form {
margin:0;
padding:1px 0;
clear:both;
}
.searchtitle {
font:bold 14px "Aldo", sans-serif, "Lucida Sans", Tahoma!important;
color:#fff;
}
#searchform {
margin: 5px auto ;
padding: 0;
}
#searchform #s {
height:20px;
width:180px;
margin-left:10px;
font:14px Verdana, Arial, Helvetica, sans-serif;
border:1px solid #272727;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
}
#searchsubmit {
padding:0;
background:#272727;
color:#fff;
text-shadow: 0px 1px 2px #000;
border:1px #000;
width:60px;
height:22px;
font:14px "Arial", "Lucida Sans Unicode", Verdana;
font-weight:normal;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-bottomright: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
}
#searchsubmit:hover {
background:#ccc;
color:#000;
text-shadow: 0px 1px 2px #fff;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-bottomright: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
}
Edite os seguintes campos:
height:20px;/* altura do campo de busca */
width:180px;/* largura do campo de busca */
font:14px/* tamanho da fonte */
background:#272727;/* cor do button de pesquisa */
width:60px;/* largura do button de pesquisa */
height:22px;/* altura do button de pesquisa */
Agora vá em adicionar um novo Gadget, e adicione o seguinte html:
<div class='buscador'>
<span>
<form action='/search' id='searchform' method='get'>
<table border='0' cellpadding='0' cellspacing='3'>
<tbody>
<tr>
<td><input id='s' name='q' type='text' value='Pesquisar...'/></td>
<td><input id='searchsubmit' type='submit' value='Buscar'/></td>
</tr>
</tbody>
</table>
</form>
</span></div>
Pronto!