Popup para Aumentar Leitores de Blog

Como Fazer Um Site >> Extras Para o Seu Site >> Popup para Aumentar Leitores de Blog



Ter aquela caixinha do Feedburner na barra lateral, onde se espera que os leitores do blog se inscrevam, é muito pouco eficiente, muito pouca gente repara nela, ou nem se dão ao trabalho de deixar lá o email. É por isso que você deve aumentar a sua lista de emails com um popup.

Para não morrer um blog precisa de assinantes assim como nós precisamos de ar para viver. Com uma boa lista de emails, de algumas centenas, ou milhares de assinantes, você sabe que alguém vai ler cada post que publicar no seu blog. Esses primeiros leitores podem fazer a diferença entre esse novo post vir a ser popular e bem indexado nos motores de busca, ou então ficar perdido e esquecido no meio de tantos outros artigos que já existem sobre esse tema na internet.

 

Popup - Instale grátis

Vou disponibilizar gratuitamente um script que fiz para ser usado aqui no Como Fazer Um Site. Desde que o comecei a usar, a minha lista de assinantes por email não parou de crescer (no momento em que escrevo já ultrapassou os 7000).

É um script muito fácil de instalar, que gera uma pequena janela com um layout simples, com o objectivo de cativar os leitores, de os levar a subscreverem a newsletter do blog. Nessa janela aparece uma imagem, dois campos de texto, e o formulário onde as pessoas colocam o seu endereço de email. No popup tenho usado a imagem do logotipo do blog, que tem funcionado muito bem penso que pelo facto de deixar bem claro às pessoas que o popup tem a ver com o blog e não com quaisquer popups de publicidade indesejáveis.

Existem na internet ferramentas para fazer crescer as listas de leitores com popups de captação de emails, que são utilizadas por muitos blogs, igualmente com bons resultados, mas que são pagas, a cerca de $50. É o caso por exemplo do PopUp Domination.

Mas o popup que aqui disponibilizo é inteiramente grátis.

 

O popup não é intrusivo nem incomodativo

O popup não é nada intrusivo pois é exibido dentro da própria página do blog.

O popup não se vai tornar incomodativo para os leitores habituais do seu blog. A partir do momento em que um leitor fechar o popup, é gravado um cookie no browser desse leitor de maneira que o popup não volta a aparecer para esse leitor durante X dias. Esse número de dias pode ser configurado no script.

O popup pode ser configurado para se enquadrar no layout do seu blog. É fornecido o ficheiro CSS onde poderão ser ajustadas as dimensões da janela popup, alteradas as cores e a fonte do texto que é apresentado.

 

O popup pode ser instalado no Wordpress e no Blogger

O popup pode ser instalado tanto no Wordpress como no Blogger, como em qualquer outra plataforma de blogs. Seguem-se as instruções de instalação para o WordPress e depois para o Blogger.

 

