#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çãoAbra seu Modelo → Editar HTML → Expandir modelos de widgets

COMPTE_BLOGOF rafaelababy : Tudo para orkut e msn, Mini gifs de coraçãoProcure por
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'> 
COMPTE_BLOGOF rafaelababy : Tudo para orkut e msn, Mini gifs de coraçãoQuando 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 
COMPTE_BLOGOF rafaelababy : Tudo para orkut e msn, Mini gifs de coraçãoAgora, antes de adicionar o código que você quer, coloque esse: 
<div class="topo">CÓDIGO</div>
COMPTE_BLOGOF rafaelababy : Tudo para orkut e msn, Mini gifs de coração  onde está escrito 'CÓDIGO', cole o código que você queira, tipo o da caixa de pesquisa, e outros.


COMPTE_BLOGOF rafaelababy : Tudo para orkut e msn, Mini gifs de coraçãoAgora, 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 */
}
COMPTE_BLOGOF rafaelababy : Tudo para orkut e msn, Mini gifs de coraçãoSe 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 */
}

COMPTE_BLOGOF rafaelababy : Tudo para orkut e msn, Mini gifs de coraçãoé isso, edite se necessário, visualize e salve.

Créditos ao Farry Teen

Bom FDS pra todos, segunda tem mais, se Deus quiser!

Nenhum comentário:

Postar um comentário

O comentário é livre, porém não utilizes de palavrões ou qualquer ofensa.
Moderado pois assim poderei te responder rapidamente.

Related Posts Plugin for WordPress, Blogger...