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:
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.]]></b:skin>
Antes deste código insira o código abaixo
Feito isto precisamos criar a div, localize a sessão abaixo
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;}<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'>
Depois disto, visualise, e se não houver erros, salve!
<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('http://feedburner.google.com/fb/a/mailverify?uri=ComoFazerWeb', 'popupwindow', 'scrollbars=yes,width=550,height=520');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>
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">
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.
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>
É 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!
Ah... OBs.: Agora, nossos assinantes de feed via email, tem conteúdo exclusivo no seu email, todos nossos artigos, vem com um bônus, que apenas os assinantes conseguem ver no seu email, não assinou ainda? assine aqui, nosso feed, e receba conteúdos exclusivos!
Compartilhe este artigo:
Salve este post em sua lista de favoritos:
Artigos
Comentários
31 comentários:
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!
Muito boa
tua informaçao,
aliás,
todas
bj
Muito interessante. Vou seguir teu conselho: fazer primeiro em um blog de testes. Obrigada pela dica.
Bjss
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!
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!
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!
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!
Ótima dica. Salvei em pdf para estudar depois. Um abraço. Drauzio Milagres.
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.......
Valeu Júnior, melhor que o Google é boa, gostei, abraço, e no que precisar, é só falar!
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
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!
Descupa amigo Mais Meu Blog Nao e de Conteydo Porno Nao Meu Blog e
http://clonedowns.blogspot.com, Mais Obrigado Pela sua atenção
Desculpe Wagner, é que eu tinha entrado no seu perfil e vi, mas devo ter me enganado, mesmo assim espero ter ajudado, grande abraço!
Olá amigo gostei muito deste recurso,e estou usando.Vlw sua dica.
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-
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!
Muito bom! Mais uma coisa que pretendo colocar no Blog, depois que tiver o Novo Template.
Obrigada pelo tutorial! Tudo muito bem explicado! =)
Muito bom mesmo, parabéns! não esperava ser possível fazer este tipo de coisa no blogspot.valeu
muito bom esta de parabéns esta procurando isso mesmo valeus
Olá Parceiro. Esta dica é maravilhosa mas pena que não funfou em meu BLOG. Please Help me !!!!
http://hojeemdia-rederecord.blogspot.com
Abçs
muito show cara
vo usa no meu blog, mas vc sabe como colocar no canto da tela?
iguals nos outros blog's..
vlw
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?
Perfeito Amigo. Após um ajuste bem simples, consegui fazer funcionar. Muito obrigado.
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.
www.pamdownloads.blogspot.com ou resposta por email paulomingatos@hotmail.com
Desde Ja Agradeço
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.
Parabens,realmente é ótima a dica,estava procurando ela para blogger,vlw.
Muitíssimo obrigado pela dica, parabéns pelo site.
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.
Se não fizesse backup eu estaria perdido
Ola Bianco Garniz, gostei muito do seu tuto exelente, fiz o feedpopup para meu blog: http://www.robustterdownloads.blogspot.com e gostaria de sabe como eu modifico ele para diminuir o tamanho e colocar ele no cato direito do blog!
igual a de uns que vi por ai, pequeno e no canto do blog...
http://img708.imageshack.us/img708/232/poup.png
Parabens pelo bog e obrigado!
Postar um comentário
Pequenas regrinhas
Seu comentário será moderado, e postado se não violar estas regrinhas.
-Faça comentários relativos ao assunto abordado.
-Pedidos de parcerias e anúncios use a área de contato
-Não faça calunias, difamações, menos ainda citações preconceituosas.
-Só inclua links relevantes ao assunto abordado.
-Se quiser um link use OpenId
-Não faça Spam,não faça spam,e não faça spam!
OBS.:As Opiniões dos leitores aqui contidas não refletem a opinião dos autores deste blog.