Como Criar um Box Flutuante para Publicidades no Blog?

Like
Like Love Haha Wow Sad Angry

como-criar-um-box-flutuante-para-publicidades-no-blog

Encontrar áreas para exibir publicidade sem ser demasiadamente intrusivo é sempre uma grande dificuldade, pois se exagerar poderá causar incômodo em seu leitor e o retirando do blog, se afastar demais a publicidade do conteúdo corre o risco de esta não ser chamativa o suficiente para que seu leitor tenha interesse.

Pensando nisto fiz algumas pesquisas e notei algo em blogs internacionais como o Dinheiro Oportunidade do Custódio, que existem publicidades do “lado de fora” do blog, exatamente como pode ver aqui no Criar Sites o Box com os botões de compartilhamento, porém fica com publicidades. Veja isto na imagem a seguir.

como-criar-um-box-flutuante-para-publicidades-no-blog

Como pode notar na imagem o banner está ainda mais a direita do que a barra lateral, e possui o mesmo efeito que a barra dos botões aqui do Criar Sites (desliza junto com a página). Esta é uma forma de manter a publicidade exposta para o leitor por mais tempo sem com isso atrapalhar sua leitura.

Nem todos os templates wordpress irão funcionar bem com este tipo de publicidade, pois deve lembrar que dependendo da resolução do monitor de seus leitores a publicidade não irá aparecer, isso pode ser facilmente calculado da seguinte forma:

Vá até seu Google Analytics e clique em: Tecnologia >> Navegador e sistema Operacional >> Resolução de Tela.

Verá uma lista com a resolução de tela de seus leitores, que vai desde a resolução mais frequente até amenos frequente. Escolha como base para seu cálculo a menor resolução com um número considerável de visitantes (normalmente será de 1024 x 768).

Com isso temos uma área livre para trabalhar de 1024 pixels, então destes pixels deverá subtrair a largura de seu template, digamos que seja um com 900 pixels, teremos 124 pixels livres para trabalhar, porém se seu template for centralizado terá apenas 62 pixels de cada lado, já se alinhar tudo a esquerda ficará com o espaço livre.

Com 124 pixels livres poderá tranquilamente trabalhar com banners de 120×600 que possuem um ótimo tamanho!

Como gerar o código para o Box flutuante?

O código é realmente dos mais simples que existem, bastará adaptar o código abaixo e o colocar em seu arquivo header.php logo após a tag <body> e funcionará perfeitamente, ou ainda para não causar demora no carregamento do conteúdo poderá inserir no arquivo footer.php antes do fechamento da tag </body>, funciona da mesma forma.

<div style=”width:120px; height:600px; float:right; display:scroll; position:fixed; top:168px; margin-left:-4px;”>

<!—Código do seu Banner de afiliado 120×600 –>

</div>

Repare que este código está com as medidas exatas para inserir um banner 120×600 em um vão de 124 pixels com uma resolução 1024×768 deixando o banner encostado no blog em uma boa altura na tela, mas poderá fazer diversas alterações para deixar o código exatamente como desejar:D

Este é um guest post que foi escrito por Vinicius Horta do blog Dinheiro Web.

Posts Relacionados

Like
Like Love Haha Wow Sad Angry

Sobre Vinicius Horta

Blogueiro e Web Designer com Formação nas ferramentas Adobe- SENAC – SP e curso de Comunicação e Comunicação Institucional – FGV. Adoro esta vida de blogs e internet. Escrevo sobre desenvolvimento e monetização de Blogs, Sites, Programas de Afiliados e Carreira Freelancer.

Adicionar a favoritos link permanente.

15 Comments

  1. Boa Tarde

    Vinicius

    Excelente artigo, coloquei o código no local indicado e parece que no template que utilizo não funciona.

    Um Abraço
    Roberto

    • Olá Roberto!

      Estranho não ter funcioado em seu template, tente dar uma verificada se está no local exato em que deveria e também como estão as opções de cache do seu wp, pois talvez tenha funciionada mas ainda estava visualisando a página antiga.

      Abraço!

      • No meu tambem nao funciona ele da erro ,Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente. Mensagem de erro em XML: Open quote is expected for attribute “{1}” associated with an element type “style”.

  2. Faz alguns meses que via está publicidade no DO,mas no começo pensei que era algum erro no template,depois vi que era uma boa estrategia do Custodio já que hoje em dia quando uma pessoa compra um pc seja em qualquer lugar ele vem com um monitor de LCD de 15 polegadas para cima.

    Vou pensar em colocar me meu blog!

    ABraço!

    • É verdade Rafael, e até a tela de 15″ já está virando raridade, estes dias andei dando uma olhada em telas de lcd para comprar, o que mais se encontra tanto com PC ou apenas a tela é de 18,5″, a de 17″ praticamente desapareceu das lojas, de 15″ ta virando raridade, é realmente um bom momento para passar a usar mais áreas da tela!
      Abraço!

  3. Na minha opinião, box flutuante com propagandas aumentam muito a taxa de rejeição. Com vocês também é assim?

    • Olá Fotos Fake!
      É sembre bom lembrar disto que citou, pois quanto mais intrusiva for uma publicidade maior pode se tornar a taxa de rejeição, uma boa forma de converter isso em aumento de taxa de conversão é saber escolher uma campanha que seja realmente muito atrativa para seus leitores.
      Abraço!

  4. Eu acho estranho,.. sempre para mim é como se tivesse ‘deformado’ o template…… mas não posso deixar de destacar que parece válido pelo retorno e eu vou deixar separada a dica aqui para algum teste futuro

  5. Vinicius posso colocar um anúncio do Google AdSense assim ou é contra as regras do Google AdSense?

    Abraços!!!

    • Olá Rosiel!
      Eu desconheço alguma regra específica para box flutuante, porém recomendo que se informe melhor no fórum do Google Adsense ou mesmo entre em contato com o suporte antes de fazer. Pois da mesma forma que desconheço que não possa, nunca vi isso sendo feito em nenhum blog.
      Abraço

  6. Rodrigo Rodrigues

    Saudação Vinicius Horta

    é prazer participar do dos depoimentos
    gosto de mais criar sites
    aprendendo por aqui por vocês,tão receptivo e responde a todos
    com toda paciência e carinho,
    por isso eu gosto de mais aqui
    Ainda sou um amador
    Atenciosamente
    Rodrigo Rodrigues

  7. Olá Vinicius

    Procurei muito até achar alguém que explica-se direitinho o que precisava, Eu testei e funciona, mas não é rolante, ou seja aparece a imagem e só a seguir aparece a homepage. Eu queria adicionar, um banner de publicidade na lateral, entre o corpo do blog e fim de página, assim como esse aí do lado esquerdo (o plugin social, não interfere em nada). Sabe como posso fazer? Obrigado.

  8. Não Funfou, nem na head e nem no footer, na head empurra tudo para baixo dele (cabeçalho e todo o blog ) sem contar que não flutua, fica fixo tanto no cabeçalho como no rodapé…

  9. Gostei, vai me ajudar muito na nova programação que estou fazendo no meu site….. vou precisar estudar essas resoluções já que agora é muito comum resolução maior que 1024 x 768 (que era a mais usada).

    Valeu.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *