Sobre o Blog

MamanunesO Dicas e Templates Mamanunes nasceu da minha necessidade de registrar as descobertas que faço enquanto aprendo a desenhar templates para a plataforma Blogger. Compartilho aqui alguns truques, templates e informações que considero úteis para blogueiros e curiosos. Entre e fique a vontade.

Info

12.5.10

image
Com os truques do CSS3 podemos criar coisas muito interessantes. Por exemplo um círculo com efeito gradiente  (border-radius e box-shadow) sem usar nenhuma imagem.
Nesse tutorial veremos  uma caixa de busca muito linda e fácil de instalar,  criada por Nick La do Web Designer Wall.
Fiz algumas mudanças para o português. Você poderá mudar também, escrevendo o texto que queira dentro do box.image

Vamos ao tutorial.
Código CSS3
/* search form
    -------------------------------------- */
    #searchthis {
        display: inline-block;
        zoom: 1; /* ie7 hack for display:inline-block */
        *display: inline;
        border: solid 1px #d2d2d2;
        padding: 3px 5px;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius: 2em;

        -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
        -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
        box-shadow: 0 1px 0px rgba(0,0,0,.1);

        background: #f1f1f1;
        background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
        background: -moz-linear-gradient(top,  #fff,  #ededed);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
        -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
    }
   #searchform input {
        font: normal 12px/100% Arial, Helvetica, sans-serif;
    }
   #searchBox{
        background: #fff;
        padding: 6px 6px 6px 8px;
        width: 202px;
        border: solid 1px #bcbbbb;
        outline: none;

        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius: 2em;

        -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
        -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
        box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    }
   #submit-button {
        color: #fff;
        border: solid 1px #494949;
        font-size: 11px;
        height: 27px;
        width: 27px;
        text-shadow: 0 1px 1px rgba(0,0,0,.6);

        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;

        background: #5f5f5f;
        background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
        background: -moz-linear-gradient(top,  #9e9e9e,  #454545);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
        -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
    }
   


Se você já entende um pouco do assunto,  poderá alterar as cores das bordas, do background, do círculo, etc..

Código HTML
<form action='/search' class='right' id='searchthis' method='get'>

<input class="input-text" id="searchBox" name="q" onblur="if(this.value==&quot;&quot;)this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value=&quot;&quot;;" type="text" value="Pesquisar..." vinput="" />
<input class="searchbutton" id="submit-button" type="submit" value="Go" /></form>

Você poderá mudar o texto que vai dentro do box. Por ex: “Pesquisar... “ troque por “Buscar…”
E “Go” troque por “ ”ou um sinal como esse “ ► “

Como colocar no Blogger

Faça o login e em seu painel clique na opção ”layout” depois “Editar HTML

Na página de edição procure pelo trecho ]]></b:skin>

Cole o código CSS3 (o primeiro) ACIMA/ANTES de ]]></b:skin> e salve o template.

Volte a página “Layout” e clique em “Adicionar um Gadget” . Escolha um elemento HTML/Javascript.

Cole o código HTML (o segundo) dentro do box e salve. Clique sobre o gadget e arraste-o para o local onde deseja exibir a caixa de busca.

Agora é só visualizar e salvar.

IMPORTANTE:
Infelizmente, CSS3 e HTML5 não são os padrões para todos os navegadores(ainda). Como este box foi criado com CSS3, nem todos os navegadores mostram o efeito completo, mas isso não compromete em nada o funcionamento da caixa de busca. Veja as diferenças:
image

No exemplo abaixo eu mudei a cor do botão dentro do código CSS3 para a caixa de busca. veja:
image
Veja onde e como mudar. O código todo do botão é esse abaixo e em vermelho está o trecho que define a cor do botão. Aí você poderá mudar para a cor que queira. =)
#submit-button{     
    color: #fff;
    border: solid 1px #494949;
    font-size: 11px;
    height: 27px;
    width: 27px;
    text-shadow: 0 1px 1px rgba(0,0,0,.6);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    background: #5f5f5f;
    background: -webkit-gradient(linear, left top, left bottom, from(red), to(#454545));
    background: -moz-linear-gradient(top, red,  #454545);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='red', endColorstr='#454545'); /* ie7 */
    -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='red', endColorstr='#454545'); /* ie8 */
}
Outras modificações ficam por sua conta e criatividade. Faça testes, brinque um pouquinho e obtenha ótimos resultados (além da terapia hehe)
Beijo da Mama ♥

27 comentários

Max Martins

Oi, Mama!

Ótima dica!
Há algum tempo venho pensando em mudar minha caixa de busca.
Acho que ficou muito feia a do Google. Não combinou com o blog...sei lá. Não gostei de como ficou.
Tenho uma dúvida: essa caixa de busca vai funcionar como a do google? Ou seja, vai direcionar para o conteúdo interno ou para a web?

Abraços

Ziulab

A última linha do código
/style
não está sobrando?

MamaNunes

Oi Max
Vocë viu que legal?
Então, tive que corrigir alguns detalhes para que funcionasse corretamente. Veja na minha sidebar como está bacaninha (eu acho rsss)
A busca é feita somente nas páginas internas e não na web.
No site HTMHelen tem um tuto bem interessante para customizar a caixa do Google. Dá uma olhadinha.
http://www.htmhelen.com/2009/06/personalize-caixa-de-busca-do-blogger.html
Um abraço!



Ziulab
Já corrigí. Obrigada por avisar =]

