23/03/2016

| |

Caixa de pesquisa personalizada para blogs.

Tenha no seu blog uma caixa de pesquisa personalizada.Escolha entre 4 opções e cores e faça o seu blog ficar mais organizado.




Olá, queridos amigos!!!

Mais um post importante para quem quer deixar o blog organizado, é colocar uma caixa de pesquisa personalizada no seu blog.Sei que o blogger nos oferece uma caixa de pesquisa, quando criamos um blog, mas eu acho tão sem graça!! Vocês não acham?


Então nesse post, você colocará a sua caixinha personalizada.Lembrando, que os códigos e os modelos, eu vi num blog muito legal, chamado CANTINHO DO BLOG.Façam uma visita ao blog.Eu gostei das caixinhas e o código é super fácil de colocar.Cada caixinha tem a largura de 307px.Caso ao colocar no seu blog, ela passar da sua barra lateral, faça como eu indico abaixo:

Vá para o seu painel, clique em MODELO e depois em PERSONALIZAR. Vai abrir a página abaixo:


No lado direito, você clicará em AJUSTAR LARGURAS. Vai aparecer essas duas barras.Você ajustará a barra LATERAL DIREITA ( ou se for esquerda, a mesma coisa ), para 340 ou como ficar melhor para você. Abaixo você terá a visualização do seu blog, como ele ficará.Se ficar bom, clique em APLICAR AO BLOG.Só isso!!!


Copiando os códigos:

Clique em LAYOUT, ADICIONAR UM GADGET e em HTML/JAVASCRIPT e cole o código da caixinha que mais te agradou.





<style type="text/css"> 
#w2b-searchbox{background:url(http://lh5.googleusercontent.com/-Cm6Ya53Wj6g/TeixHY3LRDI/AAAAAAAAA6I/jJkMnJEN60s/way2blogging_searchbox1.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} 
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>   
<div id="w2b-searchbox"> 
<form id="w2b-searchform" action="/search" method="get"> 
    <input type="text" id="s" name="q" value="Buscar..." onfocus='if (this.value == "Buscar...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Buscar...";}'/>
</form> 
</div>



<style type="text/css"> 
#w2b-searchbox{background:url(http://lh5.googleusercontent.com/-Cm6Ya53Wj6g/TeixHY3LRDI/AAAAAAAAA6I/jJkMnJEN60s/way2blogging_searchbox1.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} 
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>   
<div id="w2b-searchbox"> 
<form id="w2b-searchform" action="/search" method="get"> 
    <input type="text" id="s" name="q" value="Buscar..." onfocus='if (this.value == "Buscar...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Buscar...";}'/>
</form> 
</div>
  





<style type="text/css"> 
#w2b-searchbox{background:url(http://lh5.googleusercontent.com/-Cm6Ya53Wj6g/TeixHY3LRDI/AAAAAAAAA6I/jJkMnJEN60s/way2blogging_searchbox1.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} 
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>   
<div id="w2b-searchbox"> 
<form id="w2b-searchform" action="/search" method="get"> 
    <input type="text" id="s" name="q" value="Buscar..." onfocus='if (this.value == "Buscar...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Buscar...";}'/>
</form> 
</div>
<style type="text/css"> 
#w2b-searchbox{background:url(http://lh5.googleusercontent.com/-Cm6Ya53Wj6g/TeixHY3LRDI/AAAAAAAAA6I/jJkMnJEN60s/way2blogging_searchbox1.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} 
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>   
<div id="w2b-searchbox"> 
<form id="w2b-searchform" action="/search" method="get"> 
    <input type="text" id="s" name="q" value="Buscar..." onfocus='if (this.value == "Buscar...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Buscar...";}'/>
</form> 
</div>

  
 E ai amigos??? Gostaram do post?
Comentem, pois os seus comentários dão vida para o meu trabalho continuar aqui no blog,ok.
COMPARTILHEM NO WHATASAPP ESSA POSTAGEM, PARA QUE OUTRAS PESSOAS POSSAM SER ALCANÇADAS.O LINK ESTÁ ABAIXO DA DESCRIÇÃO DO AUTOR DO BLOG.SÓ QUEM TEM CELULAR É QUE VERÁ O LINK.BJSSSS!!!

Sobre o Autor:
Magda moreira Meu nome é Magda Moreira, sou professora e atualmente estou fazendo o curso de Pedagogia.Sou blogueira de coração e uma curiosa da internet.Meu blog Agenda dos Blogs tem como objetivos:Divulgação de blogs gratuitamente e elaboração de projetos e tutoriais voltados aos blogueiros.

4 comentários:

  1. Gostei da dica,da todo um diferencial ao blog,que ajuda na estética,amei ;)

    ResponderExcluir
  2. Adoro tutoriais! Personalizar da sempre um charma a mais no blog, gostei da dica. Super Beijos!

    Www.pausapracriatividade.blogspot.com

    ResponderExcluir
  3. Amo tutorias... Vou ver se mudo a minha pesquisa em um dos meus blogues. Achei esse uma gracinha...
    www.viciosdevaneios.blogspot.com.br

    ResponderExcluir
  4. Olá Magda...adorei a dica estou a ficar com o meu Blog muito completo....fabuloso...Obrigada

    ResponderExcluir

Deixe um comentário, que ficarei muito feliz!!!!!
Abraços á todos!!!!