Tutorial: Gadget no cabeçalho

Oii lindos, como estão? 
A pedido de algumas pessoas (tanto no blog como no ask) eu vim explicar para vocês como colocar gaddgets no cabeçalho. Tipo, um slide, um menu... Esses que estão no meu cabeçalho! Eu pensei que fosse muito complicado, mas não é não! Eu aprendi esse tutorial no Farry Teen (www).

1. Vá em Layout > Adicionar um gadget > Selecione adicionar HTML/Java Script > Cole esse código:

<div class="topo">CÓDIGO</div>

Na parte "Código" adicione o código do gadget que você quer. Ex: Slide, calendário, barra de pesquisa...

2. Vá em Modelo > Editar HTML > Procure por  ]]></b:skin> e cole acima do código que você achou:

.topo {
position: absolute;
z-index: 4;
width: 250px; /* LARGURA */
height: auto;
left: -19px; /* Posicionamento */
top: -19px; /* Altura */
}

Salve, e se não estiver do jeito que quer, ajuste as partes destacadas acima até chegar onde quiser. 

Quando for adicionar outro gadget, em vez de colocar o código normal, acrescente um número, exemplo:

<div class="topo1">CÓDIGO</div>

Onde está destacado, é só você trocar o nome, colocando números, e tal. Aí, na hora que for colocar o código acima de ]]></b:skin> deve mudar isso:

.topo1 {position: absolute;z-index: 4;width: 250px; /* LARGURA */height: auto;left: -19px; /* Posicionamento */top: -19px; /* Altura */}

 E se for adidionar mais gadgets, é só ir mudando o número.
Entenderam? Se tiverem alguma dúvida é só falar comigo!

Beijos e até mais! :D