Tutorial: Personalizando a Caixa de Pesquisa

21.12.13 | | |

                                      Oiie Girls !!! *u* (mudando um pouco)

Hoje teremos um tutorial super fácil, que dá um toque especial na caixinha de pesquisa. Saindo do clima de Fanfic, um pouco. Postei uma atrás da outra, pois já tava escrita e eu tava sem assunto.... Pra Variar..
Hoje por incrível que pareça...não estou muito animada (Eh, verdade), pois fiquei sabendo dum treco aii, que me dexou de Cabeça Para Baixo. Sei que não sou de ficar assim...mas o treco é bem chato...

Mas chega, clique em LEIA MAIS !!


Vamos ao tutorial, em baixo como ficará o resultado:

 
 

Resolvi ensinar a vocês o modo mais fácil, que é em Gadget > Html
 
- Primeiro faça a imagem do botão com tamanho 30x30 (do mesmo tamanho do meu ali em cima)
- Depois salve e hospede a imagem em algum site de sua escolha. (Ex. Photobucket)
- Vá em layout e cole o código abaixo em um gadget de Html/Javascript.
<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" placeholder='Digite o que procura' type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>
 -Adicione o titulo desejado.(Ex. Está Perdida ??) e se quiser substitua o que está em azul, pela frase que quiser.
- Agora, vá em modelo > editar html e cole antes de ]]></b:skin> o código abaixo:

.search{
float: left;

font-family: Century Gothic !important; /* Fonte do campo de texto*/
}
.searchbar{
height: 20px; /*Altura da caixa*/
width: 190px; /*largura da caixa*/
border-radius:15px;
background:#fff;
text-align:center;
color:#ff048c !important; /*cor do texto*/
font: 12px Century Gothic !important; /*fonte do texto*/
}
.searchbut{
background: url('Url da imagem do botão');
width:30px; /*Largura do botão*/

height:30px; /*altura do botão*/
border: 0;
padding:7px;
}




Agora é só personalizar como quiser e salvar! Espero que tenham gostado e Créditos ao Cherry Bomb, pelos códigos. Beiijoos e o capitulo 3 da fanfic, irei reverter para rascunho e postarei semana que vem de novo, pra não ficar muito junto.



 

 
 
 

6 comentários: