23 de jul de 2012

Caixa de pesquisa personalizada

|| || ||

Hi Baby!

Hoje eu tenho aqui uma coisinha que além de ajudar as leitoras do seu blog, vai deixa-lo muito charmoso!
Quem é que gosta daquela caixinha sem graça do Google?! Acho que ninguém, né?! Mas caso você goste, e não é muito chegada naquele logo, eu tenho uma notícia pra você:
Tem um HTML que tira esse logo! Mas também tem o HTML que permite que você escolha qual botão você quer, e que permite também que você mesma faça o seu botão!
Peguei esses códigos lá no Hiper Girl
Caso você não saiba fazer o seu próprio buttom (botão), clique aqui
Lembrando que o buttom é só para o 2º modo.


1º Modo


Antes de tudo vá em layout e adicione no seu blog o gadget de pesquisa do blogger.
Agora vá em modelo > editar HTML
Aperte ctrl+F e procure por ]]></b:skin> 
Cole isso acima do código que você procurou: 

/*Para remover o logo do google*/.gsc-branding-text, .gsc-branding-img-noclear {display:none;}/* Personalização do Campo de texto */td.gsc-input input {border: 2px solid #e7e7e7; background:#fff; color:#ff0048; font-family:verdana; font-size:11px; } /* Fim da personalização do Campo de texto *//*personalização do botão*/input.gsc-search-button {font-family:'trebuchet ms'; font-size:14px; color:#fff; background:#ff0048; border:0px; font-weight:normal;  -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; }input.gsc-search-button:hover {background:#b779db; color:#fff;} /*fundo e cor do texto quando passa o mouse*//*fim da personalização do botão*/ 
Agora é só fazer as modificações de acordo com seu gosto. Se não quiser bordas arredondadas, apague o trecho em roxo.

2º Modo

Nesse outro modo você pode colocar uma imagem fofa no lugar do botão.
Vá em layout e cole o código abaixo em um gadget de html/javascript:

<form action="/search" class="search" method="get"><input class="searchbar" id="s" name="q" placeholder='Digite o que procura' type="text" value="" /><input class="searchbut" type="submit" value="" /></form>

 Você pode substituir o texto em roxo pela frase que quiser.
Agora vá em modelo > editar html e cole antes de ]]></b:skin> o código abaixo:

.search{float: left;font-family: Century Gothic !important; /* Fonte do campo de texto*/}.searchbar{height: 20px; /*Altura da caixa*/width: 190px; /*largura da caixa*/border-radius:15px;background:#fff;text-align:center;color:#ff048c !important; /*cor do texto*/font: 12px Century Gothic !important; /*fonte do texto*/}.searchbut{background: url('Url da imagem do botão');width:30px; /*Largura do botão*/height:30px; /*altura do botão*/border: 0;padding:7px;}

17 comentários:

  1. Eii ta rolando sorteio la no meu blog! Participa?
    http://blogger-boysattitudes.blogspot.com.br/2012/07/sorteio-eu-quero-um-ipad-ou-iphone.html

    ResponderExcluir
  2. super amei o tuto ^^
    s2hay.blogspot.com

    ResponderExcluir
  3. Amei! Caixa de pesquisa personalizada é #tudo!
    xoxo, Vickie♥
    ~~>www.chicletevioleta.blogspot.com.br

    ResponderExcluir
  4. passando pra conhecer seu blog.
    parabens pelo ótimo conteudo.
    adorei a dica.
    alias adorei o blog.
    bjuhs e otima semana pra tii.:)
    http://quecorusar.blogspot.com.br

    ResponderExcluir
  5. Adorei o tutu flor!

    O nome da fonte eu te passo sim,só q não vai dar agora,como ela é uma fonte cursiva não dá pra ler direito o titulo dela ao baixar,assim que eu conseguir "decifrar" ela não passo apenas pra vc e sim posto no blog pois acho q todo mundo tem direito de usa-lá além de mim né :D

    http://cupcakegoodies.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. ok flor eu ti entendo , eu procurei você pq a taís do perfeitinha blog se recusa dizer onde encontra !

      Excluir
  6. Oii, sou eu di novo, lembra?
    Nati Farias

    Aceita afiliação?
    Olhá lá o meu blog *-*

    hiper-girls.blogspot.com

    Beijos ;*

    ResponderExcluir
  7. adorei seu blog.. é lindo ;) Primeira vez de muitas que estarei visitando ;)

    www.ejhonas.com {Seguindo seu blog para a próxima meta. Se puder seguir o meu o link tá do lado *-*}

    ResponderExcluir
  8. Olá! Vim aqui para te convidar a acessar o blog Pink Berry. O blog novo e fofo, que precisa de sua ajuda para crescer! Poderia seguir meu bloguinho também! Smaaack!

    http://blog-pinkberry-oficial.blogspot.com.br/

    ResponderExcluir
  9. Há acabei de achar o teu bloguinho , e saiba que já viro um dos meus favoritos ;33 ,, não quero mais sair daquie rs'
    Já estou seguindo o blog se puder retribuir ficarei muito muito agradecida amore *,,*

    PS: Haá está rolando um sorteio no meu blog , o premio é super legal e sei que vose vai adorar então dá uma passada por lá e participa !

    bgs bgs katharine santos

    party-fucking.blogspot.com.br

    ResponderExcluir
  10. Oi fofis! obrigada por lembrar de mim! obrigada pelo Alô! e eu amei o tutorial só não fiz pq tô apressada mais depois passo aki.

    cherryepop.blogspot.com

    ResponderExcluir

- Sem ofensas, não seja mal educada.
- De sempre sua opinião.
- Por favor, não diga: "Seguindo, segue de volta?", comente e deixe o url do seu blog, se eu gostar, sigo;
- NÃO DEIXE O LINK DO SEU BLOG, ESTÁ SENDO CONSIDERADO COMO SPAM PELO GOOGLE, DEIXE SEMPRE ALGO DO TIPO : - Meu Blog - ou meublog.blogspot.
- Vagas para parceiros abertas;