CPT - Centro de Produções Técnicas

Como colocar banner de afiliados no cabeçalho do blogger


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 partes, e isso da um pouco de trabalho. Mas existe outro jeito mais fácil de inserir o banner no cabeçalho...
Assim do jeito que está aqui no "Dicas para blogueiros".

E uma ótima forma de divulgar os banners dos programas de afiliados que você se inscreveu. Porque é a primeiro imagem que o visitante vê quando entra no blog. As chances de serem clicadas é bem maior.

Bom, chega de conversa, vamos lá...

Esse procedimento bem mais fácil e você 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.

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.
Essas dimensões de top: 50px; left: 450px; são padrão do código, então é bem provável que você tenha que modificar várias vezez esses números até ficar do jeito que você quer.

Eu mesma tive que modificar várias vezes.

*Segundo código
No segundo código, você vai substituir a parte destacada em vermelho pelo código do banner. Clique em salvar e visualize o blog.

É um pouco trabalhoso mais vale a pena, não desista que vai dar certo.