Caixa de pesquisa personalizada

                  

Olha eu aqui de novo gente =). Agora vim com mais um tutorial que eu já devia ter postado á muito tempo, mais eu esqueci (¬¬ acho que já falei da minha leseira pra vocês) e a nossa seguidora Giovana acabou me lembrando. Ela pediu o tutorial de caixa de pesquisa personalizada. Bom, vou explicar pra quem não sabe o que é. Caixa de pesquisa é uma caixinha onde as pessoas podem pesquisar alguma postagem, página ou algo do tipo que esteja muito difícil de achar. Então, vamos ao tuto agora:

O resultado será esse aqui:

Vá no seu Blogger > Layout > Adicionar um Gadget > Escolha um gadget HTML/Java Script e nesse 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>

Onde está escrito Go, você pode colocar qualquer coisa, como ok, pesquisar, etc e depois disso salve. Agora vá no Modelo do seu blog > Editar HTML > Prosseguir > Aperte Ctrl + F e procure por }]]></b:skin> e acima dele cole esse 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 */}