Como instalar no Wordpress

  1. Faça download do ficheiro Popup-Feedburner-Email.zip . Descompacte.

  2. Faça upload das imagens para o seu servidor.
    • bfechar.png (botão para fechar a janela)
    • fundo-transp.png (serve para escurecer o fundo em volta da janela popup).
    • gradiente-cinza.jpg (opcional, em alternativa pode ser usada uma cor de fundo).

  3. Configure o ficheiro pop-email.css

    • Dimensões
      Para alterar a largura e altura da janela popup, modifique os valores indicados a vermelho:
      #boxes .window {
      position:absolute;
      left:0;
      top:0px;
      width:290px;
      height:350px;
      display:none;
      z-index:9999;
      }

      #dialog {
      width:280px;
      height:350px;
      padding:10px;
      background-color:#fff;
      background-image:url('http://seusite.com/imagens/gradiente-cinza.jpg');
      border:2px solid #000;
      }
      Mantenha sempre a largura de #boxes em 10px superior à largura de #dialog.

    • Cor de fundo e imagem de fundo
      #dialog {
      width:280px;
      height:350px;
      padding:10px;
      background-color:#ffffff;
      background-image:url('http://seusite.com/imagens/gradiente-cinza.jpg');
      border:2px solid #000;
      }
      Para alterar a cor de fundo pode usar outros códigos de cores HEX.
      Substitua o endereço a vermelho pelo endereço onde guardou a imagem de fundo.

    • Outras configurações CSS
    • Se precisar pode ainda alterar as restantes secções do ficheiro CSS. Pode modificar por exemplo o espaçamento entre a imagem e o texto. Cada uma das secções está assinalada na figura seguinte:

  4. Configurar o ficheiro pop-email.js

    Ao editar o ficheiro pop-email.js vai encontrar uma secção do script onde deverá introduzir o conteúdo que deseja para a sua janela popup.
    var icon_fechar = 'https://sites.google.com/site/comofazerumsitecom/ficheiros/bfechar.png' ;
    var endereco_logotipo = 'http://seusite.com/imagens/seulogotipo.png' ;
    var texto_campo1 = 'Quer receber os posts do blog no seu email?' ;
    var texto_campo2 = 'Subscreva a newsletter gratuita.' ;
    var texto_campo3 = 'Endereço de Email:' ;
    var feedburner_id = 'IdSeuBlog' ;
    var botao = 'Subscrever' ;
    var cookie_fechar = 7;
    var cookie_botao = 7;
    var veloc_escurecimento = 1000;
    O que está a vermelho é o que deverá modificar em cada variavel. Certifique-se que não muda mais nada, a simples falta de uma aspa ou de um ponto e virgula pode ser o suficiente para o popup não funcionar. De sequida explicam-se cada uma das variaveis:

    • icon_fechar
      Deverá introduzir o endereço onde guardou a imagem bfechar.png do icone de fechar a janela popup.
    • endereco_logotipo
      Deverá introduzir o endereço onde guardou a imagem do logotipo do seu blog, ou de outra imagem que prefere que apareça no popup.
    • texto_campo1
      Breve frase para captar o interesse do leitor.
    • texto_campo2
      Breve frase em que o leitor deverá ser chamado a agir.
    • texto_campo3
      Descrição do que o leitor deverá introduzir no formulário.
    • feedburner_id
      Identificação do feed do seu blog no FeedBurner. Atenção: Certifique-se também que na sua conta do Feedburner a subscrição por email está activa (vá ao separador "Publicar", e em "Email Subscriptions" clique em "Activar").
    • botao
      Texto que vai aparecer no botão de enviar.
    • cookie_fechar
      Número de dias em que o popup deixa de aparecer para quem preferiu fechar o popup.
    • cookie_botao
      Número de dias em que o popup deixa de aparecer para quem clicou no botão de subscrever.
    • veloc_escurecimento
      Milisegundos para o efeito de escurecimento.

    IMPORTANTE: Ao gravar as alterações do ficheiro pop-email.js, seleccione no Bloco de Notas a opção de codificação UFT-8 para que os acentos sejam exibidos correctamente.

  5. Faça upload dos ficheiros pop-email.css e pop-email.js para o seu servidor

  6. Cole o seguinte código no ficheiro functions.php do seu blog:
    <?php
    function abrir_scripts(){
    wp_deregister_script(array('jquery'));
    wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js');
    wp_enqueue_script('pop-email', 'http://seusite.com/scripts/pop-email.js',array('jquery'),'1.0');
    wp_enqueue_style('pop-email', 'http://seusite.com/scripts/pop-email.css');
    }
    add_action('wp_enqueue_scripts', 'abrir_scripts');
    ?>
    Substiua o que está a vermelho pelos endereços onde guardou os ficheiros.
    O ficheiro functions.php encontra-se na pasta wp-content/themes/seutema . Poderá também editar o ficheiro functions.php a partir do painel Wordpress, indo a "Aparência", e a "Editor".

    Alternativa:

    Colar aquele código no ficheiro functions.php é o forma mais correcta de instalar scripts no Wordpress. Mas outra maneira, que também funciona, é editar o ficheiro header.php e colocar nele este código alternativo (entre as tags <head> e </head>):
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://seusite.com/scripts/pop-email.js"></script>
    <link rel="stylesheet" type="text/css" href="http://seusite.com/scripts/pop-email.css" />

E assim o popup fica instalado no seu blog Wordpress, e a sua lista de assinantes vai agora começar a crescer a um ritmo muito maior.

 

