Pop-Up Assinar feed via email no Blogger

Desde que comecei a promoção, para dar aos assinantes de feed via email, um domínio .COM.BR, resolvi divulga-la através de uma Pop-up, que se abre ao entrar no blog, oferecendo a assinatura do feed via email, parecido com que alguns blogs que usam WordPress vem fazendo.
O fato é, que desde a inclusão da Pop-up, recebi uma porrada de emails(mentira…foram uns 8 ou 9) me perguntando como criei e como fazer uma igual, teve até comentário aqui mesmo no blog onde o amigo disse:

Tenho duas dúvidas, a primeira como eu crio um gadget abaixo das postagens, igual a esse seu, onde fica os seguidores, um gadget do tamanho da tela?
A segunda dúvida é, como você criou um feed via email automático
Agente entra no blog e aparece a msg para nos assinar seu feed.
Faz um tutorial por favor! como faz um feed pop up??

Baseado nisso resolvi criar um tutorial para criar uma Pop-up de inscrição do Feed via email, mão na massa!

Entre no seu blog e vá em LAYOUT>EDITAR HTML> não precisa expandir modelos de widget.

Procure por

]]></b:skin>

Antes deste código insira o código abaixo

#topbar{
position:absolute;
border: 2px solid green;
padding: 5px 0px 0px 0px;
margin: 100px 0px 0px 200px;
background-color: #ffffff;
font-size:12px;
width: 450px;
visibility: hidden;
z-index: 450;}

Feito isto precisamos criar a div, localize a sessão abaixo

<div id=’outer-wrapper’><div id=’wrap2′>

Pode estar um pouco diferente em seu template, mas procure logo depois de <body> que acaba achando a sessão, depois de achar insira o código abaixo logo depois da sessão citada

<div id=’topbar’>
<a href=” onClick=’closebar(); return false’><img border=’0′ src=’http://img526.imageshack.us/img526/3991/botodefechar.jpg’/></a>
<img src=’http://img30.imageshack.us/img30/6428/50694460.jpg’/>
<center><form action=’http://feedburner.google.com/fb/a/mailverify’ method=’post’ onsubmit=’window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ComoFazerWeb&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true’ style=’BORDER-BOTTOM: #228b22 0px solid; TEXT-ALIGN: center; BORDER-LEFT: #228b22 0px solid; PADDING-BOTTOM: 3px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; BORDER-TOP: #228b22 0px solid; BORDER-RIGHT: #228b22 0px solid; PADDING-TOP: 3px’ target=’popupwindow’><p><b>Coloque seu email:</b></p><p><input name=’email’ style=’WIDTH: 250px’/></p><input name=’uri’ type=’hidden’ value=’ComoFazerWeb‘/><input name=’loc’ type=’hidden’ value=’pt_BR’/><input type=’submit’ value=’Assine grátis’/> <p>Delivered by <a href=’http://feedburner.google.com/’ target=’_blank’>FeedBurner</a></p></form></center><p/><a href=”http://www.comofazerweb.com/2009/09/pop-up-assinar-feed-via-email-no.html”>Widget by CFW</a></div>

Depois disto, visualise, e se não houver erros, salve!
Agora volte ao Layout, e clique em adicionar um gadget, pode ser em qualquer lugar, isto é de menos, escolha HTML/Java script, não coloque título, copie o código abaixo cole e salve, pronto!

<script type=”text/javascript”>
var persistclose=1 // Se coloca en 0 o 1. 1 significa que una vez que la barra es cerrada, entonces permanece cerrada en el resto de la sesión
var startX = 20 // Tamaño horizontal de la barra en pixeles
var startY = 5 // Tamaño vertical de la barra en pixeles
var verticalpos=”fromtop” // “fromtop” o “frombottom” para definir si va arriba o abajo.

