16 outubro 2013

3

Como colocar caixa de pesquisa personalizada no seu blog?


Olá Cerejinhas, Tudo Bem? Bom voltei com os tutoriais que vocês tanto amam, e hoje eu vou ensinar como colocar uma caixa de pesquisa personalizada no seu blog, não é difícil é só seguir os passos que dá tudo certinho, está matéria é de uma afiliada do nosso blog é o  MB ..
Vá em Layout, a e adicione um gadget, Html/JavaScript e cole o código a seguir.

<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>
Vá em Modelo,  Editar HTML, aperte CTRL+F, procure por  ]]></b:skin> cole ACIMA :
.search{
float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */
font-family: Tahoma, Tahoma; /* Fonte */
}
.searchbar{
height: 20px;
width: 140px;
color: #FF82AB
; /* Cor da fonte  */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;
background: #FFF; /* Cor de fundo da parte onde escrevemos */
}
.searchbut{
background: url('http://i39.tinypic.com/25ezh8z.png'); /* Link da imagem do botão de pesquisar*/
width:30px;
height:30px;
border: 0;
padding:7px;
}
Mude o tamanho/medidas se quiser, e as cores também eu destaquei os códigos de cores para facilitar p/ vocês, se quiserem saber os códigos de cores clique AQUI para ver outras cores e os seus códigos. 
Mude a fonte de acordo com a fonte de todo o seu blog (se quiser).
Beijos e até a próxima...

3 comentários:

  1. Olá adorei seu blog...estou seguindo lá deixo meu convite pra vc estar conhecendo meu blog
    queziamakeup.blogspot.com.br
    já conhece minha fanpage
    curta e fica ligadinha nas novidades:)
    https://www.facebook.com/queziamake?ref=hl
    se inscrevam no meu canal: https://www.youtube.com/user/QueziaMakeup

    ResponderExcluir
  2. Oi Gabriela, tudo bom? Eu sou postadora no AE, e estou fazendo uma Tag com selinho, responde?
    Aqui
    Xx

    ResponderExcluir
  3. Amei como a caixinha ficou, estava procurando esse tutorial faz tempo, Obrigada :3
    Vou fazer no próximo Layout do blog.
    chocolateecapuccino.blogspot.com

    ResponderExcluir

-Antes de falar sobre qualquer outra coisa, comente sobre o post.
- Alguma dúvida ou algum pedido? Comente!
- Sim, visito o seu blog, mande o link! =)
-Favor não ofender ninguém, elogios e criticas são bem vindos, mas mantenha o respeito!
- Obrigada, GR!