Como Criar um Box Flutuante para Publicidades no Blog?

Criar Site no Webnode

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.

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.

16 comentários em “Como Criar um Box Flutuante para Publicidades no Blog?

  • 16/04/2012 em 12:42 pm
    Permalink

    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

    Resposta
    • 17/04/2012 em 8:51 pm
      Permalink

      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!

      Resposta
      • 02/12/2012 em 12:21 pm
        Permalink

        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”.

        Resposta
  • 16/04/2012 em 1:59 pm
    Permalink

    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!

    Resposta
    • 17/04/2012 em 12:30 am
      Permalink

      É 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!

      Resposta
  • 16/04/2012 em 6:27 pm
    Permalink

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

    Resposta
    • 17/04/2012 em 12:32 am
      Permalink

      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!

      Resposta
  • 16/04/2012 em 10:44 pm
    Permalink

    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

    Resposta
    • 17/04/2012 em 12:34 am
      Permalink

      Olá Dani Fuller!
      Então, realmente é completamente assimétrico, justamente pos isso chama tanto a atenção 😀

      Abraço!

      Resposta
  • 17/04/2012 em 1:51 am
    Permalink

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

    Abraços!!!

    Resposta
    • 17/04/2012 em 8:54 pm
      Permalink

      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

      Resposta
  • 22/04/2012 em 3:37 pm
    Permalink

    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

    Resposta
  • 31/01/2013 em 3:45 pm
    Permalink

    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.

    Resposta
  • 24/08/2014 em 1:34 am
    Permalink

    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é…

    Resposta
  • 04/06/2015 em 5:02 pm
    Permalink

    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.

    Resposta
  • 15/12/2017 em 3:44 pm
    Permalink

    Vinicius,
    Saudações.
    Fiz como mostrou mas no meu blogspot a foto hospedada não aparece e sim o código dela.
    Por favor, onde estou errando?

    Resposta

Deixe uma resposta

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