Tutorial.

Olá♥

Ainda me recuperando, mas agora me sinto muito bem >.<

Faz um tempinho que não posto tutoriais né? É que estava meio sem tempo de pesquisar algo pra postar aqui, mas resolve dar uma volta pelo Kawaii World  e acabei encontrando um tuto bem simples e bem legal pra ensinar a vocês. O tuto se chama Caixa de pesquisa personalizada, confiram.

Visualize a caixa aqui.

Primeiro vá no seu HTLM e procure por : ]]></b:skin>

Acima da tag encontrada cole o código abaixo:

.search{

float: center;

font-family: trebuchet ;}

.searchbar{

height: 26px;

width: 220px;

-webkit-transition-duration: .50s;

text-align:center;

color:#f9f9f9;

background: #77679a;

font: 12px trebuchet;

border: 1px solid  #5d5078;

outline: none;

-moz-box-shadow:inset 0 0 5px #8f87a2;

-webkit-box-shadow:inset 0 0 5px #8f87a2;

box-shadow:inset 0 0 5px #8f87a2;

-webkit-border-radius: 25px;

-moz-border-radius: 25px;

border-radius: 25px;

-webkit-border-radius:10px;

-moz-border-radius:10px;

border-radius:10px;

-webkit-box-shadow:0 0 1em #8f87a2;

}

.searchbar:hover{

color:#5d5078;

height: 29px;

-webkit-transition-duration: .50s;

background: #e6ede3;

border: 1px solid  #dfd7c3;

outline: none;

-moz-box-shadow:inset 0 0 5px #f2f2f2;

-webkit-box-shadow:inset 0 0 5px #f2f2f2;

box-shadow:inset 0 0 5px #f2f2f2;

-webkit-border-radius:10px;

-moz-border-radius:10px;

border-radius:10px;

-webkit-box-shadow:0 0 1em #e6ede3;

}

.searchbut{

background:;

width:0px;

height:0px;

border: 0;

padding:0px;

}

 Modifique apenas o que está destacado em vermelho, que são as cores da caixa usando a tabela de cores(^x^) . Agora em um Gadaget HTLM/JavaScripit cole o código a seguir.

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

Não modifique nada do código acima, salve. 

Créditos:

Kawaii World

Abraços♥