quinta-feira

Caixa de Pesquisa Personalizada




Vou ensinar a colocarem uma caixa de pesquisa bem personalizada e no cabeçalho do blog. Encontrei esse tutorial no Go Imagine, então os devidos créditos. Este tutorial é bem recomendado para quem usou/usa este tutorial. O resultado será parecido com esse ai, mas podem mudar a cor de acordo com as cores de seus blog.

1º Passo - Vá em Layout>Adicionar um gadget>Escolha o de HTML/JavaScript. Dentro coloque o código a seguir, mas não coloquem título no gadget.
<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>
2º Passo - Agora vá em Modelo>Editar HTML, pressione Ctrl+F ou F3 e pesquise por }]]></b:skin> e ante dele cole:



.search{ /* Geral */
float: Right; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */
margin-Right: 0px;
margin-top: -85px; /* 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: 210px; /* Largura da barrinha */
margin-left:0px;
margin-top:-150px; /* Margem superior, edite se precisar, - sobe e + desce  */
margin-bottom:-18px; /* Margem inferior, edite se precisar, - sobe e + desce */
color: #000; /* Cor da fonte da letra que será escrita quando procurarmos por algo */
border:solid 1px #F0F0C0; /* 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: #A3D7D3; /* 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 #48AEA0; /* Sombra */
text-shadow:0 -1px #48AEA0; /* Sombra no texto Go */
}
.searchbut:hover { /* Botão Hover */
background:#8EB9B9; /* Cor do fundo do botão hover */
}
div#qTip {
padding: 3px; /*Espaço entre a borda e o texto*/
border: 1px solid #7EC9BF; /* Estilo da borda */
display: none; /*Não mexa*/
background: #50B6A8; /* Cor de fundo */
color: #fff; /*Cor da fonte*/
font-family: Verdana; /*Tipo de fonte*/
font-size: 9px; /*Tamanho da fonte*/
position: absolute; /*Não mexa*/
z-index: 1000; /*Não mexa*/}

Agora é só personalizar as cores, visualizar e se estiver rudo certinho, é só salvar e pronto.
A barra ficará na mesma localização da minha, caso queiram mudar, é só as 3 primeiras linha do código:
float: Right; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */
margin-Right: 0px;
margin-top: -85px; /* Margem superior, edite se precisar, - sobe e + desce  */

7 comentários:

  1. Olá !! Vim fazer uma visitinha e fiquei feliz em ver que o número de visitas está crescendo.
    Nosso GRUPO ENTRE BLOGS também está crescendo dia a dia, você já viu? São blogs diversificados e muito interessantes. Não deixe de visitar os blogs afiliados e colocar o comentário dizendo que chegou lá através do ENTRE BLOGS.
    Veja as DICA ENTRE BLOGS que tenho postado creio que vão ajudar.
    Vamos crescer juntos!!!

    CONVIDO A CONHECER TAMBÉM MEU OUTRO BLOG
    Crescimento Cristão-Maturidade



    BJUUSS

    CRIS
    Blog Crescimento Cristão

    Entre Blogs Grupo de Divulgação

    Fan Page Cristãos em Construção

    ResponderExcluir
  2. Olá Thiago, bom dia! Estou passando para conhecer o seu espaço...Adorei viu! Gosto muito de blogs explicativos,e a explicação dada neste texto é de muita utilidade...Parabéns pelo curso, eu também gostaria muito de fazer um curso de designer, acho bem legal. Te vi no Grupo Entre Blogs e cá estou para ficar com muito gosto.
    Beijos ღ˘◡˘ღ
    Marilene

    Blog folhas flores e sutilezas

    ResponderExcluir
  3. Parabéns Tiago , sou a blogueira do http://tornandomoda.blogspot.com.br/ , gostei do seu espaço aqui . Segui o seu blog ! Parabéns

    Beijoooo

    ResponderExcluir