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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSkusJJ7IpmJYW8CCZmL8yFVG92eflZv12bEVgmPiIGUHMB1bmiZJW2u-3GFl9-5b_-tUSR24LANkKVjTVSMYM-6QFUMVwmPsCqcEh9OkaEvQG_9PlJgT6WZiDTWgwtB4lms_r-SF4mdn9/s1600/varias+dicas+para+blogs.png"
border="0" /></a>
Agora é só Clicar em Visualizar e vê se está
tudo certinho, depois só salvar.