27 de dezembro de 2012

50

Como Colocar Anuncio (banner) no Topo do Cabeçalho do Blog



Olá pessoal, hoje irei ensinar como colocar Anuncio no Cabeçalho do blog. Muitos sites ensinam a colocar o banner no cabeçalho, só que a maneira que eles ensinam é, dividindo o "header" cabeçalho  do  blog em duas parte, e isso da um pouco de trabalho. Mas existe outro jeito mais fácil de inserir o banner no cabeçalho...


Saiba que tem outra forma de colocar o Banner ou anuncio no cabeçalho do Blog, e a forma mais utilizada é dividindo o cabeçalho do Blog em duas parte alterando toda a estrutura do Layout, porém, vou ensinar um outro procedimento bem mais fácil e não precisará alterar a estrutura do seu template e, o legal é, que você também poderá posicionar o Banner de acordo com o tamanho do seu template.

Como colocar Anuncio ou Banner no Cabeçalho do Blog

1º Passo: Acesse o painel de edição do seu Blog, clique na opção Modelo >> depois em Editar HTML..

2º Passo: Agora, clique em qualquer parte do código, em seguida pressione as teclas de atalho "Ctrl+F" do seu teclado e encontre esta Tag:
]]></b:skin>

3º Passo: Quando encontrar o Tag, logo Acima dela acrescente esse código:


/* -----Anuncio ----- */
#Anuncio{ 
width:auto; 
height:auto; 
z-index:1; 
position: absolute; 
top: 50px
left: 450px
}


4º Passo: Agora, utilize novamente as teclas "Ctrl+F" e encontre esta segunda Tag:
</header>

5º Passo: Quando encontrar a Tag, logo abaixo da mesma acrescente este código Scripts:

<div id='Anuncio'>Cole o Código do Banner</div>

Pronto, agora será preciso você editar o código, para isso, siga as seguintes instruções abaixo:

Vamos entender os códigos:
*Primeiro código
  • O primeiro código mostrado no inicio do tutorial, tem a função de direcionar o Banner para o topo do blog, veja que nele tem destacado duas cores: a cor Vermelha "50px" Representa a "Vertical" onde o banner ficará no topo do blog, então para deslocar o banner para "Cima", é só diminuir o valor  "50px" para "30px" ou menos, e para "descer" o banner é só alterar o valor "50px" para "60px" ou mais...

  • E a parte destacada em cor Azul "450px", representa a "Horizontal", ou seja, se quiser deslocar o Banner para a direita > você vaia alterar o valor"450px" pra "500px" ou mais, isso vai depender das dimensões do seu template, e para deslocar o Banner para Esquerda, você vai alterar o Valor "450" pra menos "300" etc..

Observe: essas dimensões de top: 50px; left: 450px;  eu fiz de acordo com a altura do meu Header (cabeçalho)



*Segundo código
No segundo código, você vai substituir a parte que destaquei em vermelho pelo código do banner, e etc..


Código para Banner:
<a href="http://variasdicasparablogs.blogspot.com/" target="_blank"><img src="http://1.bp.blogspot.com/-DxDP575fXqE/UNygL94ffjI/AAAAAAAADVE/HP8603eAgvM/s1600/varias+dicas+para+blogs.png" border="0" /></a>


Agora é só Clicar em Visualizar e vê se está tudo certinho, depois só salvar.



