26 de nov de 2012

Personalizando a caixa de busca do Blogger

Olá anjos!

É, eu sei que prometi não sumir, mas aconteceu de novo. Nem vou me desculpar, odeio isso. Bom, estava pensando em fazer umas mudanças no blog, postar alguns textos, alguma coisa do tipo. Não sei bem o que fazer, como disse, estou pensando.

Eu ensinei aqui no blog a colocar uma caixa de busca personalizada. Hoje vou ensinar a personalizar a caixa de busca do Blogger, que na minha opinião, é muito melhor do que colocar uma. A caixa do Blogger procura de um jeito muito melhor, e aparece vários posts em uma especie de lista, a caixa que a gente coloca não. Créditos: Doce Sonho de Menina


A caixa vai ficar assim 

1- Vá no HTML do seu blog, aperte CTRL+F e procure por:

]]></b:skin>

2- Acima disso, cole:

td.gsc-input input {
    color: #3C0BD0; /*Cor da fonte da caixinha de pesquisar*/
    font-family:'Arial'; /*Fonte da caixinha*/
    font-size:14px; /*Tamanho da fonte da caixinha*/
    background: #E8E4F4; /*Cor do fundo da caixinha*/
    padding: 3px;
    border-radius: 0.5em 0.5em 0.5em 0.5em;
    -moz-border-radius: 0.5em 0.5em 0.5em 0.5em;
    -webkit-border-radius: 0.5em 0.5em 0.5em 0.5em;
    box-shadow: 0pt 1px 2px rgb(102, 102, 102) inset;
}
input.gsc-search-button {
    font-family:'Arial'; /*Fonte do botão pesquisar*/
    font-size:14px; /*Tamanho da fonte do botão pesquisar*/
    color: #fff; /*cor da fonte do botão pesquisar*/
    background: #D30AEE;/*cor do fundo do botão pesquisar*/
    border:0px;
    font-weight:bold;
    padding: 3px;
    border-radius: 0.5em 0.5em 0.5em 0.5em;
    -moz-border-radius: 0.5em 0.5em 0.5em 0.5em;
    -webkit-border-radius: 0.5em 0.5em 0.5em 0.5em;
    box-shadow: 0pt 1px 2px rgb(102, 102, 102) inset;
}
table.gsc-search-box td.gsc-input {
    padding-right: 8px !important;
}
input.gsc-search-button:hover {
background:#C06483;  /*Cor do fundo do botão pesquisar ao passar o mouse*/
color: #000; /*Cor da fonte do botão pesquisar ao passar o mouse*/
}
input.gsc-search-button:active {
background: #904B62; /*Cor do fundo do botão pesquisar ao clicar*/
color: #fff; /*Cor da fonte do botão pesquisar ao clicar*/
}
A explicação está no próprio código, então fique a vontade para personalizar a sua maneira.

Se sua caixinha ficar pequena, e você quiser colocá-la maior, acrescente o código:

form.gsc-search-box {
    font-size: 13px;
    margin: 0px 0px 4px;
    width: 115% !important;
}



7 comentários:

  1. Oi boa noite muda o layout deste blog já ficou manchado esse minha opinião.

    ResponderExcluir
    Respostas
    1. Eu sei Thalyson, mas estou sem tempo pra mexer com HTML.

      Excluir
    2. Eu lia errado :O kkkkkk' Desculpa ^^

      Excluir
  2. Oi, Marina, eu só vim avisar que eu, vou ter que ter pelo menos um cinco afiliados, pra criar, uma página pra eles! Espero que entenda! é que eu não posso criar uma página pra um blog só (acontece, que não é uma página qualquer, eu tenho que criar, pegar a URL, transformar, tirar e recolocar, e se tiver que mudar, irei ter que fazer tudo de novo, desculpe) T.T, -.-', >.<#

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!