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).

Ler Mais

Caixa de pesquisa no seu Blog!

Para colocar uma caixa de busca no blog para que os visitantes façam pesquisas dentro do blog para que as pessoas encontrem o que procuram, é necessário usar código abaixo:

<div align="center"><FORM method=GET action="http://www.google.com.br/search">
<INPUT TYPE=text name=q size=25 maxlength=255 value="">
<INPUT type=submit name=btnG VALUE="Pesquisar">
<input type=hidden name=domains value="endereço do seu blog"><br><input type=radio name=sitesearch value="">Web<input type=radio name=sitesearch value="endereço do seu blog" checked>Neste site<br>
</FORM></div>

Se quiser pode modificar o tamanho do campo de texto mudando o numero 25, outra coisa é o texto Neste site você pode escrever o que desejar, por exemplo o nome do seu blog.

Isso faz o Google pesquisar as palavras digitadas somente dentro do endereço que colocamos no local indicado, assim fica fácil achar qualquer coisa no blog. Você só precisa colocar o endereço do seu blog nos locais indicados no código e depois colocar o código pela pagina layout, adicionar gadget, html/javascript e já está pronto.

Se quiser você pode criar um código parecido com esse no site do Adsense e além de mostrar um sistema de busca no seu blog ainda pode ganhar algum dinheiro quando as pessoas utilizarem as pesquisas Google através do seu blog.

Fonte: dicasparablogs

Ler Mais