16 de maio de 2012

Caixa de pesquisa personalizada


Bom,hoje vou ensinar para vocês como colocar aquela caixa de pesquisa personalizada no blogger.Pra quem não sabe,tá aqui a imagem:


Creio que várias pessoas gostariam dessa caixinha personalizada no blogger mais não sabem como fazer isso.Pois bem,hoje seus problemas acabaram.Vou ensinar esse tutorial.

 PS:Antes de tudo,cole uma cópia do seu HTML pois algo der dá errado é só você colocar novamente

TUTORIAL
Vá em DESIGN clique em ELEMENTOS DA PÁGINA e adicione um novo gadget.
HTML/JAVA SCRIPT
E dentro da janelinha cole o seguinte código


<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>

Ainda em DESIGN,vá para EDITAR HTML,clique CTRL + F e procure por:
]]></b:skin> 
Acima dessa tag,cole o seguinte código

.search{
float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */
font-family: Tahoma, Tahoma; /* Fonte */
}
.searchbar{
height: 20px;
width: 140px;
color: #FF82AB; /* Cor da fonte  */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo da parte onde escrevemos */
}
.searchbut{
background: url('http://i39.tinypic.com/25ezh8z.png'); /* Link da imagem do botão de pesquisar*/
width:30px;
height:30px;
border: 0;
padding:7px;
}
Visualize se nada estiver dado certo.Se sim SALVE
Espero ter ajudado vocês ♥
                                         

Nenhum comentário:

Postar um comentário

Comente a vontade, desde que saiba respeitar ;)
Ah, e não é necessário fazer uma conta para comentar, basta colocar como anônimo.

Emoticons:

♥❤∞ ☆ ★ ✖ 。◕‿◕。® ™ ☏✿゚✤
(◕‿◕✿) 。◕‿◕。 ⊱✿◕‿◕✿⊰(◡‿◡✿)(◕〝◕)◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐
●▂● ●0● ●︿● ●ω● ●﹏● ●△● ●▽●
⊙▂⊙ ⊙0⊙ ⊙︿⊙ ⊙ω⊙ ⊙﹏⊙ ⊙△⊙
≡(▔﹏▔)≡ ( ͡° ͜ʖ ͡°)