27 abril 2014

Posted at  11:58  |  in  


Bem, é super simples, antes de começar a mexer com html, vá em Layout > Adicionar um gadget > Escolha o de HTML/JavaScript. Dentro desse gadget 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 desejar, é ela que fica dentro do botão pra 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 */
}

http://goimagines.blogspot.com.br/2013/01/caixa-de-busca-personalizada.html

Share this post

About Naveed Iqbal

Nulla sagittis convallis arcu. Sed sed nunc. Curabitur consequat. Quisque metus enim venenatis fermentum mollis. Duis vulputate elit in elit. Follow him on Google+.

0 comentários:

About-Privacy Policy-Contact us
Copyright © 2013 Testes para Blogs. Blogger Template by Bloggertheme9
Published..Blogger Templates. Powered by Blogger.
back to top