Janela pop up para assinar feed (ao sair do blog e não ao entrar!)

em 7 de junho de 2016

janela pop up para assinar feed

Você já entrou em um blog (ou site) onde aparece, mal a gente abre a página, uma janela pop up pedindo pra gente se inscrever na newsletter, assinar o feed ou curtir a fanpage?
Eu sempre entro, e não sou assim uma grande fã do recurso...

Acontece que não há muito sentido em convidar o leitor do blog para alguma ação, como assinar o feed do blog, ou curtir a fanpage, antes mesmo dele ter tido a chance de conhecer um pouco do blog, concorda? Me refiro, claro, aos leitores novos do blog...

Mas é exatamente isso que essas caixas pop up fazem: elas abrem na hora que o leitor acessa o blog, antes dele ter a chance de ver qualquer coisa...
Daí a reação é imediata: fecha a bendita caixinha e segue navegando, ou faz pior: fecha a janela e sai do blog. Muitas vezes para nunca mais voltar.

Mas hoje eu quero compartilhar contigo um tutorial bem interessante, que faz diferente: ao invés de mostrar a caixa para assinar o feed assim que o leitor entra no blog o código que vou ensinar mostra essa caixinha quando o leitor está saindo do blog.
Não entendeu?
Visualize:

Demonstração do tutorial


Esse mesmo modo de fazer pode ser aplicado ao box de curtir, com algumas diferenças.
Hoje vou ensinar como colocar a caixinha para assinar o feed.
No próximo tutorial ensino como usar esse código para colocar o box de curtir do Facebook.
Vamos aprender?


Janela pop up para assinar o feed


São 3 códigos que você precisa implementar no código fonte de seu template.
São passos simples, mas faça com atenção, cuidado e sobretudo faça primeiro em um blog de testes.
Esses são os códigos, abra a página deles e conserve-a aberta para copiar no momento em que for solicitado:


Copiar os códigos


Para começar seu blog precisa ter os feeds ativos, ok?


Feeds ativos e perfeitos?
Então vá ao painel administrativo de seu blog e clique na aba Modelo.
A seguir clique em Editar HTML e dentro da caixa de códigos tecle Ctrl+F.
Na barra de busca que aparecer digite </body> e tecle Enter para localizar.
ACIMA da tag </body> cole o Código HTML.

Agora preste muita atenção!
Nesse código está a alteração indispensável que você precisa fazer: trocar o nome do meu feed elainegasparetoparada pelo nome do seu feed.
Isso é indispensável, tá?

Também é nessa parte que você altera o texto Antes de sair gostaria de assinar nosso feed?.
Apague essa frase e coloque a chamada que desejar.
Também pode editar os dizeres Sem spam, Atualizado e Gratuito pelo texto que desejar.

Editou tudo conforme seu gosto?
Salve.

Agora pesquise por </head> e ACIMA dessa tag cole o Código Javascript.
Se quiser altere o nome da fonte.
Escolha aqui a fonte que preferir.
Salve.


Agora localize esse trecho:



ACIMA dele cole o Código CSS.
Esse código é o que define a aparência da sua janela pop up.
Se tiver trocado o nome da fonte no Código Javascript coloque nesse Código CSS a mesma fonte.
Pode trocar cor de fundo, cor de fonte, etc...
Todas as cores são definidas pelo código hexadecimal precedido do sinal #.
Qualquer alteração nesse código só deve ser feita se você tem um nível médio de conhecimento em CSS.
Alterou o que deseja? Cores, fontes, etc...
Salve.
Está pronto!


Se tudo deu certo seu blog exibe agora uma janela pop up que convida o leitor para assinar o feed do blog.
Para que a janela apareça role a página um pouco e a seguir faça de conta que vai fechar a página.
A janela surgirá.
Legal, né?



Fiz tudo e não deu certo, o que aconteceu?


Caso você tenha seguido rigorosamente os passos do tutorial e ainda assim sua janela não apareça procure ver se não aconteceu alguns desses problemas:

1- Seu blog tem scripts demais e eles entraram em conflito com o script da janela pop up. Nesse caso precisa identificar o conflito e optar por qual recurso manter. Infelizmente não dá pra ter tudo...

2- Seus feeds não estão configurados corretamente, e aí realmente não vai dar certo. Certifique-se de que esteja tudo ok. Visite http://www.feedburner.com e veja se está tudo bem feito.

3- Confira se você colocou o nome de seu feed no lugar indicado (aparece 2 vezes) no Código HTML.

Uma dica extra:
Leia e releia o tutorial até entender tudo.
Testei em modelos nativos do Blogger, do Designer de Modelo e no antigo Mínima modificado.
Em todos deu muito certo.
Não testei em templates baixados da internet, então não sei dizer se funciona.

Agora é contigo!
Divirta-se...
E no próximo tutorial vamos aplicar esse mesmo princípio ao box de curtir do Facebook.
Você vem?

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

8 comentários , comente também!

  1. Eu queria um que ficasse em uma janela pup up no canto inferior da tela. Depois você faz um tuto assim?
    Bjus

    http://www.anegraeseustons.com.br

    ResponderExcluir
  2. PAROU DE FUNCIONAR. VERIFICA O Q HOUVE ESSE POP UP E MUITO BOM.

    ResponderExcluir
  3. Olá! Pode ser adaptado para funcionar no celular/tablet?

    ResponderExcluir
    Respostas
    1. Nunca testei, mas em tese funciona sim :)

      Excluir
    2. Boa noite Elaine! Obrigada pelo rápido retorno! Mas não funcionou comigo no safari... E tb no iphone/ipad, pois como o pop up aparece ao colocarmos o mouse sobre o cabeçalho de endereço do site, como é touch screen, a pessoa clica direto sobre o endereço, alterando o site e ele não aparece... Tem jeito? Rsrs

      Excluir
    3. rsrsr acho que não, justamente por causa do touch screen...

      Excluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…