26 junho 2013

Colocando Gadgets no Cabeçalho

| |
Tutorial não funciona mais devido às atualizações do blogger 
Fui plagiada; foi um dos tutoriais mais difíceis que já fiz ¬_¬
Hey ma babes!
Quem aí está ansioso pras férias? Eu, mais ou menos, porque não vou fazer nada de interessante mas o fato de ficar longe dos professores chatos, acordar as 8 e descansar já me deixa mais animada ^^ O que vocês vão fazer, hein?

A pedido de uma leitora anônima bem fofa, eu vim postar uma maneira de como colocar qualquer (HTML) gadget no cabeçalho do blog. Gente, eu que acabei bolando toda a maneira de como colocar gadgets no cabeçalho porque todos os tutoriais que eu tentava não davam certo, então créditos ao EAH, ok? Tem que ter um pequeno conhecimento de HTML, porque aqui tem muitas <div></div> e vai confundir muito se não entender de HTML!

••• ♥ •••

Primeiro salve todo o seu layout atual caso algo de errado, ok? • Ou faça num blog de testes

1 • É preciso excluir o cabeçalho. Para fazer isso, vá no HTML do blog, aperte F3 e procure por:
<b:widget id='Header1' locked='false' title='NOME_DO_BLOG (Cabeçalho)' type='Header'>
Obviamente, terá o nome do blog no lugar de NOME_DO_BLOG; você vai ter que apagar todo o trecho que você procurou e salvar.

••• ♥ •••

2 • Agora procure por ]]></b:skin> e cole os seguintes códigos acima da tag:
#banner {
width: 1500px; /* Largura da imagem do banner */
height: 580px; /* Altura do banner */
background:url('URL DA IMAGEM') no-repeat;
margin-left: -10px; /* Margem da esquerda */
margin-top: -50px; /* Margem do topo */
}
Deve preencher tudo como é pedido no código e depois salvar. Mexa nas margens depois que colocar os gadgets no cabeçalho, ok?

Abaixo cole isso:
.bla {
float: left;
margin-left: -100px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
Não precisa mexer, ok?

••• ♥ •••

3 • Salve e agora vá em layout. Você vai ver que não há mais o cabeçalho ('Nome do Blog (cabeçalho) '), no lugar vai haver apenas um espaço para gadgets grandes. Adicione um gadget, HTML/JavaScript e cole:
<div id='banner'>
<div class='bla'>
<div style="position: absolute; margin-top: 372px; left: 8px;">
<div id="w2bSlideContainer">
<div id="w2bNivoSlider">
<a href="LINK_DO_SLIDE_1"><img src="IMG" title="LEGENDA"/></a>
<a href="LINK_DO_SLIDE_1"><img src="IMG" title="LEGENDA"/></a>
<a href="LINK_DO_SLIDE_1"><img src="IMG" title="LEGENDA"/></a>
</div>
</div>
</div>
<div style="position: absolute; margin-top: 392px; left: 330px;">
Código
</div>
<div style="position: absolute; margin-top: 15px; left: 100px;">
Códigos
</div>
</div>
</div>
O código das imagens de slide que eu coloquei é apenas um exemplo. As divs confundem muito então tenha cuidado. Os margin-top e left que estão vendo, tem que trocar os números e depois salvar o gadget e clicar no botão visualizar que tem em layout e depois abrir de novo o gadget, ajustar de novo, salvar de novo e visualizar, É meio cansativo, eu sei....

•••••• ♥ ••••••
Espero que tenha sido útil gente. Eu faço dessa maneira e nunca deu problema pra mim, então creio que não dará problemas para você.

Beijos ;)

11 comentários:

  1. Eu também sempre tentei com os outros tutoriais e nunca consegui fazer , vou tentar com esse seus *-----* Passa láá ?? http://html-poisoned.blogspot.com.br/ Bjuus

    ResponderExcluir
  2. Não creio que te plagiaram, quem foi? Ah, ia te perguntar, tem facebook? ^^
    Sabe, nunca tentei por gadgets no cabeçalho pq a maioria dos blogs tinham, mas eu li seu tutorial e achei muito bem explicado e vou tentar fazer ~tenho medinho de ir excluindo as gadgets e fazer caca~ hah

    Flor me poe na elite de novo, pf?

    Beijos
    Too Kawaii

    ResponderExcluir
  3. Uhm, o tuto é bom, mais eu conheço de uma maneira que não é preciso excluir o cabeçalho (;
    Kiss ~

    letterofpain.blogspot.com

    ResponderExcluir
  4. Oi!!

    Adorei aqui to seguindo retribui?

    http://meninadivadamoda.blogspot.com.br/

    sou iniciante e preciso de seuiodres quem passar por lá gostar éso seguir fico feliz. :) há tem vagas para afiliados quem quer?
    E como faço pra seu afiliada aqui?
    Bjoos

    ResponderExcluir
  5. Muito bom o tutorial, gostei! (O.<)b
    Meu blog é novo, podes dar uma passadinha lá qualquer hora?
    http://alternativeyeah.blogspot.com
    Beijo!

    ResponderExcluir
  6. Parece mto complicado, mas vou tentar..

    ResponderExcluir
  7. :c eu to tentando mt mais não consigo achar
    esse
    :c me ajuda por favor eu quero coloca meu lay hoje :C eu deixei o blog fechado e esse cabeçalho não me ajuda :CCCC

    ResponderExcluir
  8. Respostas
    1. Sabrina, o tutorial não funciona mais, isso já faz tempo. E assim que eu descobri, eu coloquei no começo do post (no primeiro blockquote)

      ah, eu uso o modelo viagem (aquele da folhinha)

      Desculpa, mas no momento não posso fazer nada para ajuda-la....

      Excluir
  9. Isa , o tutorial nao funciona mais devido as atualizações dos modelos ne?
    Mas e nos antigos modelos (tipo o minima ) funciona?

    ResponderExcluir

« »