Caixa de Busca //Personalizado

Tutor simples de como deixar a caixinha de buscar personalizada.

Let's Go!

- Vá até Modelo >> Editar HTML >> Aperte Ctrl+ F e pesquise ]]></b:skin> , acima dele cole o código abaixo:


.search{ text-align:center; font-family: Droid Sans !important; /* Fonte do campo de texto*/ } .searchbar{ height: 25px; /*Altura da caixa*/ width: 200px; /*largura da caixa*/ border-radius:15px; background:#fff; text-align:center; border: none !important; color: #7c4323; font: 12px Droid Sans !important; /*fonte do texto*/ box-shadow: inset 3px 2px 3px #dcdcdc, inset -1px 0px 3px #dcdcdc; } .searchbut{ background: url('URL DA IMAGEM'); width:30px; /*Largura do botão*/ height:25px; /*altura do botão*/ border: 0; padding: 7px; -webkit-transition-duration: .50s; } .searchbut:hover { BACKGROUND: URL('URL DA IMAGEM HOVER'); -webkit-transition-duration: .50s; }

Deixarei algumas no post.

- Imagens

Agora Salve.

Agora vá em Layout >> Adicionar um Gadget >> HTML/JavaScript e cole o código abaixo:


<form action="/search" class="search" method="get"> <input class="searchbar" id="s" name="q" placeholder='Digite o que procura' type="text" value="" /> <input class="searchbut" type="submit" value="" /> </form>

Agora é só conferir e personalizar do seu jeito.