7. Caixa de pesquisas personalizada

Hello ｡◕‿◕｡

 

Depois de muitos tutoriais eu resolvi postar para vocês uma coisa que (eu acho) que vão gostar ^^ Da próxima vez eu vou ver se consigo postar como personalizar o Leia mais ou sei lá o que, ou talvez ensine a personalizar o Leia mais trocando o por uma imagem ou se não for nada disso vai ser exemplo de blockquote ou algo de blog =p

 

Tá, chega desses "assuntinhos", já me decidi! Irei postar sobre um menu bem legal que eu aprendi lá no KW. Espero que vocês gotem ^_^ Ahh e que eu me lembre depois vai ser o tutorial de "corrirgir erros de efeitos no HTML da nossa interface do blogger" :D Leia mais para saber o tutorial~
1. Vá no seu HTML e procure por: ]]></b:skin> e acima cole:

.search{
float: left;
font-family: arial !important; /* Fonte do campo de texto*/
}
.searchbar{
height: 20px; /*Altura da caixa*/
width: 120px; /*largura da caixa*/
text-align:center;
color:#000000; /* cor da fonte da caixa*/
background:#dcdcdc!important; /* cor de fundo da caixa */
box-shadow: inset 1px 1px 6px  #dcdcdc; /* sombra interna*/
font: 11px arial !important; /*fonte do texto*/
border: 2px solid  #000000; /* borda */
-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;
}

 

Botões ~>

2. Agora para a caixa aparecer em algum lugar, por favor cole isso em algum gadget: HTML/ Javascript:

<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>

E então? Gostaram do tutorial? Créditos a The Lovers que eu ainda lembro, mas ela não está mais entre nós Ç.Ç

-kissus-