Personalize a caixa de pesquisas no seu Blogger
Que tal inserir no seu Blogger uma caixa de pesquisas igual a essa que você vê neste site?
Então vá em “Layout”, clique em "Adicionar um Gadget" e procure pelo gadget "HTML/JavaScript".
Em "Título" digite o “Pesquisar”, ou o quê você quiser.
Agora copie o texto a seguir e cole em “Conteúdo” do box "HTML/JavaScript ":
<style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg09SskLifsac20fUFysQDCr3Ep_pDTEzI0QVq1B5LxRXimk33wbdgx5r6Z7PkGruwQnOHZ-u3s8fIu-FSqve2S6fsMgf3HKZaeElc5_YcFgAxH0yemH86OT4wbv7UoGSz43DqDiVRly6hM/s1600/search-box.png) no-repeat;
}
#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: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
color: #f2f2f2 !important;
padding: 10px 35px 10px 20px;
width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}
#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizU1lgtEmr7mRcj9L7MkAoqNYMccBMvfKA0bEpEnddM-SQe1UbPNiVeRiafGcu4RdIXYtm4ZDstgXUWLDrZNYtdhfnUkb1ybdQCB5MaZ0lIILwUxw4HmIaEQcRFuFwK1xEnA1Z9dJX-5uM/s1600/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNY7JleJ-DAaY3RFu6wfF9mi-IPxIqM0Xk5Iah9NIjtgCpnZG_eJeZU2nDfhxj8NJ0_VADYeGE4lo8-3pOoF6zBvTybrb301JSunvyUFS48mPSGk_oGUA8NHVGzd2VVZ8cWyOPXpgwKFZH/s1600/search-icon-hover.png);
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Digite aqui sua pesquisa..." />
<input id="button-submit" type="submit" value=" "/>
</form>
Pronto! Agora você tem uma caixa de pesquisa moderna e personalizada.
Espero que estas dicas tenham sido úteis!
Um abraço,
Flávio Del Puente
Gerente de Marketing Digital
International Sites Brasil
Matéria publicada por International Sites Brasil (www.internationalsites.com.br), em parceria com a Gráfica Muito Mais Barata (graficamuitomaisbarata.blogspot.com.br) e o Portal Consultas Contábeis (consultascontabeis.blogspot.com.br). Editores: Flávio Del Puente (Vendas e Marketing), Clara Cont (Contabilidade e Finanças) e Mauro Marques (Gestão e Empreendedorismo).