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/AVvXsEg0Pl0V8sncrHW4hkRKJGM6G6UplJSO6oIGBMzCywBNUkECB6VDhq1n7spMVPTmsgIDG4cB3GX0eSvrHyPHZtOG6o_wmbXQRGKKGv6hyL9lB-X45IXyTZbLyIuovblY0m2F6pznQGDKSUJX/s1600/varias+dicas+para+blogs.png" border="0" /></a>

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