Caixa de pesquisa personalizada no blog [001]

-Só eu que acho cenas de shounen ai kawaii?-

Primeiro venho fazer essa post trazendo não só mais um tutorial mas também para dizer que o blog chegou em seus 2479 postagens feitas por mim a Drw! Isso mesmo em 2 anos o blog já chegou em 2479. Sei que isso não tem nada haver com a post, mas para mim e uma grande alegria saber que consegui fazer isso sozinha, com pensamento que chegaria nem à um ano e 300 post e também agradecer as comentários e as visitantes que diariamente são 500 pessoas por dia. Eu realmente nunca pensei chegar a isso. Mas chega de blá blá blá vamos ao tutorial né? Vou mostrar hoje como colocar sua pesquisa personalizada esse tutu eu dou credito ao blog Other Things, façam uma visitinha ok? Então vamos lá?

*Usando a Própria pesquisa do Blog*

1. Esse modo é você usando aquela pesquisa padrão do blog, caso você não o tenha adicionado o vá em Elementos e coloque antes de começa a personalizar. Depois de tudo pronto vá em HTML e procure  por:  

]]></b:skin> 

2. Acima dele você coloca esse código:

Códigos

/*Para remover o icone do google*/
.gsc-branding-text, .gsc-branding-img-noclear {display:none;}
/* Personalização do texto */
td.gsc-input input {border: 2px solid #e7e7e7; background:#fff; color:#ff0048; font-family:verdana; font-size:11px; } /* Fim da personalização do texto */
/*Personalização do botão*/
input.gsc-search-button {font-family:'trebuchet ms'; font-size:14px; color:#fff; background:#ff0048; border:0px; font-weight:normal;  -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; }
input.gsc-search-button:hover {background:#b779db; color:#fff;} /*fundo e cor do texto quando passa o mouse*/
/*fim da personalização do botão*/

Agora basta modificar como quiser,  ae se não quiser as bordas arredondas só remover as partes em vermelho.

*Usando um gadget*

1.Adicione um gadget de html/javascript e dentro dele cole esse código:

Códigos

<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" placeholder='Perdido? Pesquise Aqui' type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>

A parte em vermelho você modifica pelo que desejar ok?

2. Depois de tudo pronto vá em HTML e procure  por:

]]></b:skin>

 

E acima dessa tag você coloca esse código:

Códigos

.search{
float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */
font-family: Tahoma, Tahoma; /* Fonte */
}
.searchbar{
height: 20px;
width: 140px;
color: #FF82AB; /* Cor da fonte */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo da parte onde escrevemos */
}
.searchbut{
background: url('IMAGEM'); /* Link da imagem do botão de pesquisar*/
width:30px;
height:30px;
border: 0;
padding:7px;
}

Bem fácil não é? Espero que tenham gostado e mais uma vez os créditos são de Other Things