Pop-Up Assinar feed via email no Blogger

Antes de Ler o Artigo e VEJA este Serviço Online que tem Todas as ferramentas que você precisa para o seu negócio on-line em uma única plataforma! Clique AQUI... Acesso GRÁTIS por TEMPO LIMITADO!

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!

Deixe sua nota para este Artigo!

Fabio Vasconcelos

Click Here to Leave a Comment Below
blogcafusao.com - 7 years ago Reply

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!

edilene - amor - 7 years ago Reply

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

Vera - 7 years ago Reply

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

blogcafusao.com - 7 years ago Reply

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!

Weverton Guedes - 7 years ago Reply

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!

Bianco Garniz - 7 years ago Reply

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!

Bianco Garniz - 7 years ago Reply

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!

Drauzio Milagres - 7 years ago Reply

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

Junior Alves! - 7 years ago Reply

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

Bianco Garniz - 7 years ago Reply

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

Wagner - 7 years ago Reply

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

Bianco Garniz - 7 years ago Reply

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!

Wagner - 7 years ago Reply

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

Bianco Garniz - 7 years ago Reply

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

BAIXENNET - 7 years ago Reply

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

Sirius Black - 7 years ago Reply

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-

Bianco Garniz - 7 years ago Reply

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!

Blog Normal, mas nem tanto... - 7 years ago Reply

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

Obrigada pelo tutorial! Tudo muito bem explicado! =)

socifrasgospel - 7 years ago Reply

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

Filme Free Net - 7 years ago Reply

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

Alê Romeu - 7 years ago Reply

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

http://hojeemdia-rederecord.blogspot.com

Abçs

johnpva - 7 years ago Reply

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

Bianco Garniz - 7 years ago Reply

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?

Alê Romeu - 7 years ago Reply

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

manthonioz - 7 years ago Reply

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.

●๋•By Vinicius●๋• - 7 years ago Reply

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

Aldenir Araújo - 7 years ago Reply

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

Emilio Passos - 7 years ago Reply

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.

Byte - 7 years ago Reply

Se não fizesse backup eu estaria perdido

Principe Encantado - 7 years ago Reply

Muito boa sua dica valeu Bianco
Abraços forte

Marcus Vinicius Flora - 7 years ago Reply

Excelente….
Parabens
Abraços

Up_TheBest - 7 years ago Reply

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!!!!!

Badango Posts - 7 years ago Reply

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

Privacidade - 7 years ago Reply

Eu quero mudar o tamanho!

Gabriel - 7 years ago Reply

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

Backulejo - 7 years ago Reply

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

Mundo Dos Blogs - 6 years ago Reply

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.

Dj Lex - 6 years ago Reply

Vou tentar Agora!!!

    Goo - 6 years ago Reply

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

Dome - 6 years ago Reply

este ..

Dome - 6 years ago Reply

div id= outer-wrapper div id= wrap2

Muryllu - 6 years ago Reply

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

Roberto Sabino - 5 years ago Reply

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

Mega Curiosidades - 5 years ago Reply

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

André Emerick - 5 years ago Reply

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

André Emerick - 5 years ago Reply

div id …..outer-wrapper

André Emerick - 5 years ago Reply

não acha!!

Leave a Comment: