Como por gadgets no cabeçalho do blog

Enfim o tutorial tão pedido por vocês! Sei que muitos de vocês estavam querendo saber como eu coloquei esse slide no cabeçalho. Hoje eu vou apenas explicar como por qualquer coisa no cabeçalho, depois eu vou postar sobre o slide que eu uso aqui, mas por hora vocês podem usar esse slide. Ou qualquer outro que acharem. Esse tutorial pode parecer um pouco complicado para inciantes, então recomendo que você faça isso apenas se tiver um conhecimento básico sobre CSS. Vamos começar?

TUTORIAL ATUALIZADO

Excluindo o Cabeçalho

Para pode fazer esse tutorial, será necessário excluir o gadget padrão do cabeçalho. Graças a Deus o blogger solucionou o bug que estava impedindo a exclusão do cabeçalho.
Abra o HTML do seu blog, aperte as teclas Ctrl+F e digite o nome do seu blog. Você irá encontrar algo parecido com isso:

 Lógico que no lugar de "Nome do seu blog" vai estar o nome do seu blog. Apague essa parte que está destacada na imagem acima. Visualize e clique em Salvar modelo. Vai aparecer um aviso assim:

Clique no botão "Exlcuir Widgets". Prontinho, o cabeçalho está excluindo!

Criando um novo cabeçalho

Agora vamos criar um novo cabeçalho que nos permita adicionar o que quisermos nele. Volte ao HTML do seu blog, e cole o código abaixo antes de ]]></b:skin>

#topo {
width: 980px; /*Largura da imagem do cabeçalho*/
height: 300px; /*Altura do cabeçalho*/
background: url('link da sua imagem de cabeçalho') no-repeat;
margin-top: -20px; /*Margem do topo*/
}

Altere a largura e a altura de acordo com sua imagem de cabeçalho. Coloque o link da imagem onde se pede, e em margin-top você "puxa" o cabeçalho para cima. Isso é necessário porque provavelmente vai ficar um espaço entre o topo da página e o cabeçalho. Mas se este espaço não te incomodar, troque -20 por 0. Salve as alterações. Seu cabeçalho ainda não vai aparecer. Para isso, você deve ir para o layout do blog, e adicionar um gadget de HTML/Javascript no local onde ficava o antigo cabeçalho.

Cole no gadget o código abaixo:

<div id='topo'>
</div>

Salve o gadget e você verá que seu cabeçalho já apareceu.

Adicionando gadgets no cabeçalho

Agora você já pode adicionar o que quiser no cabeçalho! Como? Simples: Colocando o código do item entre as tags do gadget que acabamos de adicionar. Não entendeu? Veja o exemplo abaixo onde eu coloquei o código da caixa de busca deste tutorial no cabeçalho:

<div id='topo'><form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" placeholder='Digite o que procura' type="text" value="" />
<input class="searchbut" type="submit" value="" /></form>
</div>

Viram? O código da caixa de pesquisa está dentro da div do cabeçalho, então vai ficar por cima dele. Quando você fizer este tutorial, vai ver que os elementos que você colocar no cabeçalho vão ficar desalinhados. Para alinhá-los você deve criar uma class como essa abaixo (cole antes de ]]></b:skin>)

.item {
float: left;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
} 

Substitua "item" pelo nome do item em que você vai aplicar o código. Aí quando for colocar o código do gadget dentro do cabeçalho, coloque-o entre as tags <div class='item'> </div>
Aí é só voltar no HTML e ajustar as margens.

Esse é o jeito que eu faço, e acredito que seja o mais prático. Se você já possui algum conhecimento de CSS, vai conseguir fazer direitinho, mas caso não tenha entendido, leia um pouco sobre o básico do CSS aqui.

Clique aqui e participe do sorteio que está rolando aqui blog!

Kissus, Liah