Caso alguma imagem do blog não esteja aparecendo, por favor, avise nos comentários da postagem em questão!

13/01/2012

Personalizar a caixa de Pesquisa


Gente, eu percebi que quase sempre eu começo o post falando de alguma coisa completamente diferente do post do dia, mas eu não me aguento, tenho que falar: na quarta feira o blog teve 504 acessos!!! Quinhentos e quatro, eu fiquei boba, é um recorde absoluto das estatísticas (geralmente eu só recebo por dia uns 300, no máximo 400 e uns quebrados e no FDS por volta dos cento e pouco, ou duzentos)!!! Obrigada por tudo, gente!!!

Agora sim eu vou ao post. Há um bom tempo eu venho percebendo que o blog recebeu um novo título pelos visitantes em geral, de "manual para a blogosfera". Eu me sinto lisonjeada com o título, mas ao mesmo tempo vem a responsabilidade de continuar fazendo tutoriais de qualidade para vocês...
Eu tinha parado um pouco com os tutos por causa do fim do ano (estava com o tempo reduzido na net), acabei só fazendo o que eu já tinha prometido, que era o tutorial de como desenhar o rosto do Chibi. Mas eu não deixei de ficar com saudades de "tutoriar" um pouco... Eu gosto tanto!!!
O tutorial de hoje é bem simples, mas é ao mesmo tempo um pouco chatinho porque tem muito código de cor. Eu recomendo que você preste bastante atenção para fazer tudo direitinho. Se tudo der certo, você terá no seu blog  uma caixa de busca semelhante a esta:


Não vai precisar de imagem nenhuma, só de mexer no código. Vou tentar explicar bem explicadinho...

Antes de mexer no código, se você não tiver uma caixinha de busca no seu blog,  adicione ela indo em Layout (Design) e adicione o gadget "Caixa de busca", no lugar onde você quiser que ela fique no blog.

1º Passo - Colocando o HTML:

Vá no Designer do Modelo, que fica na guia Modelo> Personalizar (o botãozinho laranja abaixo do seu template atual). Ao abrir completamente o Designer do Modelo (tem que aparecer uma visualização do seu template atual abaixo), clique na guia Avançado (última guia)> Adicionar CSS (última opção da lista), vai abrir uma caixa branca onde está escrito em cinza: "Adicionar o CSS aqui para substituir estilos existentes" (a menos que você já tenha colocado algum código, então vai aparecer o código que você colocou, cole o código embaixo dele). Aqui nós vamos colar o seguinte código:

