
Oi Amoras! Eu estava pensando em postar uma tutorial faz tempo... Então decidi ensinar vocês como colocar uma caixa de busca personalizada, eu acho super fácil!! (eu achei essa tutorial neste blog)
Pra começar vá em Layout > Adicionar um gadget > Escolha HTML/JavaScript. No gadget cole esse 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="GO" /></form>
Você pode trocar a palavra "Go" por qualquer outra, ela que vai ficar no botão de pesquisa.
Agora entre no seu HTML (Modelo > Editar HTML) e procure (F3) por }]]></b:skin> e acima dele colar o seguinte código:

Espero que tenham gostado
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="GO" /></form>
Você pode trocar a palavra "Go" por qualquer outra, ela que vai ficar no botão de pesquisa.
Agora entre no seu HTML (Modelo > Editar HTML) e procure (F3) por }]]></b:skin> e acima dele colar o seguinte código:
.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 */
}

Espero que tenham gostado
Muito legal *0*
ResponderExcluir