Janela pop up para assinar feed (ao sair do blog e não ao entrar!) - * Blog Elaine Gaspareto *

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

em 07/06/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?

13 comentários via Blogger
comentários via Facebook

13 comentários:

  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
  4. Ola Eliane, mto bom esse plugin, simples e facil. mas o meu qdo abre o menu de paginas fica por cima dele... vc sabe me dizer o que seria?

    mto obrigada

    ResponderExcluir
    Respostas
    1. Experimente aumentar o z-index do box, nesse trecho:
      z-index:99998;
      Ajumente para um valor bem alto (tipo 9999999), talvez ajude...

      Excluir
  5. Respostas
    1. Basta clicar em qualquer espaço do blog e a caixa fecha.

      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…



Visualizações

Contando...

Dias online
Postagens
comentários