Cheguei!! + Tutorial: Caixas de Pesquisa Personalizadas

Hellow! Cheguei do salão! Nossa, está um calor danado hoje hein! E o pior é o secador de cabelo que é muito quente, e a gente fica derretendo toda. Eu fiz cauterização no meu cabelo só que eu não quis alisa-lo pois é muito chato, e as mulheres ficam puxando muito o cabelo. Enfim, eu visitei um bloguito super fofo, a layout é muito linda, do bloguito Sonhos HTML. E trouxe comigo caixas de pesquisa super fofinhas, beijos >3< e fiquem com elas.

01 - Primeiramente esse código funciona para todas as caixinhas, que é o código que você vai por no gadget, certo? Pois bem, cole o código do quote abaixo dentro de um gadget.

<center><form action="/search" class="search" method="get"><br /><br /><input class="searchbarra" id="s" name="q" type="text" value="" /><br /><input class="searchbotao" type="submit" value="OK" /><br /></form></center>

-

                                                       

/----------CAIXA DE PESQUISA PERSONALIZADA-SonhosHTML------------/
.search{ /* Geral */
float: left;
margin-left: 0px;
margin-top: 6px; /* Margem superior, edite se precisar, - sobe e + desce  */
font-family: ARIAL, ARIAL;
FONT-SIZE: 5PX;
}
.searchbarra{ /* Barrinha onde se digita */
FONT-SIZE: 12PX;
height: 15px; /* Altura da barrinha */
width: 140px; /* Largura da barrinha */
margin-left:-50px;
margin-top:-45px; /* Margem superior, edite se precisar, - sobe e + desce  */
margin-bottom:-18px; /* Margem inferior, edite se precisar, - sobe e + desce */
color: #F394BF; /* Cor da fonte da letra que será escrita quando procurarmos por algo */
TEXT-shadow:0 1px 0px #; /* Sombra interna */
border:solid 1px #F394BF; /* Borda */
padding:3px 5px;
border-radius: 5px /* Bordas Arredondadas */
box-shadow:0 1px 0px ; /* Sombra interna */
background: #DDCCDD; /* Cor do fundo */
background-image: linear-gradient(to bottom, #FCE4EF 20%, #F5A9CB 100%, #fff 100%, #fff 100%);
}
.searchbotao{ /* Botão */
border:solid 1px #F394BF; /* Borda */
float: right;
background: #F5ADCE; /* Cor do fundo do botão */
cursor: pointer;
color:#fff; /* Cor do texto */
padding:0 5px 2px 5px;
height:22px; /* Altura do botão */
margin-top: -17px;
margin-right: 37px;
border-radius:0px;  /* Bordas Arredondadas */
box-shadow:0 0 2px #aaa; /* Sombra */
text-shadow:0 -1px #aaa; /* Sombra no texto Go */
}
.searchbotao:hover { /* Botão Hover */
color: #EF76AC;
background-image: linear-gradient(to bottom,  #FCE4EF 20%, #F5A9CB 100%, #fff 100%, #fff 100%);
}

----------------------------------------------------------------------------
                                              

/----------CAIXA DE PESQUISA PERSONALIZADA-SonhosHTML------------/
.search{ /* Geral */
float: left;
margin-left: 0px;
margin-top: 6px; /* Margem superior, edite se precisar, - sobe e + desce  */
font-family: ARIAL, ARIAL;
FOTN-SIZE: 5PX;
}
.searchbarra{ /* Barrinha onde se digita */
FONT-SIZE: 12PX;
height: 15px; /* Altura da barrinha */
width: 140px; /* Largura da barrinha */
margin-left:-50px;
margin-top:-45px; /* Margem superior, edite se precisar, - sobe e + desce  */
margin-bottom:-18px; /* Margem inferior, edite se precisar, - sobe e + desce */
color: #8B658B; /* Cor da fonte da letra que será escrita quando procurarmos por algo */
border:solid 1px #BE9EBE; /* Borda */
padding:3px 5px;
border-radius: 5px /* Bordas Arredondadas */
box-shadow:0 1px 0px ; /* Sombra interna */
background: #DDCCDD; /* Cor do fundo */
background-image: linear-gradient(to bottom, #F0E8F0 20%, #CCB3CC 100%, #fff 100%, #fff 100%);
}
.searchbotao{ /* Botão */
border:solid 1px #BE9EBE; /* Borda */
float: right;
background: #CCB3CC; /* Cor do fundo do botão */
cursor: pointer;
color:#fff; /* Cor do texto */
padding:0 5px 2px 5px;
height:22px; /* Altura do botão */
margin-top: -17px;
margin-right: 37px;
border-radius:0px;  /* Bordas Arredondadas */
box-shadow:0 0 2px #aaa; /* Sombra */
text-shadow:0 -1px #aaa; /* Sombra no texto Go */
}
.searchbotao:hover { /* Botão Hover */
color: #8B658B;
background-image: linear-gradient(to bottom, #F0E8F0 20%, #CCB3CC 100%, #fff 100%, #fff 100%);
}

----------------------------------------------------------------------------
                                              

/----------CAIXA DE PESQUISA PERSONALIZADA-SonhosHTML------------/
.search{ /* Geral */
float: left;
margin-left: 0px;
margin-top: 6px; /* Margem superior, edite se precisar, - sobe e + desce  */
font-family: ARIAL, ARIAL;
FONT-SIZE: 5PX;
}
.searchbarra{ /* Barrinha onde se digita */
FONT-SIZE: 12PX;
height: 15px; /* Altura da barrinha */
width: 140px; /* Largura da barrinha */
margin-left:-50px;
margin-top:-45px; /* Margem superior, edite se precisar, - sobe e + desce  */
margin-bottom:-18px; /* Margem inferior, edite se precisar, - sobe e + desce */
color: #8DB6CD; /* Cor da fonte da letra que será escrita quando procurarmos por algo */
TEXT-shadow:0 1px 0px #; /* Sombra interna */
border:solid 1px #8DB6CD; /* Borda */
padding:3px 5px;
border-radius: 5px /* Bordas Arredondadas */
box-shadow:0 1px 0px ; /* Sombra interna */
background: #DDCCDD; /* Cor do fundo */
background-image: linear-gradient(to bottom, #EAF0F7 20%, #B0C4DE 100%, #fff 100%, #fff 100%);
}
.searchbotao{ /* Botão */
border:solid 1px #8DB6CD; /* Borda */
float: right;
background: #B0C4DE; /* Cor do fundo do botão */
cursor: pointer;
color:#fff; /* Cor do texto */
padding:0 5px 2px 5px;
height:22px; /* Altura do botão */
margin-top: -17px;
margin-right: 37px;
border-radius:0px;  /* Bordas Arredondadas */
box-shadow:0 0 2px #aaa; /* Sombra */
text-shadow:0 -1px #aaa; /* Sombra no texto Go */
}
.searchbotao:hover { /* Botão Hover */
color: #8DB6CD;
background-image: linear-gradient(to bottom,  #EAF0F7 20%, #B0C4DE 100%, #fff 100%, #fff 100%);
}

----------------------------------------------------------------------------
                                                        

/----------CAIXA DE PESQUISA PERSONALIZADA-SonhosHTML------------/
.search{ /* Geral */
float: left;
margin-left: 0px;
margin-top: 6px; /* Margem superior, edite se precisar, - sobe e + desce  */
font-family: ARIAL, ARIAL;
FONT-SIZE: 5PX;
}
.searchbarra{ /* Barrinha onde se digita */
FONT-SIZE: 12PX;
height: 15px; /* Altura da barrinha */
width: 140px; /* Largura da barrinha */
margin-left:-50px;
margin-top:-45px; /* Margem superior, edite se precisar, - sobe e + desce  */
margin-bottom:-18px; /* Margem inferior, edite se precisar, - sobe e + desce */
color: #838B83; /* Cor da fonte da letra que será escrita quando procurarmos por algo */
TEXT-shadow:0 1px 0px #; /* Sombra interna */
border:solid 1px #838B83; /* Borda */
padding:3px 5px;
border-radius: 5px /* Bordas Arredondadas */
box-shadow:0 1px 0px ; /* Sombra interna */
background: #DDCCDD; /* Cor do fundo */
background-image: linear-gradient(to bottom, #F0FFF0 20%, #C1CDC1 100%, #fff 100%, #fff 100%);
}
.searchbotao{ /* Botão */
border:solid 1px #838B83; /* Borda */
float: right;
background: #C1CDC1; /* Cor do fundo do botão */
cursor: pointer;
color:#fff; /* Cor do texto */
padding:0 5px 2px 5px;
height:22px; /* Altura do botão */
margin-top: -17px;
margin-right: 37px;
border-radius:0px;  /* Bordas Arredondadas */
box-shadow:0 0 2px #aaa; /* Sombra */
text-shadow:0 -1px #aaa; /* Sombra no texto Go */
}
.searchbotao:hover { /* Botão Hover */
color: #838B83;
background-image: linear-gradient(to bottom, #F0FFF0 20%, #C1CDC1 100%, #fff 100%, #fff 100%);
}