Storm Design | Templates Exclusivos | Tutoriais de Web Design | Peça seu Template Exclusivo Grátis

Caixa de Pesquisa personalizada


Bem, só um fácil e rápido tutorial ^^
Primeiro vá em Editar Html
Pesquise por:

]]>

Cole acima dela o seguinte:

/* 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;  (pode ser removido)
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 campos em vermelho

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>

Só salvar e ver como ficou ^^

0 comentários:

Postar um comentário