td.gsc-input input {border:1px dashed #2A0048; color:#320057; font-family:'Arial'; font-size:12px; background:#EBE3F1;}

input.gsc-search-button {font-family:'Arial'; font-size:14px; color:#fff; background:#5F1C90; border:0px; font-weight:bold;}

input.gsc-search-button:hover {background:#C71585; color:#000;}

input.gsc-search-button:active {background:#DA63AE; color:#fff;}

O código que coloquei aqui é para as cores iguais as do DSM, se você colou tudo certinho a sua caixa de busca já vai ficar com as cores na visualização. No próximo passo, você vai aprender a como mudar as cores de cada coisa. Quem quiser colocar o código pelo "Editar HTML", basta colá-lo antes de ]]></b:skin>

2º Passo - Mudando as cores:

Como você já deve ter percebido, sua caixinha ficou roxa. Mas tem como mudar todas as cores da caixinha sem problema nenhum, e o melhor é que já vai mudando automaticamente na visualização. Eu só peço que você não apague os "ponto e vírgula" nem os "colchetes" nem outro caractere que não faça parte do hexadecimal. Para ver algumas cores, clique neste link para ver uma tabela com as principais cores em Hexadecimal e em Named Colors. No fim da postagem, vou pôr uns códigos já prontos. Vamos por parte, o primeiro código é:

td.gsc-input input {border:1px dashed #2A0048; color:#320057; font-family:'Arial'; font-size:12px; background:#EBE3F1;}

Esse trecho muda o estilo apenas da caixa onde se escreve a palavra que vai pesquisar.
  • border: muda o estilo da borda. 1px é a largura da mesma (se quiser você pode colocar 2px ou 3px), dashed é o tracejado da borda, se quiser a linha reta, troque por solid e se quiser pontilhada coloque dotted. #2A0048 é a cor. Você pode trocar por outro código hexadecimal (ex: #000000 para preto) ou por uma Named Color (ex: black).
  • color: é a cor da fonte da caixa. Você pode trocar por outro código hexadecimal (ex: #000000 para preto) ou por uma Named Color (ex: black).
  • font-family: é a fonte da caixa. Para trocar é só escrever o nome da fonte, como por exemplo 'Georgia' ou 'Verdana' ou qualquer outra fonte. Não se esqueça que ela é cercada por apóstrofos!!!
  • font-size: é o tamanho da fonte. Basta aumentar ou diminuir o número para mudar o tamanho.
  • background: é o fundo da caixa. Você pode trocar por outro código hexadecimal (ex: #000000 para preto) ou por uma Named Color (ex: black). Eu recomendo que você coloque uma cor bem clarinha ou o branco.
O segundo trecho é esse:

input.gsc-search-button {font-family:'Arial'; font-size:14px; color:#fff; background:#5F1C90; border:0px; font-weight:bold;}

Esse trecho muda o estilo do botão onde está escrito "Pesquisar".
  • font-family: é a fonte da caixa. Para trocar é só escrever o nome da fonte, como por exemplo 'Georgia' ou 'Verdana' ou qualquer outra fonte. Não se esqueça que ela é cercada por apóstrofos!!!
  • font-size: é o tamanho da fonte. Basta aumentar ou diminuir o número para mudar o tamanho.
  • color: é a cor da fonte do botão. Você pode trocar por outro código hexadecimal (ex: #000000 para preto) ou por uma Named Color (ex: black).
  • background: é o fundo do botão. Você pode trocar por outro código hexadecimal (ex: #000000 para preto) ou por uma Named Color (ex: black).
  • border: Na barra que eu fiz, esse botão não tem borda, mas você pode colocar se quiser. 0px é a largura da mesma, coloque 1 no lugar do 0 para que ela apareça (se quiser você pode colocar 2px ou 3px), coloque a palavra solid depois para colocar uma linha reta ou dashed para tracejada, para pontilhada coloque dotted. Por último coloque a cor acrescentando um código hexadecimal (ex: #000000 para preto) ou uma Named Color (ex: black).
  • font-weight: é para deixar o nome em negrito. Se não quiser o negrito, apague esse trecho.
O penúltimo código é:

input.gsc-search-button:hover {background:#C71585; color:#000;}

Esse código determina as cores do botão "Pesquisar" quando o mouse está em cima dele (não vai dar para ver na visualização).
  • background: é o fundo do botão. Você pode trocar por outro código hexadecimal (ex: #000000 para preto) ou por uma Named Color (ex: black).
  • color: é a cor da fonte do botão. Você pode trocar por outro código hexadecimal (ex: #000000 para preto) ou por uma Named Color (ex: black).
E finalmente o último é:

input.gsc-search-button:active {background:#DA63AE; color:#fff;}

Esse código determina as cores do botão "Pesquisar" quando clicamos nele (não vai dar pra ver na visualização.
  • background: é o fundo do botão. Você pode trocar por outro código hexadecimal (ex: #000000 para preto) ou por uma Named Color (ex: black).
  • color: é a cor da fonte do botão. Você pode trocar por outro código hexadecimal (ex: #000000 para preto) ou por uma Named Color (ex: black).
E pronto!!! Quando as cores estiverem todas corretas, clique em "Aplicar ao Blog". Se você ainda tem dúvidas sobre o assunto, deixe um comentário!!!

Agora, vou deixar aqui uns códigos já prontos (é só copiar e colar), com as três cores mais usadas nos templates:

Rosa:
td.gsc-input input {border:1px dashed mediumvioletred; color:mediumvioletred; font-family:'Arial'; font-size:12px; background:mistyrose;}

input.gsc-search-button {font-family:'Arial'; font-size:14px; color:#fff; background:palevioletred; border:0px; font-weight:bold;}

input.gsc-search-button:hover {background:hotpink; color:#000;}

input.gsc-search-button:active {background:fuchsia; color:#fff;}

Azul:
 td.gsc-input input {border:1px dashed royalblue; color:royalblue; font-family:'Arial'; font-size:12px; background:lightcyan;}

input.gsc-search-button {font-family:'Arial'; font-size:14px; color:#fff; background:steelblue; border:0px; font-weight:bold;}

input.gsc-search-button:hover {background:deepskyblue; color:#000;}

input.gsc-search-button:active {background:navy; color:#fff;}

Preto:
td.gsc-input input {border:1px dashed #666666; color:#666666; font-family:'Arial'; font-size:12px; background:lightgray;}

input.gsc-search-button {font-family:'Arial'; font-size:14px; color:#fff; background:black; border:0px; font-weight:bold;}

input.gsc-search-button:hover {background:darkgray; color:#000;}

input.gsc-search-button:active {background:dimgray; color:#fff;}


Mil Sweetkisses,
19 Comentários
Comentários

19 comentários:

  1. OLA JA ESCREVI MINHA HISTÓRIA NO BLOG:
    www.deconarts.blogspot.com

    ResponderExcluir
  2. Olá, adorei o blog =)
    Já estou seguindo, segue de volta?
    Beijos e bom fim de semana *-*

    ResponderExcluir
  3. ihhh ficou famosa, parabéns!!!!!!!!!!!
    tá tudo bem, já estou lavando o outro banheiro de novo e estou com um pocadinho de dor, só dei uma parada rápida q bom q vc recebeu tudo direitinho, bjus ´

    ResponderExcluir
  4. Afinal estamos ligadas em tudo , e por isso temos o nosso acervo feminino , que tera de tudo um pouco . Noticia , atualidade, makees ,moda,tutoriais , pensamentos , humor , e fofocas porque nao ? haha , e até mesmo futebol . afinal o brasileirao esta pra começar. Tudo pra deixar os meninos no chinelo . Acesse e participe do http://acervofemino.blogspot.com/

    ResponderExcluir
  5. Adorei o tutorial de hoje! Eu coloquei o codigo do rosa, ficou muito bonito *-*. Obrigada Sheila, seus tuto são demais! Bjs

    daimaginacaoaescrita.blogspot.com

    ResponderExcluir
  6. ótimo tutorial
    mais sucesso pra vc
    Boa sexta -feira!
    by: Veve Pink
    http://portal-pattys.blogspot.com

    ResponderExcluir
  7. Sheila, eu vou postar o seu desafio só estou me organizando eu ñ entendiii o selinho vc vai me dar ou eu é q tenho q postar, ahhhh eu vou postar sobre o livro

    ResponderExcluir
  8. Oiie floor !
    Lindoo o bloog, ameei as dicas ! =)
    Já estou seguindoo !

    Seguee ??
    http://girlsmakinghistory.blogspot.com/

    Beijoos !

    ResponderExcluir
  9. Obrigada também por visitar o Acervo :)'
    e parabéens pelo seu blog , sucesso gatinha !!! BEIJOS

    http://acervofemino.blogspot.com/

    ResponderExcluir
  10. Adorei o tutorial =)
    Depois vou fazer essa caixinha no meu *-*
    Bjs
    Dezessete em Diante / Facebook

    ResponderExcluir
  11. Oi sheila, vou dar uma olhada no desafio sim!!^^

    Ah, começou o Concurso de fotografia no meu blog onde 3 blogs irão ganhar e vão ser destaques por 1 mês no meu blog e nas minhas redes sociais. Se curtir, participa lá!! :)


    beijO :*

    ResponderExcluir
  12. OLá, amei o tuto, super utíl.
    Beijos
    http://sou-loca.blogspot.com/

    ResponderExcluir
  13. acho muito legal personalizar essas coisas...
    dá a nossa cara pro blog mesmo, né XD

    *-*

    beijos mil :*

    http://la--lullaby.blogspot.com/

    ResponderExcluir
  14. Ameeeei o tutorial rsrs*-*
    sucesso p/ vc flor!

    sempre q puder venho comentar aqui rs <3

    novo post lá no meu blog, :b

    bjs
    bnascimentooo.net.tc

    ResponderExcluir
  15. Queria convida-la a visitar o Embalaço e se gostar fique a vontade para seguir ^^ Sigo de volta...

    Novos marcadores semana que vem, não perca:
    http://embalaco.blogspot.com/2012/01/novos-marcadores.html

    ResponderExcluir
  16. Oi Sheila!
    Ah então....sobre o Analytics, não sei se é eu que coloquei apenas o código na página inicial do blog e não nas demais páginas, por conta disso talvez eu esteja com uma taxa de visitas baixas...não sei se é realmente baixo mas eu acho que é, levando em conta o que vejo os outros comentarem de seus blogs... Vc colocou o código do analytics em todas as páginas ou só na primeira?
    bjs!!!

    ResponderExcluir
  17. Sheila, gostei do tutorial! Quando eu tiver mais tempo, vou "embelezar" o blog com suas diquinhas *-*

    Beijos,
    http://sorvetedecupu.blogspot.com/
    @sorvetedecupu

    ResponderExcluir
  18. Sheila, amei esse tutorial você explica muito bem! consegui colocar no meu :D .Bjs
    crazyforfashion1.blogspot.com

    ResponderExcluir
  19. Otima dica... nessa de mexe aqui e mexe ali, esqueci de recoloca minha caixa de pesquisa... rsrsrsrs... lembrei graças a sua postagem, fim de semana fiquei em OFF total, PUTZ menina, as crianças andam dando trabalho danado e com isso do meu menino, ele não pode ficar pegando peso e tal, daí cuidado e de olho sempre.
    Eu depois vou ver se faço isso na minha caixa de pesquisa, dar uma personalizada é sempre bom!! =D

    http://www.artesdosanjos.com.br/

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...
Posts relacionados