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!
Descubra a estrutura que realmente funciona para criar seu primeiro negocio digital começando do zero Clique AQUI

Deixe sua nota para este Artigo!

Leia Também:

Junte-se a 10,900 leitores inteligentes e receba atualizações, videos, artigos e dicas imperdíveis para criar um Negócio Online de Sucesso (é grátis)!

100% livre de spam.

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:

    div id= outer-wrapper div id= wrap2

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

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

  44. Mega Curiosidades disse:

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

  45. André Emerick disse:

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

  46. André Emerick disse:

    div id …..outer-wrapper

  47. André Emerick disse:

    não acha!!