how do you make a gif
Envie-nos um Email Em Breve... Facebook Twitter Ask.Fm Favoritos

29/12/2012

Como Colocar Gadgets no Cabeçalho sem Excluí-lo


Oi gente, tudo bem? Como vai o fim de semana? Me perguntaram lá no Ask como colocar essa playlist e os outros gadgets que tem no cabeçalho aqui do blog (veja aqui). Então lá vai tutorial  Na verdade é mais simples do que parece e da maneira que vou ensinar diferentemente da maioria dos tutorias de gadget no cabeçalho você não vai precisar mexer no HTML do blog e nem excluir o seu cabeçalho! O problema é que na visualização do blog através do celular o cabeçalho fica "todo doido". Além disso a visualização do cabeçalho muda dependendo do navegador, por isso indico que faça o tutorial usando o Google Chrome que provavelmente é o mais usado pelos seus leitores. Aprendi lá no We Heart HTML  e fiz algumas modificações, tá bom?

Antes de mais nada faça o seu cabeçalho normalmente deixando nele os espaços onde você vai encaixar o(s) gadget(s). Ah, uma dica: para seu cabeçalho ficar com uma qualidade melhor salve-o no formato PNG. Quando terminar coloque o seu cabeçalho no blog: vá no Painel do Blogger, Layout e clique em "Editar" no gadget que tem o nome do seu blog e/ou escrito "Cabeçalho". Na parte "Posicionamento" marque a opção "Em vez de título e descrição" e não esqueça de deixar a opção "Reduzir para ajustar" desmarcada. Clique em escolher arquivo e selecione a imagem do seu cabeçalho, depois clique em salvar.

Vá no Painel do Blogger >> Layout >> Adicionar um Gadget >> HTML/JavaScript >> Deixe a área do Título em branco e na área do Conteúdo cole o seguinte:
<div style="margin-left: 35px; margin-top:-292px;margin-bottom: 50px;"> CÓDIGO DO SEU GADGET</div>
Altere a parte em negrito pelo código do seu gadget. Para posicionar o gadget basta alterar as partes em roxo até ficar na posição desejada. Alterando o "35" seu gadget vai mais para a esquerda, o "-292" seu gadget vai mais para cima e o "50" quanto maior o número, maior a distância entre o cabeçalho e a área das postagens.

Se quiser colocar mais de um gadget no cabeçalho basta repetir o código no mesmo gadget (caso contrário não vai funcionar), por exemplo:
<div style="margin-left: 35px; margin-top:-292px;margin-bottom: 50px;"> CÓDIGO DO SEU GADGET</div><div style="margin-left: 35px; margin-top:-292px;margin-bottom: 50px;"> CÓDIGO DO SEU GADGET</div>
Isso serve para quantos gadgets quiser,2,3,4 e assim sucessivamente. Quando terminar clique em "Salvar". OBS: O gadget tem que estar abaixo do gadget do Cabeçalho, se não estiver arraste-o para lá. Veja um exemplo na imagem abaixo:


Quando terminar clique em "Salvar Organização".

Espero ter ajudado, se tiverem qualquer dúvida basta comentar. Ah, se quiserem pedir um tuto ou alguma outra postagem basta ir lá no Ask do blog, que farei o máximo para ajudar.

Share on Tumblr

18 comentários:

Vitoria { www.meus-pensamentos.com } disse...

Nossa muito legal e util o tutorial .

meus-pensamentos.com

Danny disse...

Nossa, que legal esse tutorial, muito massa ;D

http://www.blogmeninamulher.com/

Vanessa Takeushi disse...

eu entendi as dicas das fotinhas... de arrastar.. eu sei que tenho que arrumar o lay do meu blog... mas ultimamente minha vida tá corrida.. quem sabe me animo e faço um bem lindo como o teu... beijos

Ana Carolina ∞ disse...

Ai que legal isso, não sabia. Vou ver se uso esse tutorial no próximo lay

Beijinhos <3
Garota Inocente

clarissadourados2 disse...

Valeu pela dica..
Muito bom seu blog!
Tô seguindo aqui.
Conheça o meu e me segui também.
Beijos
clarissadourados2.wordpress.com

Jean Miranda disse...

Puxa, obrigado, era o que eu precisava :-) Seguindo aqui amore ;)

www.elfosecreto.blogspot.com

Patrícia disse...

Dedessa vc está arrasando nas dicas pra blogs, heinn ...em 2013 será o ano! Desejo que ele seja muito feliz e cheinho de bençãos de Deus na sua vida. Bjs e até 2013!

Amanda Taline disse...

Ola eu adorei seu blog gostaria de me afiliar http://femininaoficial.blogspot.com.br/

Luana Mendes disse...

oI!!
Me diz uma coisa como pego o codico do gaget me explica?
http://meninadivadamoda.blogspot.com.br/

Ina Ribeiro disse...

Super útil, estou usando!

Lets Melo disse...

Adorei o tutorial ficou super bem explicado!
Cake Party || Clique aqui!

Anônimo disse...

Adooorei seu blog!

Mandy ✝ disse...

Aceita pedido de afiliação pelos comentários ?

Poxa vida *-* Seu blog caiu do céu eu virei a tarde toda procurando este tutorial em vários blogs e o seu foi a unica opção certa , espero que funcione .
Lindo seu blog *-*

Se aceitar a afiliação manda um recado para mim no meu blog ok ?
Kawaii-unlike.blogspot@.com.br (tire o @ )

Narciso Figuerêdo disse...

Oi, funcionou! ;D

www.garotolifestyle.blogspot.com.br

Ellen Luz disse...

Que menina danada! O melhor tuto que eu encontrei. Deu de 100 a 0 a muitos experts por aí. Simples, sem alterações no código do blog e o melhor, funciona!
Parabens!

Anônimo disse...

oi eu não entendi que código do GADGET

como a gente arruma esse código !!

Anônimo disse...

Foi muito boa a dica.Obrigada

Anônimo disse...

Legal!