Barra de pesquisa no topo

Não se esqueça de antes de começar, salvar umacópia de seu template, caso não dê certo, é só reinstalá-lo.

Depois de salvo, encontre o código <b:skin><![CDATA[

Cole depois dele o código abaixo:

/*
The Search */

#search
{

height:40px;

width:auto;

padding:20px 0px 0px 5px;

width:225px;

float:right;

}

#search
form {

margin: 0;

padding: 0;

}

#search
fieldset {
margin: 0;

padding: 0;

border: none;

}

#search
p {

margin: 0;

font-size: 85%;

}

#s
{

margin-left:0px;

float: left;

width:160px;

padding: 6px 2px 6px 15px;

background:#ff0000 url(http://img193.imageshack.us/img193/4766/botopesquisa.png)
no-repeat;

border:none;

font: normal 100% "century Gothic", Arial, Helvetica, sans-serif;

color:#fff;

}

#searchsubmit
{

width:40px;

float: left;

background:#ff0000 url(http://img193.imageshack.us/img193/812/botook.png);

border:none;

font: bold 100% "century gothic", Arial, Helvetica, sans-serif;
color: #FFFFFF;

height:29px;

margin-right:5px;

}

.input{

margin-left:5px;

float: left;

width: 194px;

padding: 5px 3px 4px 3px;

background: #EFEFEF url(imagem do fundo da caixa de texo) repeat-x;

border: none;

font: normal 100% "century Gothic", Arial, Helvetica, sans-serif;

color:#333;}

.sbutton
{

margin-right:10px;

float: right;

margin-top: 0px;

background: #97cb10 url(imagem do botão pesquisar) repeat-x;

border: none;

font: bold 100% "Trebuchet MS", Arial, Helvetica, sans-serif;

color: #FFFFFF;

height:26px;

line-height:24px;

}

/*

Após isso encontre o código <!--Top -->

Cole após esse, o código abaixo em vermelho:

<div
id='search'>

<form
action='/search' id='searchform' method='get'>

<input id='s' name='q' type='text' value='Pesquise o
Conteúdo'/>

<input id='searchsubmit' type='submit' value='OK'/>

</form></div>

Agora vamos tentar entender os códigos:

No primeiro código (em azul) temos dois links de imagem destacados com a cor verde.

A imagem atual é de uma barra de pesquisa vermelha.

Você poderá modificar o botão pesquisar e o
botão OK;

Para isso é só você criar ou encontrar outras imagens de barra de pesquisa e salvar em seu computador, hospedar a imagem e colar o seu link no lugar do link da imagem atual que enviei.

Obs:

Na tag: #s
{

Na linha: background:#ff0000
url(http://img193.imageshack.us/img193/4766/botopesquisa.png) , temos o formato da caixa de pesquisa:

Cor por trás da caixa: #ff0000 = vermelho

Imagem: url(endereço
da imagem da barra de pesquisa)

Na tag: #searchsubmit
{

Na linha: background:#ff0000 url(http://img193.imageshack.us/img193/812/botook.png); temos as mesmas configurações, só que a imagem é somente do botão OK

Você poderá modificá-los como quiser( mudar a imagem e a cor do fundo) Se quiser mudar o tamanho, além de encontrar uma imagem maior, deverá mudar o tamanho no código
“Width”( width:40px ou width:160px;) etc..

No segundo código destacado em vermelho temos o código que vai definir o que fará a caixa de pesquisas= PESQUISAR NO SEU BLOG. Na internet encontramos
vários códigos para essa barra de pesquisa. O código que envio faz com que seja pesquisado sem nenhum erro no seu blog. Porém, você poderá aperfeiçoá-lo, se quiser.

SEMPRE QUE MUDAR ALGUMA COISA NOS CÓDIGOS DO TEMPLATE, ANTES DE
SALVAR, CLIQUE EM “VISUALIZAR” ASSIM, SE DER ALGUM ERRO VOCÊ PODERÁ CORRIGIR OU “LIMPAR EDIÇÕES” E COMEÇÃR DE NOVO. ( SE VOCÊ CLICAR EM SALVAR E DER ERRO, É UM POUCO CHATO TER DE ENCONTRAR OS CÓDIGOS DE
NOVO).