Patrícia Bernardo: #tutorial: inserir widgets no cabeçalho

Olá meninas! Vocês devem estar pensando "ela gostou mesmo de tutorial" e SIM! Amei mesmo a idéia, já que eu não sei nada, agora o que aprendo repasso aqui :)
O widget inserido no cabeçalho são os ícones das redes sociais e a caixa de pesquisa, igual ao meu. E está dividido em duas partes, pois tem que ter atenção. #semprefaçaumbackup!

Vamos lá:
1º Passo:

COMPTE_BLOGOF rafaelababy : Tudo para orkut e msn, Mini gifs de coração

Abra seu Modelo → Editar HTML → Expandir modelos de widgets

COMPTE_BLOGOF rafaelababy : Tudo para orkut e msn, Mini gifs de coração

Procure por

<body expr:class='"loading" + data:blog.mobileClass'>

Quando encontrar, cole abaixo o seguinte

<div style='top: 5px; right: 5px; z-index: 100; position: fixed;'><a href='URL DO SEU BLOG'><img src='http://cdn1.iconfinder.com/data/icons/doodle/Home.png' style='width: 30px; height: 30px;'/></a><a href='http://twitter.com/TWITTER_USERNAME'><img src='http://cdn1.iconfinder.com/data/icons/doodle/Twitter.png' style='width: 30px; height: 30px;'/></a><a href='URL DO PERFIL DO FACEBOOK'><img src='http://cdn1.iconfinder.com/data/icons/doodle/Facebook.png' style='width: 30px; height: 30px;'/></a></div>

Coloque a URL com HTTP://
Troque os ícones se quiser.
No meu caso, o cabeçalho é diferente, então tive que alterar as medidas. Vá alterando aos poucos e visualizando sempre, feito isso, Salve!

Crédito ao Batom de Framboesa

2º Passo:

COMPTE_BLOGOF rafaelababy : Tudo para orkut e msn, Mini gifs de coração

Vá em Design > Adicionar um Widget > Selecione o HTML/JavaScript

Agora, antes de adicionar o código que você quer, coloque esse:

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

onde está escrito 'CÓDIGO', cole o código que você queira, tipo o da caixa de pesquisa, e outros.

Agora, para ajustar tudo, é só você ir no HTML do seu blog, e procurar por ]]></b:skin> e logo acima, cole isso:

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

Se você utilizar mais de um código desse, coloque assim

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

e

.topo1 {

position: absolute;

z-index: 4;

width: 250px; /* LARGURA */

height: auto;

left: -19px; /* Posicionamento */

top: -19px; /* Altura */

}