Max Martins

Oi, Mama!

Obrigado pelo esclarecimento.
Gostei da sua caixa de busca.
Acho bem interessante quando fica discreto.
Fiz de tudo para arrumar a minha, mas não dá porque as cores que combinam com o layout ficam péssimas na página que abrem os resultados.
Vou modificar um pouquinho a cor e trocar a minha pela sua dica.

Abraços!

LUANA SOUSA

parabens , amei :D

Andressa Quadro

Oi Mama muito boa a sua dica!
Fiz um template novo a partir do minima e inseri essa caixinha de busca no meu horizontal. Ficou lindo o resultado.
Muito obrigada por compartilhar seu conhecimento e trazer novidades para nós
Abraços

Pedroquer

fiquei com uma dúvida, o botão de go ficou em baixo da caixa de pesquisa e não a esquerda D:

MamaNunes

@Pedro Augusto
O botão dessa caixa no tutorial está posicionado à direita.
Confira também se a largura (width) do espaço onde que colocá-lo é compatível com a largura da caixa.

Espero que tenha entendido hehe
beijo da Mama♥

Thiago

Olá mama,

Procurei muito uma caixa de pesquisa decente na internet e não achei nenhuma.

Essa além de funcionar de verdade, ela também é muito bonita (viva CSS3) \õ/

Mas no Chrome ela não esta funcionando tão bem quanto no Firefox.

Aparece um background meio cinza que eu nao consigo identificar de onde que é .

Você poderia me ajudar com isso?

Paulo Cesar

@Thiago
Comigo também esta assim mais é so no chrome mesmo ie fica quadradão e firefox fica perfect.

Mamanuses, dica pra um futuro tuto a busca personalizada do adsense com a aparência desta busca em css3.

A do adsense é muito feia e comum.

Isaac Valente

A minha está lá no cantinho dela, mas quando pesquiso postagens mais antigas, não acho o resultado, mostra como se nada foi encontrado!
Alguém sabe me dizer o porque e como posso fazer para resolver?
Desde já agradeço! Abraços

Tiras Velhas

Otimo !

Unknown

Muito bom valeu adorei a dica
...e combinou com o meu site :.D
http://www.freesteptube.cz.cc/

Sílvio

Essa caixinha é show de bola. Já instalei no meu blog e ficou 10

Vinicius

vlw vcs me ajudarão muito com esse tutorial

Anônimo

gostaria de saber se essa caixa de busca funciona no dreanweaver.
se funciona gostaria que me mostrase como inseri-la no porgrama.
agradeço desde já.

Vinícius Sammario

Se poder me ajudar coloquei a caixinha tudo certinho,mais quando eu faço uma busca ñ encontra.
O que devo fazer???

Henrique Lucas

CARA MUITO GRATO PELA DIXA AI .. FAZ Mó tempo que tava atras de uma caixa de pesquisa aquela que tem no blogspot é MUITO RUIm e a DO GOOGLE nem se fala valeu *-*

Thalita Oliveira

Adorei o tutorial Mama *O*O*O*O*O*O*O*O* .


Beijos

Thiago Malta

Boa tarde mama, existe algum template com busca refinada? tipo, sou corretor imobiliário e preciso de um template que consiga filtrar mais de dois aspectos ao mesmo tempo, tipo: Bairro, quantidade de quartos, preço, etc...já procurei e ainda não consegui achar.
Desde já agradeço, muito obrigado pelas dicas!!!

Anônimo

:D

Jessica

Eu estava procurando esse tutorial e nenhum funcionava!
O seu deu certinho.
Parabens.
Bjss
Jessica

Unknown

Amei seu blog meus parabens..! entre no meu blog gostaria de me afiliar ao seu blog se vc permitir... http://segredos-de-meninas-oficial.blogspot.com.br/

Lettier

Valeu, muito obrigado... me ajudou muito

Postar um comentário

Caso queira informações mais detalhadas, ou encomendar um template personalizado, use o Formulário de Contato ou meu Email. Responderei o mais breve possível.
Obrigada.