13 dezembro 2014

Caixa de pesquisa personalizada!

Prometi, então estou aqui! ;)
Como o modelo dos comentários, a caixa de busca do Blogger também é bem simples.
Dá para achar vários modelos na internet, para colocar no blog, por isso fiquei horas pesquisando.
Trouxe o que achei mais fofo. Coloquei até no blog.
Eu achei esse lá no Garota Imaginária.
 Ele fica assim:
Vá em Layout - Adicionar um Gadget - HTML/JAVASCRIPT
Cole o seguinte código, sem fazer nenhuma alteração.



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

Vá em Editar HTML, dê CTRL+F e procure por ]]></b:skin>
Acima desse código que você achou, cole o seguinte código
Nesse você pode fazer as alterações desejadas.

            .search{
float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */
font-family: TahomaTahoma; /* 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;
}

É isso. Espero que vocês consigam. 
Não se esqueça de deixar nos comentários como ficou no seu blog! ;)

Nenhum comentário:

Postar um comentário

Obrigada pelo comentário! ;*