Como Instalar no Blogger

  1. Faça download do ficheiro PopUp-Feedburner-Email.zip . Descompacte.

  2. Faça upload das imagens para um servidor. Pode fazer o upload de ficheiros para uma conta "Sites" do Google, e usar os ficheiros com os respectivos endereços do Google Sites. Clique no link para ver como pode fazer upload de ficheiros para o Google Sites.
    • bfechar.png (botão para fechar a janela)
    • fundo-transp.png (serve para escurecer o fundo em volta da janela popup).
    • gradiente-cinza.jpg (opcional, em alternativa pode ser usada uma cor de fundo).

  3. Edite o ficheiro scripts-pop-email.txt
    O ficheiro scripts-pop-email.txt é que tem todo o código que depois vai ter que colar no seu blog. Mas antes disso vai ter que fazer algumas alterações.

    Entre as tags <style> e </style> poderá configurar alguns atributos CSS:

    • Dimensões
      Para alterar a largura e altura da janela popup, modifique os valores indicados a vermelho:
      #boxes .window {
      position:absolute;
      left:0;
      top:0px;
      width:290px;
      height:350px;
      display:none;
      z-index:9999;
      }

      #dialog {
      width:280px;
      height:350px;
      padding:10px;
      background-color:#fff;
      background-image:url('http://seusite.com/imagens/gradiente-cinza.jpg');
      border:2px solid #000;
      }
      Mantenha sempre a largura de #boxes 10px superior à largura de #dialog.

    • Cor de fundo e imagem de fundo
      #dialog {
      width:280px;
      height:350px;
      padding:10px;
      background-color:#ffffff;
      background-image:url('http://seusite.com/imagens/gradiente-cinza.jpg');
      border:2px solid #000;
      }
      Para alterar a cor de fundo pode usar outros códigos de cores HEX.
      Substitua o endereço a vermelho pelo endereço onde guardou a imagem de fundo.

    • Outras configurações CSS
    • Se precisar pode ainda alterar as restantes secções do ficheiro CSS. Pode por exemplo modificar o espaçamento entre a imagem e o texto. Cada uma das secções está assinalada na figura seguinte:

  4. Entre as tags <script> e </script> deverá introduzir o conteúdo que deseja para a sua janela popup:

    var icon_fechar = 'https://sites.google.com/site/comofazerumsitecom/ficheiros/bfechar.png' ;
    var endereco_logotipo = 'http://seusite.com/imagens/seulogotipo.png' ;
    var texto_campo1 = 'Quer receber os posts do blog no seu email?' ;
    var texto_campo2 = 'Subscreva a newsletter gratuita.' ;
    var texto_campo3 = 'Endereço de Email:' ;
    var feedburner_id = 'IdSeuBlog' ;
    var botao = 'Subscrever' ;
    var cookie_fechar = 7;
    var cookie_botao = 7;
    var veloc_escurecimento = 1000;

    O que está a vermelho é o que deverá modificar em cada variavel. Certifique-se que não muda mais nada, a simples falta de uma aspa ou de um ponto e virgula pode ser o suficiente para o popup não funcionar. De sequida explicam-se as variaveis:


    • icon_fechar
      Deverá introduzir o endereço onde guardou a imagem bfechar.png do icone de fechar a janela popup.
    • endereco_logotipo
      Deverá introduzir o endereço onde guardou a imagem do logotipo do seu blog, ou de outra imagem que prefere que apareça no popup.
    • texto_campo1
      Breve frase para captar o interesse do leitor.
    • texto_campo2
      Breve frase em que o leitor deverá ser chamado a agir.
    • texto_campo3
      Descrição do que o leitor deverá introduzir no formulário.
    • feedburner_id
      Identificação do feed do seu blog no FeedBurner. Atenção: Certifique-se também que na sua conta do Feedburner a subscrição por email está activa (vá ao separador "Publicar", e em "Email Subscriptions" clique em "Activar").
    • botao
      Texto que vai aparecer no botão de enviar.
    • cookie_fechar
      Número de dias em que o popup deixa de aparecer para quem preferiu fechar o popup.
    • cookie_botao
      Número de dias em que o popup deixa de aparecer para quem clicou no botão de subscrever.
    • veloc_escurecimento
      Milisegundos para o efeito de escurecimento.

  5. Depois de efectuadas as alterações copie todo o conteúdo do ficheiro script-popup-email.txt e cole entre as tags <head> e </head> do template do seu blog (vá a "Modelo/Editar HTML" na plataforma do Blogger). Primeiro clique no botão "Visualizar modelo" e se tudo estiver bem clique então em "Salvar modelo" para guardar as alterações.

Pronto, se tudo tiver sido correctamente instalado a lista de assinantes do seu blog vai agora começar a crescer como nunca.



Registro de Dominio:
Namecheap.com

Domínios a preços acessíveis.
Inclui serviço de privacidade gratuito.

Hospedagem para seu site:

banner de afiliado

Eu próprio uso esta empresa
de hospedagem para alojar
os meus sites.

Criar Site Grátis:

Loja Virtual Grátis:

BLOG | FÓRUM | Política de Privacidade
Copyright © 2015 - ComoFazerUmSite.com
Design com Dreamweaver

.