Web Toolbar by Wibiya

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.

7 Comentários:

Vitoria { www.meus-pensamentos.com } disse... [Responder essa Fofura]

Nossa muito legal e util o tutorial .

meus-pensamentos.com

Danny disse... [Responder essa Fofura]

Nossa, que legal esse tutorial, muito massa ;D

http://www.blogmeninamulher.com/

Vanessa Takeushi disse... [Responder essa Fofura]

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... [Responder essa Fofura]

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

Beijinhos <3
Garota Inocente

clarissadourados2 disse... [Responder essa Fofura]

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... [Responder essa Fofura]

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

www.elfosecreto.blogspot.com

Patrícia disse... [Responder essa Fofura]

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!