3 de mar de 2013

Caixa de busca personalizada!


Oooii!! Tudo bem?
A Anna pediu o tutorial de como personalizar a caixa de busca, igual a que temos aqui no LT.

O tutorial é do blog Go Imagines, então, se reblogar, dê os créditos à ele!

Vamos começar o tuto?

Let's Go!!

Primeiro, vá em Layout--> Adicionar um gadget--> HTML/JavaScript e cole:

<form action="/search" class="search" method="get">

<input class="searchbar" id="s" name="q" type="text" value="" />

<input class="searchbut" type="submit" value="GO" />

</form>
Você pode trocar a palavra GO pela palavra que quiser, aqui no LT é OK.

Quer ver mais? Clique em READ MORE

Agora vamos personalizar:

Vá em Editar HTML, aperte CTRL+F ou F3 e procure por ]]></b:skin> e ACIMA dele cole:


.search{ /* Geral 
*/float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) 
*/margin-left: 0px;
margin-top: 6px; /* Margem superior, edite se precisar, - sobe e + desce   
*/font-family: Tahoma, Tahoma; 
/* Fonte da letra que será escrita quando procurarmos por algo */
}
.searchbar{ /* Barrinha onde se digita 
*/height: 18px; /* Altura da barrinha 
*/width: 230px; /* Largura da barrinha */margin-left:0px;
margin-top:-45px; /* Margem superior, edite se precisar, - sobe e + desce   
*/margin-bottom:-18px; /* Margem inferior, edite se precisar, - sobe e + desce 
*/color: #ccc; /* Cor da fonte da letra que será escrita quando procurarmos por algo */border:solid 1px #ddd; /* Borda 
*/padding:3px 5px;
border-radius:2em; /* Bordas Arredondadas 
*/box-shadow:0 1px 0px rgba(0,0,0,.1); /* Sombra interna 
*/background: #fff; /* Cor do fundo 
*/background:-webkit-gradient(linear, left top, left bottom,from(#fff),to(#ededed));
background:-moz-linear-gradient(top, #fff, #ededed);
filter:progidXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ededed');
-ms-filter:progidXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed')
}
.searchbut{ /* Botão 
*/border:0 !important;
float: right;
background: #D9D9D9; /* Cor do fundo do botão 
*/cursor: pointer;
color:#fff; /* Cor do texto 
*/padding:0 5px 2px 5px;
height:26px; /* Altura do botão 
*/margin-top: -20px; /* Margem superior, edite se precisar, - sobe e + desce   
*/margin-right: -35px; /* Margem direita, edite se precisar 
*/border-radius:25px;  /* Bordas Arredondadas 
*/box-shadow:0 0 2px #aaa; /* Sombra 
*/text-shadow:0 -1px #aaa; /* Sombra no texto Go  
*/}
.searchbut:hover { /* Botão Hover 
*/background:#F3A7C2; /* Cor do fundo do botão hover */}

Vocês entenderam né? Podem mudar tudo o que estiver em negrito :)

Visualize e salve!! 

Espero ter ajudado Anna ;)

Beijooooos
Duda

2 comentários:

  1. Duda, no meu tá dando erro, olha o botão tá para fora. E se eu colocar o botão na esquerda, ele fica embaixo da barrinha de pesquise... o que eu faço? Você não pode me passar o seu código igualzinho ai eu personalizo a partir dele? Porque fica estranho o botão para fora e nem se eu diminuir a largura da barrinha resolve...
    Olha: eusourebeldeevocebrasil.blogspot.com.br - é o último gadget.

    ResponderExcluir