17 de maio de 2017

Como colocar espaços de publicidade no Blogger

Talvez você já saiba que escrever artigos no blog não é mais um hobby como muitos dizem, ou então um passa-tempo. Criar um blog interessante, com conteúdos relevantes e uma boa aparência, pode render bastante tráfego e com isso você pode monetizar o seu blog com anúncios.

Há 2 formas de monetizar um blog, a primeira e mais utilizada é com o Google Adsense, porém esse não é o foco deste artigo, então eu recomendo a leitura do artigo Como colocar o Google Adsense no seu blog. A segunda maneira e que eu vejo muito pouco blogueiros fazendo, é colocar anúncios diretos, seja em forma de banners ou posts patrocinados.

Mas o que é Anúncio Direto?

É simplesmente você vender um espaço no seu blog para uma determinada empresa, com isso ela pode anunciar dentro daquele espaço com um banner por exemplo com uma chamada para o seu site, evento, etc.

E por isso neste artigo estarei ensinando você colocar no blog um espaço de 125x125 pixels para banners um do lado do outro, onde você poderá colocar esses anunciantes, ou então, colocar banners de parceiros. Fica ao seu critério o uso :)


Instalando espaços de publicidade no Blogger

Instalação bem simples e rápida, prossiga com atenção.
Atenção: Antes de fazer qualquer alteração, faça o backup do seu template.
  1. Acesse o Painel do Blogger
  2. Vá até Modelo > Editar HTML, clique sobre o editor e tecle CTRL+F e procure por ]]></b:skin> imediatamente acima, cole o seguinte código:
    
    /* Espaços Publicidade 125px CódigosBlogger.com */
    .pub_125 {text-align: center;}
    .pub_125 img {margin:0px 5px 5px 0px;padding:5px;text-align:center;border:1px solid #ddd;}
    .pub_125 img:hover {border:1px solid #aaa}
    .pub_125 img.noborder {border:0;}
    
  3. Salve o Modelo
  4. Vá até Layout e escolha uma área do Widget onde quer exibir os banners e clique em Adicionar Novo Gadget > HTML/JavaScript e cole o seguinte código:
    
    <div class="pub_125">
    <a href="http://www.codigosblogger.com" title="TÍTULO DO BANNER" target="_blank"><img class="noborder" src="URL_DO_BANNER" alt="TÍTULO DO BANNER" width="125" height="125" /></a>
    <a href="http://www.codigosblogger.com" title="TÍTULO DO BANNER" target="_blank"><img class="noborder" src="URL_DO_BANNER" alt="TÍTULO DO BANNER" width="125" height="125" /></a>
    <a href="http://www.codigosblogger.com" title="TÍTULO DO BANNER" target="_blank"><img class="noborder" src="URL_DO_BANNER" alt="TÍTULO DO BANNER" width="125" height="125" /></a>
    <a href="http://www.codigosblogger.com" title="TÍTULO DO BANNER" target="_blank"><img class="noborder" src="URL_DO_BANNER" alt="TÍTULO DO BANNER" width="125" height="125" /></a>
    </div>
    
  5. Altere as informações dos respectivos banners e Salve.

Pronto, agora na sidebar do seu blog ficará os banners com as imagens organizadas dando uma aparência profissional ao seu blog.

Dúvidas? deixe um comentário abaixo
5 estrelas - baseado em 29 votos

Trabalho com desenvolvimento web profissionalmente desde 2014, fundei a Web Creative em 2015, uma agência focada em criação de sites e resultados digitais. Através desse blog passo um pouco da minha experiência de 6 anos com o Blogger.

2 comentários

Posso dizer uma coisa? Parabéns!!!!
Seus post estão atualizados, suprindo nossa necessidade.

Os outros site que tem tutorial de 2010 a 2014 já não funcionam mais a maioria.

Muito obrigado, fico feliz em ajudar :)


Abrir lista de emoticonFechar lista de emoticon