Modelos para caixa de pesquisa (02) + novo layout

Gente! Como estão vocês? Dei um chá de sumiço pela falta de internet e pelo layout novo mais voltei. Bom, vamos falar do novo layout, aquela apresentação chata que a gente faz quando troca de design. Primeiramente, eu usei a maioria dos tutoriais daqui, alguns eu peguei de outros blogs (Kawaii World, Kawaii Things, Bunny Crazy, Cherry Bomb, The Moon Reverse, Yulk Way), e o resto de minha autoria. Enquanto as páginas, coloquei apenas o necessário, home > início, about > falando sobre o blog e sobre mim, afiliados > todos os afiliados do blog, themes > todos os layouts frees, faq > perguntas e repostas, you > a sua página inicial do blogger. Enquanto aos afiliados, estou com vagas ilimitadas, então caso queira se afiliar, entre em contato comentando na própria página. Eu retirei a páginas goodies, porque não acho necessária já que o blog é destinado somente a isso. Então, caso queiram algum tutorial, procurem na caixa de busca, talvez mais pra frente eu adicione uma ask, pra vocês fazerem pedidos urgentes. Eu gostei do layout, me trás harmonia, a paleta foi do KW e eu simplesmente amei ela. Espero que tenham gostado, depois quero saber oque acharam, hein? 

Eu fiz o meu 2 modelinho de caixa de pesquisa, ele não está lá aquelas coisas, mas vamos ver se vocês gostam. São exatamente 2 cores, divirtam-se, e creditem. 

1° cor (normal/hover)

Cole o código abaixo acima de ]]></b:skin> ou de ]]>

@font-face { font-family: "pixel"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }

.search{

float: center;

font-family: pixel;

}

.searchbar{

margin-left: -5px;

margin-top: 0px;

height: 10px;

width: 130px;

-webkit-transition-duration: .50s;

text-align: center;

color: #fff;

background: #cfd9f6;

font: 8px pixel;

border: 1px solid  #c2cce7;

outline: none;

}

.searchbar:hover{

border-radius: 4px; 

background: #f0cad2;

border: 1px solid #e7bdc9;

}

2° cor (normal/hover)

 

Cole o código abaixo acima de ]]></b:skin> ou de ]]>

@font-face { font-family: "pixel"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }

.search{

float: center;

font-family: pixel;

}

.searchbar{

margin-left: -5px;

margin-top: 0px;

height: 10px;

width: 130px;

-webkit-transition-duration: .50s;

text-align: center;

color: #fff;

background: #b6d7a8;

font: 8px pixel;

border: 1px solid  #93c47d;

outline: none;

}

.searchbar:hover{

border-radius: 4px; 

background: #f9cb9c;

border: 1px solid #eec49a;

}

 Bom, agora pra colocar a caixa no seu blog, adicione um gadget HTML / Java script e cole o seguinte:

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

A caixa estará colocada nele. Espero que tenham gostado, até mais! beijo.