[Tutorial] Caixa de pesquisa personalizada para o cabeçalho


Achei esse tutorial no New All Layouts e decidi postar aqui. Confiram:

Um blog tem que ter uma caixa de busca, assim fica tudo mais acessível . Então vamos! Lembrando sempre de fazer isso em um blog de testes primeiro e depois em seu blog. Não sou responsável por algum problema que venha ocorrer com seu blog ok.

1° Primeiro temos que ir em Design, depois Editar HTML. Dê um CTRL+F vai aparecer uma caixa de pesquisa digite ou copie e cole nessa caixinha:

 <div id='searchbox'>
<form action='/search' id='searchthis' method='get'>
<div class='content'>
<input class='textfield' name='q' size='24' type='text' value=''/>
<input class='button' type='submit' value=''/>
</div> </form></div>



2° Encontrou? Então agora cole acima dele o seguinte código abaixo: 

<div class='content'> 
<input class='textfield' name='q' size='24' type='text' value=''/> 
<input class='button' type='submit' value=''/> 
</div> </form></div> 

3° Dê CTRL+F e procure por:

]]>

4° Cole o seguinte código abaixo, acima dele.

#searchbox {
border: 0 none;
-moz-background-inline-policy: continuous;
background: url("IMAGEM") no-repeat scroll 0 0 transparent;
display: block;
float: right;
height: 56px;
margin-right: 5px;
margin-top:304px;
padding-left: 57px; }

#searchbox .textfield {
border: 0 none;
-moz-background-inline-policy: continuous;
background:#FFFFFF;
border: 0 none;
float: left;
height: 26px;
margin: 0px 0 0 -23px;
width: 185px; }


#searchbox .button {
background: url("IMAGEM") no-repeat;
border: 0 none;
cursor: pointer;
float: left;
height: 28px;
margin-left:5px;
margin-top: 2px;
width: 30px; }


Visualize se estiver tudo ok salve.

Se ficar desalinhado onde está

margin-right: 0px;
margin-top: 0px; em rosa altere os valores até ficar certinho.

Você pode colocar uma imagem na área de texto ou deixar na cor branca somente, se for fazer uma imagem faça no tamanho 150x28. Na área do botão você pode fazer uma imagem no tamanho 30x30.

:: Créditos:  New All Layouts

Nenhum comentário:

Postar um comentário

Deixe seu comentário