Caixa de Pesquisa Personalisada


Olá pessoal!!Hoje vocês vão ver...Adivinhem...SIIIM um tutorial!
Vocês vão aprender a colocar uma caixa de pesquisa personalizada,vejam como vai ficar:

Boora  aprender como colocar essa caixinha super fofa??
SIIIIIIIIMM!
1º Passo: Você vai ter que ir no >>Painel do Blogger>>Desing >>Adicionar um gadget
2º Passo:Procure por HTML/JavaScript e cole o seguinte códico:

 <!-- INICIO WIDGET DE PESQUIZA PERSONALIZADA BY CANDYLLAND -->
<div class='search'>
<form action='/search' method='get'>
<fieldset><input name='q' placeholder='Pesquize aqui' type='text' value=''/><button type='submit'>GO</button>
</fieldset>
</form>
<style>
/**** RESET ****/
* {
border: 0;
outline: 0;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
margin: 0;
padding: 0;
font-weight: 400;
}
/**** SEARCH ****/
.search {
width:90%;
margin-left:9px;
margin-top:15px;
margin-bottom:-18px;
display:inline-block;
zoom:1;
*display:inline;
border:solid 1px #ddd;
padding:3px 5px;
border-radius:2em;
box-shadow:0 1px 0px rgba(0,0,0,.1);
background: #f1f1f1;
background:-webkit-gradient(linear, left top, left bottom,from(#fff),to(#ededed));
background:-moz-linear-gradient(top, #fff, #ededed);
filter:progidXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ededed');
-ms-filter:progidXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed')
}
/**** BOTAO ****/
.search button {
border:0 !important;
float:right;
background:#f9b;
cursor:pointer;
color:#fff;
padding:0 5px 2px 5px;
height:26px;margin-left:-20px;
border-radius:25px;
box-shadow:0 0 2px #aaa;
background:-webkit-gradient(linear, left top, left bottom, from(#e2c7a4), to(#876e59));
background:-moz-linear-gradient(top, #f9b, #ff1499);
text-shadow:0 -1px #aaa
}
/**** BOTAO HOVER ****/
.search button:hover {
background:#ff1490;
background:-webkit-gradient(linear, left top, left bottom, from(#ff1490), to(#f9b));
background:-moz-linear-gradient(top, #ff1490, #f9b)
}
/**** CAIXA DE TEXTO ****/
.search input {
border:0 !important;
float:left;
padding:6px 10px;
width:78%;
border-radius:15px;
background:#fff;
box-shadow:inset 0 1px 3px #ccc;
text-align:center;
cursor:text;
color:#777;
font:italic 12px georgia;
text-shadow:0 1px #fff
}
</style>
</div><div class='clear'></div>
<!-- FIM SEARCH [candylland.blogspot.com] -->

Se você quiser coloque um título Ex.:Perdido(a)?
Depois é só salvar e ver se deu tudo certo *-*
Espero ter ajudado!!
Um beijo ENORMEE pra vocês
Linda

4 comentários:

MI disse...

podes-me por nos afiliados já que ainda tens vagas!?

Cupcake Lover disse...

Tambem quero me afiliar!
Beijos, Jade

Best Friends disse...

Entao, vimos o seu topamos se afiliar ao seu blog, lembrado que sera provisório.

Entao, por favor coloque o nosso blog de afiliados no seu que nós já colocamos o seu no nosso!

um beijuuu

Bella e Linda

www.befys.blogspot.com

Best Friends disse...

Ja te afiliei!

bjs

Bella