Caixa de busca personalizada

10 de jul de 2013


Olá gente :)
Ai como é bom estar de ferias kkk 
Faz apenas 20 dias que estou de ferias e já parece que faz já uma eternidade
Hoje trouxe para vocês uma caixa de busca personalizada...


Já faz um, tempo que esse tuto está salvo aqui... e não me lembro de quem é...
Vá no editor de HTML do seu blog, clique nos três pontinhos do seguinte código:
Agora, aperfe Ctrl+F e pesquise por ]]></b:skin>. Acima disso cole:

.search{
float: left;
font-family: arial !important;}
.searchbar{
height: 20px; /*Altura da caixa*/
width: 120px; /*largura da caixa*/
text-align:center;
color:#CORFONTE;
background: #BACKGROUND!important;
box-shadow: inset 1px 1px 6px  #dcdcdc;
font: 11px arial !important;
border: 2px solid  #000000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.searchbut{
background: url('URL DO BOTÃO');
width:27px; /*Largura do botão*/
height:20px; /*altura do botão*/
border: 0;
padding:2px;
}
.searchbut:hover{
background: url('URL DO BOTÃO HOVER');
width:27px; /*Largura do botão*/
height:20px; /*altura do botão*/
border: 0;
padding:2px;
As partes em negrito são as que você pode personalizar. Url do botão e URL do botão hover é onde você coloca o link da imagem dos botões de pesquisa, respectivamente.
Agora, vá no layout do seu blog, adicione um novo gadget de HTML/JS e cole esse código:
<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>
Salve e pronto. Agora, fiquem com algumas imagens:

4 comentários :

Biiah Ana disse...

Adorei o tuto, muito legal, mas descobri um jeito mais rápido de achar o primeiro código... Nem precisa clicar nos 3 pontinhos, é só entrar em personalizar e Adicionar CSS ;3 Adoro o blog! *seguindo*

bjus' :*
http://blogdabiiah-official.blogspot.com.br/

Thamiris Lara disse...

Obg *--*

seguindo de volta no seu blog -Minion World

Volte sempre bjs :)

Naraa Braga disse...

seguindo aqui , simplismente adoreei suas dicas s2!

http://poderosacorderosaa.blogspot.com.br/

Thamiris Lara disse...

Oiie :) Obg florzinha *-*
seguindo de volta hehe

Volte Sempre !!

Postar um comentário

Seu Comentários é sempre bem vindo!
Comente,opine,se expresse! Este espaço é seu!
Comentar faz parte,então por favor deixem comentários

-Todos os comentários são moderados e só ficarão disponíveis ao serem aprovados
-A área de comentários não é casa da mãe Joana,então tenha respeito.Não use palavrões,nem insultos,ofensas,agressões e baixarias;
-Não serão aceitos comentários Anônimos,comentários repetidos,e que tenham qualquer material publicitários ou de merchandising pessoal ou de benefício de terceiros
-Contatos pessoais devem ser feitos na pagina de contato.
-Não deixe links desnecessários os comentários

AVISOS:

--Blog não é Chat,respeitadas as regras ,é livre o debate dos assuntos aqui postados,Que o espaço de comentários não sirva para bate papo sobre assuntos de caráter pessoal ou estranhos ao blog
--A tentativa de clonar nomes e apelidos de outros usuários para emitir opiniões em nome de terceiros configura crime de falsidade ideológica.

Espero que tenham gostado do blog e que volte sempre!