May 16, 2015

Como colocar caixa de pesquisa no blog


   Oi gente, Resolvi aparecer por aqui haha. Hoje trago um tutorial bem simples mas que ajuda e muito os iniciantes e/ou pessoas que já estão no blogger a um bom tempo mas que ainda não entendem muito de html, css, ou simplesmente não se interessam por html e etc. Aviso: Pretendo voltar a postar regularmente - (se é que alguma vez já postei regularmente aqui no Âncora Vital). O motivo do blog estar tão desatualizado assim é bem cliche mas é a pura verdade ainda não consegui me organizar completamente com essa epidemia de greves dos professores e o trágico acontecimento no Centro Cívico intitulado como  "Confronto" que como previsto só bagunçou mais as coisas por aqui estampando guerra pela cidade "modelo" Curitiba. Enfim, continuando com o tutorial hoje vou ensinar como colocar caixa de pesquisa personalizada no blog, demo repetindo - é um tutorial muito simples considerado por mim: Nivel básico.
 PREVIEW/DEMO

1º Navegue até o editor HTML do seu Blog e pesquise por ]]></b:skin> (você pode usar as seguintes teclas para pesquisar pela tag): CTRL+F. Logo após ter encontrado, Copie o código abaixo e cole ANTES dela e salve o template. 
 #searchbox {
width: 240px;
}
#searchbox input {
    outline: none;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
    background: url(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;
border: 2px solid #f2f2f2;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #6A6F75;
    width: 160px;
    padding: 14px 17px 12px 30px;
    -webkit-border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    border-radius: 5px 0px 0px 5px;
    text-shadow: 0 2px 3px #fff;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}
#searchbox input[type="text"]:focus {
background: #f7f7f7;
border: 2px solid #f7f7f7;
width: 200px;
padding-left: 10px;
}

#button-submit{
background: url(http://4.bp.blogspot.com/-slkXXLUcxqg/VEQI-sJKfZI/AAAAAAAAAlA/9UtEyStfDHw/s1600/slider-arrow-right.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 43px;
height: 45px;
} 


2º Agora vá até o Layout>Adicionar um Gadget>HTML/JavaScript. Feito isso copie o código abaixo e cole dentro da janela que abrir e salve.

  <form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="ESCREVA AQUI..." />
<input id="button-submit" type="submit" value=" "/>
</form>

3º Se precisar alterar a largura da caixa de pesquisa encontre "width: 240px" no primeiro código e altere de acordo com a largura da sua sidebar, Espero que gostem é um tutorial muito simples mas que ajuda quem não sabe :) Encontrou algum erro neste post? Me envie um feedback. Duvidas? Nos comentários. 

COMENTE COM O FACEBOOK
4 COMENTE COM O BLOGGER

4 comments:

  1. Jurava que era bem mais difícil, mas me enganei haha.
    Estou esperando ansiosamente os próximos posts :D
    http://minhavidapor.blogspot.com.br

    ReplyDelete
    Replies
    1. Fácil né? :) kkk Estou me aventurando em uma pesquisa sobre Artistas Gráficos e já achei vários o dificil é escolher sobre qual postar hahah :D

      Delete
  2. Amei o estilo da barrinha, puro amor! <3
    Talvez eu a use quando for fazer meu próximo layout!

    | Acorda Paola |

    ReplyDelete
    Replies
    1. Olá, Verdade é bem fofo o estilo da barrinha combinou com o panda, amo pandas quero um, mas são selvagens :( kkkk. Obrigado por comentar :)

      Delete