function iecompattest(){
return (document.compatMode && document.compatMode!=”BackCompat”)? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + “=”
var returnvalue = “”;
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(“;”, offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie=”remainclosed=1″
document.getElementById(“topbar”).style.visibility=”hidden”
}

function staticbar(){
barheight=document.getElementById(“topbar”).offsetHeight
var ns = (navigator.appName.indexOf(“Netscape”) != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie(“remainclosed”)==””)
el.style.visibility=”visible”
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+”px”;this.style.top=y+”px”;};
el.x = startX;
if (verticalpos==”fromtop”)
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos==”fromtop”){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY – ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight – barheight: iecompattest().scrollTop + iecompattest().clientHeight – barheight;
ftlObj.y += (pY – startY – ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout(“stayTopLeft()”, 10);
}
ftlObj = ml(“topbar”);
stayTopLeft();
}

if (window.addEventListener)
window.addEventListener(“load”, staticbar, false)
else if (window.attachEvent)
window.attachEvent(“onload”, staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>

Agora faça as alterações necessárias, aquelas que marquei em vermelho, os tamanhos não tem necessidade de mudar, mas a parte que aparece em laranja é obrigatório trocar, exemplo meu feed é http://feeds.feedburner.com/ComoFazerWeb, então em value está a parte laranja, verifique o seu feed, pegue o fim e cole lá no local marcado em laranja.
É importante que a assinatura via email esteja habilitada no Google FeedBurner, se não estiver habilite para que possa funcionar.
Brinque bastante com o código, use um blog de testes, depois de tudo pronto insira no seu blog, só pra lembrar, não retire os créditos, pra fazer algumas coisas a gente soa um pouco, se tiver dúvidas comente!

Sobre o autor | Website

Para enviar seu comentário, preencha os campos abaixo:

Deixe uma resposta

*

49 Comentários

  1. blogcafusao.com disse:

    Primeiramente Gostaria de agradecer você bianco que facilita a vida de quem usa o blogger pois no wordpress é só instala um plugin e pronto!rs
    Agora sim vou ler o post e já twittei!

  2. edilene - amor disse:

    Muito boa
    tua informaçao,
    aliás,
    todas
    bj

  3. Vera disse:

    Muito interessante. Vou seguir teu conselho: fazer primeiro em um blog de testes. Obrigada pela dica.
    Bjss

  4. blogcafusao.com disse:

    Olá Bianco!
    Tentei funcionou só uma vez,parece brincadeira mais apareceu uma vez normalmente e depois carrega a página e não aparecia mais,se funcionou 1 vez o que será que está errado?rs
    Abraço!

  5. Weverton Guedes disse:

    Muito útil! Segui ao pé da letra, mas não funcionou, não aparece o pop-up. O que pode estar errado! um Grande abraço!

  6. Bianco Garniz disse:

    Olá Cafusão, primeiramente agradeço por twittar, quanto a abrir só uma vez, é normal, ele está programado para abrir assim, toda vez que o leitor abrir o navegador e entrar no seu blog, abrirá a pop-up, depois que fechar não abrirá mais, só se fechar o navegador e abrir um novo, isto é assim para não chatear o leitor, mas todos que chegarem ao seu blog veram a pop-up, abraço!

  7. Bianco Garniz disse:

    Weverton, usei o tutorial e instalei em um blog de testes meu e funcionou perfeitamente, deve estar errando em um pequeno ponto, lembre-se que se aparecer e você fechar ela só vai aparecer de novo quando fechar todos os navegadores abertos, e abrir um novo, tente fazer de novo lentamente e cuidando todos os passos, abraço!

  8. Drauzio Milagres disse:

    Ótima dica. Salvei em pdf para estudar depois. Um abraço. Drauzio Milagres.

  9. Junior Alves! disse:

    Bianco Garniz, cheguei uma conclusão que você e mais eficiente que o Google. Fazia muito tempo que eu vasculhava o Google e nunca achava esse tutorial, já procurei em diversos Blogue, mais nunca tinha a resposta.
    Agradeço mais uma ver, é que você tenha bastante sucesso. Valeu jr. Alves…….

  10. Bianco Garniz disse:

    Valeu Júnior, melhor que o Google é boa, gostei, abraço, e no que precisar, é só falar!

  11. Wagner disse:

    OLA AMIGO TO TENTO UM POBLEMA COM ESSE CODIGO
    EU COLOCO ELE CERTINHO MAIS QUANDO CRICO NELE PARA ELE SAIR ELE NAO SAIR O QUE FAÇO

  12. Bianco Garniz disse:

    Olá Wagner, vi o código instalado em um blog seu chamado linkpornos, e notei que ele foi instalado de maneira errada, provavelmente no css, que é a primeira parte, apague tudo e faça de novo com calma, cuide bem todos os detalhes, qualquer coisa é só falar de novo, senão copie todo seu template e salve em um bloco de notas, e me mande para este email comofazerweb[arroba]ymail.com eu instalo para você, abraço!

  13. Wagner disse:

    Descupa amigo Mais Meu Blog Nao e de Conteydo Porno Nao Meu Blog e
    http://clonedowns.blogspot.com, Mais Obrigado Pela sua atenção

  14. Bianco Garniz disse:

    Desculpe Wagner, é que eu tinha entrado no seu perfil e vi, mas devo ter me enganado, mesmo assim espero ter ajudado, grande abraço!

  15. BAIXENNET disse:

    Olá amigo gostei muito deste recurso,e estou usando.Vlw sua dica.

  16. Sirius Black disse:

    Opa amigo. coloque em meu blog so que no botao fechar aparece o link do meu blog e nao fecha o pop up
    como eu faço??
    E outra coisa como eu coloco a pop up no canto inferior direito?

    orbigado
    show d blog-

  17. Bianco Garniz disse:

    Olá Sirius, testei e re-testei, e funcionou perfeitamente, tenta refazer que vai funcionar, quanto a mudar ele de posição basta alterar direto nafolha de estilos, usando a margin que está assim: margin: 100px 0px 0px 200px;
    Altere os valores e vá verificando, mas para deixar no canto como quer, vá alterando o primeiro valor que é 100, ele vai ficar mais ou menos com uns 300, ou mais, e o último que está com 200, e vai ficar com uns 400 ou 500, basta testar, certo? abraço!

  18. Blog Normal, mas nem tanto... disse:

    Muito bom! Mais uma coisa que pretendo colocar no Blog, depois que tiver o Novo Template.

    Obrigada pelo tutorial! Tudo muito bem explicado! =)

  19. socifrasgospel disse:

    Muito bom mesmo, parabéns! não esperava ser possível fazer este tipo de coisa no blogspot.valeu

  20. Filme Free Net disse:

    muito bom esta de parabéns esta procurando isso mesmo valeus

  21. Alê Romeu disse:

    Olá Parceiro. Esta dica é maravilhosa mas pena que não funfou em meu BLOG. Please Help me !!!!

    http://hojeemdia-rederecord.blogspot.com

    Abçs

  22. johnpva disse:

    muito show cara
    vo usa no meu blog, mas vc sabe como colocar no canto da tela?
    iguals nos outros blog's..
    vlw

  23. Bianco Garniz disse:

    Olha só John,
    para modificar a localização é simples, basta ir na parte de css, basta achar #topbar{ depois na margin modifique os valores onde diz: margin: 100px 0px 0px 200px; vá alterando e visualizando, verá que vai mudar de lugar, modifique até ficar como quer, valeu?

  24. Alê Romeu disse:

    Perfeito Amigo. Após um ajuste bem simples, consegui fazer funcionar. Muito obrigado.

  25. PAM Dowloads disse:

    Olá gostei muito do seu post…muito util ate utilizei no meu blog…mas gostaria de saber como que poe o botao de fechar caso a gente queira fechar a pop-up…qualquer coisa da uma olhada la no meu blog.
    http://www.pamdownloads.blogspot.com ou resposta por email paulomingatos@hotmail.com
    Desde Ja Agradeço

  26. manthonioz disse:

    Eu descobri um e-mail fantástico na internet,e gostaria de compartilhar com todos internautas do mundo.Um grande abraço a todos e um ótimo fim de ano.

  27. ●๋•By Vinicius●๋• disse:

    Parabens,realmente é ótima a dica,estava procurando ela para blogger,vlw.

  28. Aldenir Araújo disse:

    Muitíssimo obrigado pela dica, parabéns pelo site.

  29. Emilio Passos disse:

    Procurava um tutorial como este, e finalmente encontrei. Estou feliz por encontrar além deste, varios conteúdos relevantes, que nos ajudam e muito.
    Muito Obrigado é pouco ainda.

  30. Byte disse:

    Se não fizesse backup eu estaria perdido

  31. Principe Encantado disse:

    Muito boa sua dica valeu Bianco
    Abraços forte

  32. Marcus Vinicius Flora disse:

    Excelente….
    Parabens
    Abraços

  33. Up_TheBest disse:

    Olá bianco excelente tutorial gostei muito não entendo nada de html !
    Eu gostaria de alterar o tamanho como o colega ia em cima do mesmo jeito e outra coisa gostaria que ele desliza-ce de baixo para cima tem como fazer isso vc pode nos esplicar desde ja te agradesço até mais!!!!!

  34. Badango Posts disse:

    Cara a muito tempo venho visitando seu site pois ele é otimo, muitas informações importantes eu achei aqui, agora esta estava procurando mo tempão .. obrigado pelo otimo post e continue sempre assim… muitooooo boommm veleuuuuu ….

  35. Privacidade disse:

    Eu quero mudar o tamanho!

  36. Gabriel disse:

    PArabéns ótimo para crescer os readers do feed do site !!!!

  37. Backulejo disse:

    Legal o Tópico tenho certeza que vai ajudar bastante a tdodos que estão começando com Blogs, por que além de tudo isso é fundamental para um Blog de qualidade, estão de parabéns.

    Atenciosamente,
    http://backulejo.blogspot.com

  38. Mundo Dos Blogs disse:

    Muito legal cara, aqui no meu blog eu uso uma imagem com um link para os feeds, mas acho que vou usar essa pop-up.

    Abraço.

  39. Dj Lex disse:

    Vou tentar Agora!!!

    • Goo disse:

      Não deu certo :/ Aprece a seguinte mensagem:

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

  40. Dome disse:

    Eu não acho de jeito algum este
    Ajude-me? msn sempre conectado : dome.jt@hotmail.com

    vlw galera

  41. Dome disse:

    este ..

  42. Dome disse:

    div id= outer-wrapper div id= wrap2

  43. Muryllu disse:

    Bianco, tentei por diversas vezes mais só aparece esse código de 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 “id”.

    Tentei em vários templates diferentes

  44. Roberto Sabino disse:

    Bianco, tentei diversas vezes colocar esse pop-up no meu blog.
    Se vc puder me ajudar fico muito agradecido, meu blog dá com um fluxo em média de 1000 visitas/dia mas não consigo que esses visitantes assinem meu feed.
    Muito Obrigado

  45. Mega Curiosidades disse:

    Bem legal as dicas, vou tentar colocar em meu blog.

  46. André Emerick disse:

    Não achei nem expandindo para Widget e nem normal o “”

  47. André Emerick disse:

    div id …..outer-wrapper

  48. André Emerick disse:

    não acha!!

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.

Vídeo Grátis
Descubra o Segredo das Pessoas Que Ganham mais de 10 Mil Reais por Mês Trabalhando Em Casa Pela Internet

Se você NÃO ganha dinheiro na Internet AINDA, você precisa ver este Vídeo!

chevron-down