Personalize a Caixa de Busca do seu blog (5 MODELOS)

03 março 2016

Olá!
Hoje eu trago mais tutorial bem fácil. Que tal personalizar a sua caixa de busca? É muito simples e com certeza vai deixar o seu blog ainda mais atraente. Então vamos ao Tutorial?!





Na área administrativa do seu blog. clique em LAYOUT - ADICIONAR UM GADGET - HTML JAVASCRIPT e coloque o código abaixo:


<style>#w2b-searchbox{background:url(Coloque a URL da imagem aqui) no-repeat scroll center center transparent;width:300px; /*--Largura da Imagem--*/height:55px; /*--Altura da Imagem--*/disaply:block;float: center; /*--Posicionamento da Imagem--*/ }form#w2b-searchform{display: block;padding: 10px 12px;margin:0;height: 8px;}form#w2b-searchform #s{padding: 6px;margin:0;width: 200px;font-size:14px;vertical-align: top;border:none;background:transparent;color: #151515;margin-top: 8px;}form#w2b-searchform #sbutton{margin:0;padding:0;height:10px;width:10px;vertical-align: top;border:none;background:transparent;  margin-top: 15px;margin-left: 32px;}</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...";}'/>     <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />  </form></div>

Onde está destacado de vermelho, é o local onde você pode mudar a frase que ficará exposta na sua caixa de busca, por exemplo: você pode trocar a frase "BUSCA..." por "Digite a sua busca" entendeu? Sempre dentro das aspas! Super simples =)

E o local que está destacado em azul, é aonde você colocará a url da imagem, ou seja o endereço dela, para que a caixa de busca funcione.

Mas Lory, como eu faço para conseguir a URL das imagens? A tia aqui já ensinou. Basta publica-la em um blog de teste no próprio blogger, e com o botão direito do mouse clicar em "Copiar o endereço da imagem" e será gerado um link que é a URL.

Mas eu preparei pra você 5 Modelos de caixa de busca, para você não perder mais tempo e já sair daqui personalizando seu cantinho. É claro, se você quiser pode criar o design da sua própria caixa, mas isso é assunto de um futuro post.

Na imagem acima listei os 5 modelos, e na frente de cada um, coloquei um número indicando, assim você poderá escolher qual modelo quer a partir da numeração, basta clicar no número correspondente ao modelo escolhido.

 1 - 2 - 3 - 4 - 5


E pra baixar é moleza! Basta clicar em DOWNLOAD como 
a seta está indicando na imagem abaixo.

Por hoje é só galera! Espero que tenham gostado, e qualquer dúvida, é só perguntar. Fiquem com Deus e até a próxima 0/

Beijos :*



2 comentários:

  1. Lorena você não sabe o quanto me ajudou. Por que você sabe que quando se é blogueira seja uma simples ajudinha ou dica já se muda tudo... Muito obrigada mesmo pela dica da caixinha de pesquisa, pois sempre tive a caixinha normal do blogspot mas digamos que ela não é tão bonita quanto essas.

    guriadevidro.blogspot.com.br

    ResponderExcluir
  2. Ain Laura, que fofa você é =) Eu fico muito feliz que tenha gostado e já fui lá visitar seu blog e vi a caixa de busca que você escolheu... Ficou muuuuito linda <3 Eu que agradeço imensamente a sua participação aqui no meu cantinho e saiba que ainda tem muita coisa boa vindo por ai, aguarde! 0/

    Um super bjoooo e sucesso lá no blog =)

    ResponderExcluir