Tuto Blog #1 - Como personalizar a barra de pesquisa

Oiii povooo! ^^ Tudo bem? Comigo está ótimo!

Hoje eu estou aqui, no primeiro tutorial do blog, eeee pra ensinar como personalizar a barra de pesquisa do seu blog. Pra fazer isso você não precisa ter o gadget de pesquisa. A barra de pesquisa irá ficar igual a do Dreams Tutoriais, mais é só você fazer os ajustes necessários e ficará com a sua cara!

Quer aprender? Clique no botão de leia mais e vamos começar! 

Créditos: - Blog Beleza Rosa {www} e Other Things {www} 




xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

1. Vá em Layout, e adicione um gadget HTML/JavaScript e cole o seguinte código.

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

2. Agora vá em Modelo, Editar HTML, dê um Ctrl + F, procure por ]]></b:skin> e cole o seguinte código a cima dele (a cima de ]]></b:skin>).

.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('http://i39.tinypic.com/25ezh8z.png'); /* Link da imagem do botão de pesquisar*/
width:30px;
height:30px;
border: 0;
padding:7px;
}

3. Faça as alterações desejadas no código a cima. Se precisas, use a tabela de cores {www}.

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Bem simples, né pessoal? Espero que tenham gostado! Qualquer dúvida comentem.

Beijinhooos, até o próximo tutorial!

Bianca✿ - 18/01/2014