Personalizando um Blog:: Como personalizar uma barra de pesquisa

Oie cada semana,dia ou até mesmo mês vai ter um Tema e "EU ACHO" que o Tema dessa Semana vai ser "Personalizando um Blog",digo que dessa SEMANA porque acho que ele vai durar umas 2 semanas,por isso que vai ser dessa Semana...
Voltando ao assunto "Personalizando um Blog",acho que vai ser bem dificil ajudar vocês,por que não sei muita coisa...MAIS hoje de qualquer jeito vou ensinar a como personalizar uma barra de pesquisa igual ao deste blog aqui a imagem:

Bom para quem quiser aprender Continue Lendo :D

Para deixar a barra de pesquisa super fofa faça isso:

Vá em Layout>Adicionar o Gadget>Escolha o HTML/JavaScript

Irá aparecer uma janela e nessa janela cole:

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

No Lugar onde está escrito GO mude para a palavra que quiser...

Depois vá em Modelo>Editar HTML>Dê ctrl+F e pesquise por:

]]><b:skin>

E quando achar ACIMA dele cole o seguinte código:

.search{ /* Geral */float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */margin-left: 0px;margin-top: 6px; /* Margem superior, edite se precisar, - sobe e + desce  */font-family: Tahoma, Tahoma; /* Fonte da letra que será escrita quando procurarmos por algo */}.searchbar{ /* Barrinha onde se digita */height: 18px; /* Altura da barrinha */width: 230px; /* Largura da barrinha */margin-left:0px;margin-top:-45px; /* Margem superior, edite se precisar, - sobe e + desce  */margin-bottom:-18px; /* Margem inferior, edite se precisar, - sobe e + desce */color: #ccc; /* Cor da fonte da letra que será escrita quando procurarmos por algo */border:solid 1px #ddd; /* Borda */padding:3px 5px;border-radius:2em; /* Bordas Arredondadas */box-shadow:0 1px 0px rgba(0,0,0,.1); /* Sombra interna */background: #fff; /* Cor do fundo */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')}.searchbut{ /* Botão */border:0 !important;float: right;background: #D9D9D9; /* Cor do fundo do botão */cursor: pointer;color:#fff; /* Cor do texto */padding:0 5px 2px 5px;height:26px; /* Altura do botão */margin-top: -20px; /* Margem superior, edite se precisar, - sobe e + desce  */margin-right: -35px; /* Margem direita, edite se precisar */border-radius:25px;  /* Bordas Arredondadas */box-shadow:0 0 2px #aaa; /* Sombra */text-shadow:0 -1px #aaa; /* Sombra no texto Go */}.searchbut:hover { /* Botão Hover */background:#F3A7C2; /* Cor do fundo do botão hover */}

Salve e visualize e se tiver tudo certo Ok's?!!

Bom espero que tenham gostado!

Postado por: Pandy