Caixa de busca Elegante Blogger

Ter uma caixa de pesquisa em seu site é muito importante, pois faz com que o visitante que já está lendo algum conteúdo em seu site, procure mais informação em seu próprio site ao invés de buscar o que quer em outro site. Alem disso, temos que ter em mente que temos que oferecer o melhor conforto e facilidade aos leitores do blog.

A caixa de busca que vou compartilhar hoje, tem um design simples, porém muito elegante, o que dá ao seu blog um aspecto muito profissional. O código traz ainda muita facilidade para que você possa trocar as cores e até seu tamanho para que se adapte ao modelo de seu site/blog.

Vamos ao passo a passo:

Caixa de busca elegante no blogger

1. Acesse o painel do seu blog
2. Clique na guia "Layout"
3. Clique em 'Adicionar um gadget' → Escolha tipo'HTML/Javascript' e cole o código abaixo:

<!—Caixa de busca elegante By http://www.dicasblogger.org/ -->

<style>#search    {float:right; height: 30px; margin:10px 0 0 0; }
#search input.field {font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; background-position:top right; background-repeat:no-repeat; width: 160px; padding:7px; outline: none; font-size: 13px; border: none; z-index: 1; height:16px; float:left; padding-right:30px;}
#search input.field:focus {background-position:top right; background-repeat:no-repeat;}
#search input.submit {width:70px; height:30px; font-weight:bold; float:left; border:none; font-family: Arial, Helvetica, sans-serif; font-size: 13px; cursor:pointer; margin:0 0 0 1px;}
#search input.field {background-image:url(https://lh4.googleusercontent.com/-kWepQUL6ypo/T_bcpvbb5nI/AAAAAAAACFo/OhezBRoj15E/s30/search_icon.png); background-color:#2c2c2c; color: #FFF;}
#search input.field:focus {background-image:url(https://lh4.googleusercontent.com/-kWepQUL6ypo/T_bcpvbb5nI/AAAAAAAACFo/OhezBRoj15E/s30/search_icon.png); background-color:#404040;}
#search input.submit {background-color:#b60002; color:#fff;}</style>

<div id='search'>
<form action='/search' id='searchform' method='get'>
<div><input class='field' id='s' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Enter keywords..&apos;;}' onfocus='if (this.value == &apos;Enter keywords..&apos;) {this.value = &apos;&apos;;}' type='text' value='Enter keywords..'/>
<input class='submit' name='submit' type='submit' value='Buscar'/></div>
</form>
</div>

Altere as cores conforme o desejado, se você não lembrar ou conhecer códigos de cores, dê uma olhadinha nesse post que pode ajudá-lo.

• Código de cores para sites e blogs

Espero que tenham gostado! Qualquer dúvida, deixe seu comentário.

Fonte: Dicas Blogger

Share This :