Blog pronto+Big tutorial \o/

Oii garotas e garotos, o blog está pronto \o/ Por isso vamos comemorar isso com um "Big tutorial"Boom antes eu já tinha colocado um né ! (Mais aquele acho que todo mundo sabe)
Bom hoje eu vou encinar como "Personalizar a area de pesquisa" Eu adoro fazer Tutoriais para que deixe seus bloguinhos mais Cute .. Mais bem vamo parar de papo e vamos ver o tutu :D " A mais antes mil desculpas pela demora para postar é que eu tive que se mudar , e ai fiquei sem net por um tempo ..." Se que ver o tutu clique em Leia Mais...

Olha gente no meu blog não tem caixa de pesquisa :x , por isso não posso mostrar como que irá ficar depois que personalizar :( ..... Bom vamos começar ...

Abra o seu blog,vá em design>elementos da pagina>e Adicionar gadget>e a opçao HTML/Java Script e cole o codigo abaixo:

______________________________________________________________

<style type="text/css">

   <!--

   #form-busca {

   background: none;

   }

   #form-busca #sprocura{

   height: 18px; 

   width: 150px; 

   margin-top: 4px;

   margin-left: 0px;

   color: #453830; 

   border: 1px solid#FFC6FF;

   float: left;

   padding: 2px;

   background-color: #FFE4E1; 

   }

   #form-busca #bt-busca {

   height: 20px;

   width: 23px;

   background-image: url ( url );

   border: none;

   margin-top: 6px;

   float: right;

   cursor: pointer;

   background-repeat: no-repeat;

   background-position: left top;

   margin-right: 35px;

   }

   -->

   </style>

   <div id="barra-busca">

   <form id="form-busca" method=get       

 action="http:///teencorner-official.blogspot.com/search"><input id="sprocura" type=text name=q maxlength=255 value="O que você procura?" />

<input name=btng type=submit id="bt-busca" value="" />

<input type="hidden" name="domains" value="http:/teencorner-official.blogspot.com " /><input type="hidden" name="sitesearch" value="http:/ /teencorner-official.blogspot.com " />

</form></div>

______________________________________________________________

Note que o url Tc Aparece 3 vezes destacado em negrito,troque esse url pelo url do seu blog ..

Na frase "oque você procura" coloque o texto que vc quer que apareça' 

Bom agora vamos personalizar a caixinha *

Mais antes vamos entender a parte que se refere-se a caixa em si:

_______________________________________________________

  #form-busca #sprocura{

  height: 18px; (trata-se da altura da caixa, quanto maior o numero mais alta fica AVÁ)

  width: 150px; (trata-se da largura da caixa)

  margin-top: 4px;

  margin-left: 0px;

  color: #453830; (é a cor do texto)

  border: 1px solid#FFC6FF; (é a cor da borda da caixa)

  float: left;

  padding: 2px;

  background-color: #FFE4E1; (é a cor do fundo da caixa)

  }

_______________________________________________________________

Bom se quiser pega o codigo das corer veja na >Tabela de cores<

Para esclarecer:

Quanto maior o valor de  "margin-left" mais pra direita a caixa fique mais pra para esquerda use um nuumero negativo como -4px


Quanto menor o valor de "margin-top"