50 comentários:

  1. Respostas
    1. legal, bacana, mas me fala como colocar um banner vertical do lado esquerdo naquele limbo que ficam maioria dos layouts para wordpress ???
      já cansei de procurar, assim como procurar layout que me deixe a direita livre ou esquerda livre para banner vertical sem perder os widgets de menus, mas não acho :(
      blog:
      http://defendaseudinheiro.com.br/piada-do-dia-eike-e-os-tomates/

      Excluir
    2. Legal é pouco, é super, ultra, mega... 1000000000000000

      Excluir
  2. Usarei este código no blog 2C Multimídia, parceiro.

    Era tudo o que procurava p/ o cabeçalho que estou preparando com o novo logo, versão 2013.

    Valeu!

    ResponderExcluir
  3. A vantagem é que muitos dos blogs da web ja vem com o código integrado, mas ocorre que modelos da Google e algumas versões da web não e meu, isso é perfeito.
    Passando pra agradecer a parceria que temos, e desejar a você e todos os leitores um ano novo repleto de coisas boas. | Arruma Blog

    ResponderExcluir
  4. Aproveito a oportunidade p/ agradecer também ao Kelven (Varias Dicas) e ao Gustavo (Htmls) pela parceria com o 2C Multimídia, e que em 2013 possamos continuar unidos!

    ResponderExcluir
    Respostas
    1. http://www.dubem.net/juninhotomaz uma forma muito boa pra ganhar dinheiro, se eu to aki e porque to fazendo minha parte colando este link pra ter minha renda mensal. sou grato vc se cadastrando ja vai ta me ajudando

      Excluir
  5. Nada Charliton(2C)Eu qui agradeço a vocês por esta conosco

    ResponderExcluir
    Respostas
    1. Este comentário foi removido por um administrador do blog.

      Excluir
  6. Muito Bom. Está excelente, parabéns!

    ResponderExcluir
  7. Respostas
    1. http://www.dubem.net/juninhotomaz uma forma muito boa pra ganhar dinheiro, se eu to aki e porque to fazendo minha parte colando este link pra ter minha renda mensal.

      Excluir
  8. tem como colocar site quando clica ira direcionar para o site que coloquei

    ResponderExcluir
    Respostas
    1. Olá!
      Sim, da pra colocar o endereço do site pra quando clicar direcionar pra o site. observe que logo no final eu disponibilizei o código de um banner é só você utilizar ele e editar o link e a imagem. obrigado

      Excluir
  9. gostei mto e o tutorial funciona. mas eu nao consigo colocar o adsense. como fazer para colocar o anuncio do adsense sem dividir o cabeçalho? bjao

    ResponderExcluir
    Respostas
    1. http://www.dubem.net/juninhotomaz uma forma muito boa pra ganhar dinheiro, se eu to aki e porque to fazendo minha parte colando este link pra ter minha renda mensal.

      Excluir
  10. Vlw cara muito bom mesmo, eu estava a muito tempo procurando por um tutorial desse e não encontravam e quero aproveitar para dizer que o nome do head ta escrito header eu tava me batendo aqui achando que meu template não tinha cabeçalho. Vlw msm abraços

    ResponderExcluir
  11. Este comentário foi removido pelo autor.

    ResponderExcluir
  12. da hora então cara me fala vc é web designer? onde eu moro não tem e o meu eu comecei agora responde ai que eu te mostro ha e já colokei lá o banner fico da hora

    ResponderExcluir
    Respostas
    1. olá Rodrigo!
      Bom! profissionalmente eu ainda não sou um Web designer, esse tutorial foi umas das coisas que aprendi praticando, porém eu ainda não sei muito sobre web designer, mas pretendo fazer um curso e estudar nesta área de web.
      obrigado aí Rodrigo pelo seu comentários Valeu mesmo

      Excluir
  13. valeu funfo legal olha ai http://completoupload.blogspot.com/

    ResponderExcluir
  14. fantástico, testei a maioria e deu tudo certo, so essa ficou meio sacana, pois o banner tá em cima da postagem, tem como tirar e tem como colocar um cabeçalho discreto acima do banner, valeu por tudo, bjos aos gatinhos

    ResponderExcluir
  15. Boa noite, infelizmente não consigo, faço tudo certo, só que não aparece o baner mas o link

    ResponderExcluir
  16. Queria uma ajuda,
    Quando vou colocar Eu não acho nem a pau :( '
    Aperto CTRL + F e Procuro, só que nada ;(

    ResponderExcluir
  17. não tem no meeeu! :/
    será que pode ser trocado por outra palavra?
    www.maquiandocombiaanjos.com.br

    ResponderExcluir
  18. Muito obrigado meu caro, já tenho o seu blog nos meus favoritos e já o acompanho a pelo menos 8 meses.

    ResponderExcluir
  19. Boa dica! Vou fazer o teste.

    Jackson
    www.amanhecerdireito.com.br

    ResponderExcluir
  20. Eu estou a ter dificuldade de conseguir colocar banner no meu blogger, através desses códigos... Quando eu faço todos os teus passos dá certo aparece a tua imagem no cabeçalho do blogger, quando eu faço com a minha imagem e os códigos da errado...

    ResponderExcluir
    Respostas
    1. Link do meu Blog: http://diversidadehiphop.blogspot.com/

      Excluir
  21. Valeu cara, muito legal. funcionou perfeitamente

    ResponderExcluir
  22. Estou montando meu blog, deu o seguinte erro:

    Erro ao analisar XML, linha 1191, coluna 68: Open quote is expected for attribute "width" associated with an element type "img".

    ResponderExcluir
  23. https://www.youtube.com/watch?v=XBWpgFYP0K0 up sua melhor escolha veja o video cadastre-se www.upessencia.com.br/1027842

    ResponderExcluir
  24. Muito Obrigado pela Dica. me ajudou bastante!

    ResponderExcluir
  25. Deu super certo! Já tinha tentado colocar um banner no topo buscando outros tutoriais sem sucesso. Seu site foi o único que consegui. Obrigada ;)
    www.reformarelampago.blogspot.com.br

    ResponderExcluir
  26. Que pena! no meu blog deu este erro: Erro ao analisar XML, linha 441, coluna 33: Attribute name "async" associated with an element type "script" must be followed by the ' = ' character. Como prodeder?

    ResponderExcluir
  27. Não sei por que mas no meu blog não muda nada. Não da erro e não muda basicamente nada... Contudo nada acontece. Link do Blog em questão: http://dicasdaminhasaude.blogspot.com/

    ResponderExcluir
  28. Não sei por que mas no meu blog não muda nada. Não da erro e não muda basicamente nada... Contudo nada acontece. Link do Blog em questão: http://dicasdaminhasaude.blogspot.com/

    ResponderExcluir
  29. Oi obrigada ajudou muito, mas tenho outra pergunta, quando abro do celular não fica certo, tipo a Reader não fica responsivo, tem como definir o tamanho do espaço que o banner vai ficar e fazer o mesmo se ajustar quando abrir pelo celular??
    Grata

    ResponderExcluir

Observe:
Faça seu comentário dentro do assunto tratado na postagem.
Não pode divulgar endereço de Sites ou Blog.
Comentário que conterem divulgação serão moderados, somente serão aceitos links caso necessite de informar alguma fonte.


Copyright © - Todos os Direitos Reservados: Várias Dicas para Blogs |
Design by Kelven Pedro | Tecnologia do Blogger - É Proibido a copia do conteúdo deste blog sem autorização
    Twitter Facebook