domingo, 21 de abril de 2013
Caixa de busca personalizada no cabeçalho
18:29 | 
Postado por
Unknown
Postado por
Unknown
Até que enfim (ou seria "em fim"?) tem tutorial novo, né? Não é muito complicado não, vamos lá:
1. Vá em Design, depois em Editar HTML, dê Ctrl+F e procure por:
<header>
Observação: Se não encontrar o código acima, procure por <div id='header-wrapper'> (o código é outro em diferentes modelos).
2. Cole ACIMA dele o código:
3. Dê Ctrl+F de novo, e procure agora por:
2. Cole ACIMA dele o código:
<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>
<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>
3. Dê Ctrl+F de novo, e procure agora por:
]]></b:skin>
4. Cole ACIMA dele o seguinte código:
#searchbox {
border: 0 none;
-moz-background-inline-policy: continuous;
background: url("http://evelynregly.com/images/nada.gif") no-repeat scroll 0 0 transparent;
display: block;
float: right;
height: 56px;
margin-right: 5px;
margin-top: 100px;
padding-left: 57px; }
#searchbox .textfield {
border: 0 none;
-moz-background-inline-policy: continuous;
background: #fff;
border: 0 none;
float: left;
height: 25px;
margin: 0px 0 0 -23px;
width: 143px; }
#searchbox .button {
background: url("http://img710.imageshack.us/img710/3599/okbymeninanerd.png") no-repeat;
border: 0 none;
cursor: pointer;
float: left;
height: 28px;
margin-left: 7px;
margin-top: 0px;
width: 30px; }
-moz-background-inline-policy: continuous;
background: url("http://evelynregly.com/images/nada.gif") no-repeat scroll 0 0 transparent;
display: block;
float: right;
height: 56px;
margin-right: 5px;
margin-top: 100px;
padding-left: 57px; }
#searchbox .textfield {
border: 0 none;
-moz-background-inline-policy: continuous;
background: #fff;
border: 0 none;
float: left;
height: 25px;
margin: 0px 0 0 -23px;
width: 143px; }
#searchbox .button {
background: url("http://img710.imageshack.us/img710/3599/okbymeninanerd.png") no-repeat;
border: 0 none;
cursor: pointer;
float: left;
height: 28px;
margin-left: 7px;
margin-top: 0px;
width: 30px; }
Visualize. Se estiver desalinhado, altere os números que eu destaquei em vermelho até ficar no lugar que você deseja.
Detalhes:
Margin-top: define a margem superior. Quanto maior o número, mais "pra baixo" fica.
Margin-right: define a margem direita. Quanto maior o número, mais "pra esquerda" fica. (Se quiser ir mais "pra direita" é só colocar o número negativo. Ex: margin-top:-15px; )
Você também pode mudar a imagem do "Ok", é só editar uma imagem de tamanho 30x28, assim como a área do texto, de tamanho 143x28.
Beijos.
Detalhes:
Margin-top: define a margem superior. Quanto maior o número, mais "pra baixo" fica.
Margin-right: define a margem direita. Quanto maior o número, mais "pra esquerda" fica. (Se quiser ir mais "pra direita" é só colocar o número negativo. Ex: margin-top:-15px; )
Você também pode mudar a imagem do "Ok", é só editar uma imagem de tamanho 30x28, assim como a área do texto, de tamanho 143x28.
Beijos.
Assinar:
Postar comentários (Atom)
Siga ao blogger
Me compartilhe.
Inscrever-se
Postagens
Comentários
0 comentários:
Postar um comentário