Caixa de Pesquisa Personalizada


 Então, gente, eu estou procurando alguém para me ajudar nas postagens mais esta pessoa deve ter uma ortografia boa e com certeza deve saber criar uma bela postagem, caso esteja interessado (a), me contate pelo Twitter: @Jhoonasw . Desculpe não postar assim todos os dias mais, é que ainda não estou assim no pick para isto porém estou me esforçando.. Hoje estarei trazendo á vocês um tutorial, ela é uma caixa de pesquisa, muito linda ela, inclusive estou usando na sidebar, ele fica muito bom podem confiar e, é super fácil de fazer. Vamos começar!
 
Vá no Blogger  Designer  Editar HTML  Expandir Modelo de Widgets  Ctrl + F (Procure por:)
]]></b:skin>
 Logo acima, você deverá colar este código:

.search{ /* Nesta parte não mude NADA */
float: left;
margin-left: 30px;
font-family: Tahoma, Tahoma;
}
.searchbar{
height: 18px;
width: 140px; /* Largura */
margin-left:0px;
margin-top:-45px;
margin-bottom:-18px;
color: #FFF; /* Cor que aparece quando digitamos algo */
border:solid 1px #ddd;
padding:3px 5px;
border-radius: 10px;
box-shadow:0 1px 0px rgba(0,0,0,.1);
background: #fff; /* Cor de fundo, não precisa mudar */
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{
border: 2px solid #FF84AD; /* Borda do botão normal, apague se não quiser*/
float:right;
background: #FFF; /* Fundo do botão normal */
cursor:pointer;
color:#FF84AD; /* Cor da letra do botão normal */
padding:0 5px 2px 5px;
height:26px;
margin-top: -20px;
margin-right: -35px;
font-family: Tahoma, Tahoma;
border-radius:25px;
-webkit-transition-duration: .5s
}
.searchbut:hover {
background:#FFF; /* Fundo do botão Hover */
color: #734836; /* Cor da letra do botão Hover, apague se não quiser */
border: 2px solid #734836 ; /* Borda Hover */
-webkit-transition-duration: .5s
}
Você poderá mudar apenas as partes em negrito, este tutorial não foi feito por mim, e sim pelo WHH e está muito bem explicadinho como podem ver, parabéns WHH! Agora vamos á segunda parte:
Salve e Fecha  Layout  Adicionar Gadgets  HTML/Javascript  Cole este 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á Go, em negrito, você poderá colocar a sua palavra de pesquisa, como por exemplo, o botão onde você irá clicar pode ser "Go" "Pesquisar" e assim por diante..

4 comentários:

  1. Amei o tutorial! e o código nem é muito difícil, então os blogueiros nem vão precisar ficar batendo a cabeça com este tuto!!
    backlash7.blogspot.com

    ResponderExcluir
  2. Ooi eu estava passando em alguns blogs e resolvi dar uma passada no seu e realmente achei muito maneiroo ,adorei! Meus parabéns!
    By :Ester Blog : http://ester-macedo.blogspot.com.br/

    ResponderExcluir
  3. Jhoo, adorei o tuto! Tenho um blog de Tv Online dá uma olhada: tvz.bra.vc
    Tem filmes também ^^'

    ResponderExcluir
  4. Talvez eu use-a, ela é muito linda mesmo *uu* Ah Jhonas, eu gostaria tanto de postar aqui... Mas infelizmente estou completamente sem tempo. Espero que consiga alguém muito bom para postar!

    ResponderExcluir

© eJhonas - 2012. Todos os direitos reservados.
Design Jhonas Balsas.
Tecnologia do Blogger.
imagem-logo