Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Códigos e Scripts Vanessa S.

Box Flutuante Assinar Feed via Email

Que tal oferecer assinatura de seus Feed a seus leitores, através de um box flutuante, que funciona como uma janela Pop Up que se abre assim que o leitor entra em seu blog?

Este recurso já é oferecido à plataforma Wordprees, através da instalação de um plugin, porém, agora também é possível obtê-lo no Blogger,para isto basta instalar um código no template.

Atendendo a sugestão de artigo enviada por email, hoje você verá como instalar um Box Flutuante e poder divulgar e oferecer assinatura de seus Feeds a seus leitores.
Este widget é bem simples e fácil de instalar, e possui um efeito bem legal.


DEMO

Vamos ver como instalar?

Vá para o menu “Layout”, clique em “adicionar um gadget”, (pode ser em qualquer lugar: sidebar, footer etc, mas não coloque título), escolha o modo HTML/javascript e cole o seguinte código:


<style type="text/css">
#topbar
{
padding: 5px 5px 5px 5px;
visibility: hidden;
border: black 1px solid;
width: 340px;
font-family: Tahoma;
position: absolute;
background-color: white
}
</style>
<script type="text/javascript">
var persistclose = 0
var startX = 5
var startY = 5
var verticalpos = "frombottom"
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.right=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>
<div id="topbar">

<a href="javascript:closebar();"><img border="0" style="float: right;" src="http://lh4.ggpht.com/_UCfxgWHzU98/S21DcwKbx9I/AAAAAAAAByU/XVXEvhvu7rA/closeicon.gif" rel="nofollow" title="Fechar janela" /></a>
<a target="_blank" href="url-do-seu-feed"><img border="0" vspace="4" align="left" title="Assine nosso Feed" height="48" src="http://lh6.ggpht.com/_UCfxgWHzU98/SuutdCeSzAI/AAAAAAAABXI/LsUY2tSb2AI/rss_feed.png" hspace="4" width="48" /></a>
<center><font color="#000000"><b>Fique sempre atualizado! <br />Cadastre-se e receba nossas novidades em seu e-mail.</b> </font><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=nomedoseufeed&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' ><input name="email" style="WIDTH: 250px" /><input name="uri" type="hidden" value="nomedoseufeed" /><input name="loc" type="hidden" value="pt_BR" /><input type="submit" value="Assinar" /></form>
</center><span style='font-size: 65%;font color: #000;text-align: right'>Widget by MundoBlogger<a target='_blank' href='https://www.mundoblogger.com.br/2010/03/box-flutuante-assinar-feed-via-email.html'><font color="#000000"> Instale este widget</font></a></span></div>

<div class='clear'></div>

Faça as alterações necessárias. Na parte destacada em azul, coloque a url do seu Feed.
Na parte destacada em vermelho, coloque o nome do seu Feed.
Se precisar, vá até o site FeedBurner e verifique o seu Feed, copie-o e cole- no local destacado em vermelho.
Lembrando que para este Widget funcionar é necessário que você tenha habilitado a opção “assinatura de feed por email”.

E antes que eu me esqueça: Não retire os créditos! E não publique este widget como se fosse seu!
Não esqueça que antes de disponibilizar algo, existe alguém que “ralou” bastante, testando e editando código para ser publicado e disponibilizado para uso, portanto, os créditos devem ser mantidos, ok?

[alerta]
A funcionalidade deste script pode variar de acordo com o template.
Templates que possuem muitos scripts, acabam gerando “conflitos” entre si. Caso este script não funcione em seu blog, faça uma avaliação de quais realmente são mais necessários. Para melhor entendimento, leia este artigo: Por que alguns scripts não funcionam no meu blog.
[/alerta]

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

51 Comentários

  1. Monique Tosta disse:

    No template q utilizo no momento não funciona, desço a barra e nunca chega ao fim.
    Já template que estou preparando para mudar funcionou, mas ao digitar o e-mail, a caixa de confirmar abre em um popup e na página do blog. Sabe me informar como corrijo esse erro??

  2. Alvaro disse:

    Ju tenho uma duvida quando eu coloco ela em meu blog e o visitante asassina, ao clicar em “Enviar” carrega-se duas paginas de confirmação para confirmar aquelas letras e tals.. Isto é normal?

  3. Aqui Não deu certo o box não fica flutuante, fica na área de Gadgets como se fosse um Gadget comum, O que eu faço?

  4. fernando disse:

    amigo no meu aki ele comforme vou decendo no site ele desce tudo e nao para para colocar o email nele.oque eu faço?

  5. Anonimos disse:

    Oi boa tarde como posso colocar esse código na parte inferior do blog ?

  6. Isa disse:

    Como fazer no wordpress.org?

  7. Ivan disse:

    Me ajuda nessa bagaça ta bugada o feed não vai pq antes eu fis pq era .blogspot.com,mas comprei um dominio .net ta deficil não consigo botar ele dá erro,me ajuda por favor =(.

  8. Douglas Rios disse:

    Valeu por mais essa dica! Seu site é incrível!!

  9. Stephanie Barbosa disse:

    ué no meu blog não ta aparecendo eu coloquei o feed do blog o nome mas nao ta aparecendo pq?

  10. Jessi Potter disse:

    Clau, se eu utilizar o feed do próprio blog tem algum problema?

  11. Tom Download disse:

    rapaz aqui no meu blog omeudownload.blogspot.com funciona perfeitamente! obrigado!

  12. .:: Clau ::. disse:

    Pablo
    Conforme eu já comentei anteriormente, a funcionalidade deste script relmente pode variar de acordo com o template. Infelizmente não tenho como te ajudar.

  13. Pablo Henrique disse:

    Clau,tentei, mais não deu certo a pagina do meu blog ficou infinita, queria saber se vc tem outro post relacionado com o feed, mais eu queria um que assim que o visitante entrasse no meu blog aparesesse uma janela para que ele se escrevesso no feed, #souseufã

  14. Angela Regina e Luccas Brunno disse:

    Ciao, Clau!!

    Stoi a ti screver per pregare ajuda.. Observei che os e-mails do feedburner notificando las atualizazon di blog all cadastrados mostram la matéria completa… Existe una maneira, alguma opzon la marcarer in feedburner all no Blogspot per che apenas o link e o título dellas nuovas postegens apareçam reduzindo o número di caracteres in e-mail enviado all cadastrados, per ficare apenas o 1º parágrafo, poi è un forma di aumentar o acesso in blog. Molto legal questa tua dica, vou usar in blog.

    Abbraccio fraterno,

  15. youtomusic disse:

    no meu aqui nao rola para baixo e para cima! o que faço?

  16. ? yaa disse:

    Claaaaau.
    Queria um desse, não só para convidar os leitores a assinar o feed, mas também pra linkar as páginas de redes sociais. Aí eu fiz tudo bonitinho, mudei o que era preciso e coloquei. Deu certo menos por um detalhe: quando desço a página, o widget fica por trás dos outros gadgets.
    Como lida? :~

  17. RoEeD disse:

    O meu funcionou, mais notei que apenas no IE enquanto no FireFox 4.0 não apareceu nada!
    Alguém poderia me da uma força?

  18. Sílvio Ribas disse:

    Infelizmente não funcionou no meu blog…
    O widget apareçe abaixo da margen inferior ficando invisivel aos visitante ou fica aparecento por trás das imagens e texto do blog…
    Clau, se você poder me ajudar, eu agredeço!
    Meu blog: www baixegratis .net

  19. Sm@rtiN disse:

    Oi Clau tudo bem com vc?
    Estou aprendendo muito com o seu blog viu?
    Valeu por mais uma dica!
    Se quiser conhecer o meu blog, o endereço é:
    http://blogdosmartin.blogspot.com
    Continue nos ajudando com essas dicas preciosas!
    Abraço!

  20. .:: Clau ::. disse:

    Ana Costa
    Dá uma lida no tutorial: Criar mapa do site.

    Marcus
    Existe sim, mas não me lembro o nome dele.=/

  21. Criativo de Galochas disse:

    Olá Cláudia, td bem? Você conhece algum plugin com a mesma função para o wordpress?
    Abs
    Marcus

  22. ana costa disse:

    Olá, seu blog tem-me sido muito útil para a construção do meu, muito obrigada.
    Agora precisava de uma ajudinha…como faço para pôr o botão de ir para o topo? eu puz só que ficou mt minorquinha! outra coisa, gostava que o meu blog tivesse uma apresentação do género do seu, ou seja com as diversas páginas assinaladas para clicar…pode me ajudar? obrigada

  23. .:: Clau ::. disse:

    Beto Default
    Infelizmente, ainda não.

  24. Beto Default disse:

    Clau, valeu pelo código. Já tem alguma "notícia" de incompatibilidade deste box flutuante com outro código JS ? Algum script ou widget ? ^^ 🙂

  25. .:: Clau ::. disse:

    Luis ADM
    Se vc não notou, no dia 25/12/10 eu publiquei um post informando que estou viajando e o blog entraria em recesso por um periodo.
    Não me leve a mal não, mas independente de eu estar viajando de férias ou não, quanto as respostas dos comentários no blog,eu respondo qdo posso! Qdo tenho disponibilidade e tempo para fazer-lo. Se não lhe respondi, foi justamente por não estar disponivel.

  26. Luis ADM disse:

    pow clau nem pra responder,vle sua atenção em!

  27. luis[adm] disse:

    qual é o plugin do wordpress?
    Obrigado

  28. .:: Clau ::. disse:

    arteffinal.com
    Em #topbar
    tenta aumentar o valor em padding, desta forma:
    padding: 5px 5px 20px 5px;

  29. arteffinal.com disse:

    Olá Clau…,
    quanto ao box flutuante, gostaria de saber onde posso alterar a altura (posicionamento) dele por que se você olhar no meu blog: http://www.arteffinal.com ele irá mostrar o box, porém eum um lugar que não dar pra ver o seu crédito. Aguardo uma resposta.

    Abraço.

  30. Bruno Sajermann disse:

    Ah, blz, não entendo nada de Cookies mas ta fmz, parabens pelo site, obrigado!

  31. ::Clau:: disse:

    @Bruno Sajermann:
    ele não falou como conseguiu resolver isso, mas eu acredito que possa ter relação com os cookies, pq se vc analisar esse box funciona a base de um script que utiliza cookies para faze-lo funcionar.
    Falo isso pq o código pra abrir o cadastramento do email em "pop up" é o mesmo código disponibilizado pelo próprio Feedburner.

  32. Bruno Sajermann disse:

    Clau, o leitor @DownloadsXT citou nops comentarios, que estava com problema de abrir duas janelas quando a pessoa vai assinar o feed, só que ele conseguiu arrumar, porém ele não falou como, você sabe como ele arrumou???

    Por favor, to com o mesmo problema!

    Bjus!

  33. ::Clau:: disse:

    @sandro3a:
    Infelizmente eu não tive tempo algum pra tentar descobrir isso. Mas eu acredito que possa ser algo relacionado ao código fornecido pelio Feedburner,
    pq o código pra abrir o cadastramento do email em "pop up" é o mesmo código disponibilizado pelo Feedburner, essa parte eu não alterei em nada no código.
    Não tem como eu te ajudar.

    @Nissan Skyline:
    No inicio do código, lá em "#topbar", onde está
    "background-color: white", troque por:
    background: transparent url(endereçodasuaimagem);

    @Daniel:
    Vc deve habilitar a opção para oferecer cadastro via email de seus feeds, e para isso deve fazê-lo através do site Feedburner.

  34. Daniel disse:

    meu feedBuner flutuante aparece essa mensagen quando envio o email:
    A alimentação não tem assinaturas por e-mail ativado como faço para resolve? ou The feed does not have subscriptions by email enabled.

  35. Nissan Skyline disse:

    Olha eu coloquei ele no blog tem como colocar uma imgem de fundo background pois assim ele fica atras dos videos e imagens do meu blog se tiver me ajuda vlw gostei muito do seu blog deve entender muito de html,css,xml obrigado seu blog e lindo a sua cara 😉

  36. sandro3a disse:

    Oi muito bom esse tutorial mas estou com um probleminha aqui no meu blog de teste, o box esta funcionando corretamente abrindo em um pop up sendo que a pagina do blog tbm muda junto, eu li um comentario de um amigo que estava com essa problema tbm, mas ele não postou como conserta. Alguem pode me ajudar nisso. Muito obrigado desde já.

  37. Ganac disse:

    Bom dia, essa ferramenta é muito bacana, queria saber se existe uma configuração para quando fechar a caixa ela não aparecer mais, ou seja só aparece no primeiro acesso e quando fechada não retorna.

  38. ::Clau:: disse:

    @Adm Scorpion:
    1º: Pelo amor…eu não sou "mano" O.o
    Sou mulher O.o
    A funcionalidade deste script pode variar de acordo com o template. Dá uma lida no final da postagem, tem um link de um artigo que pode te esclarecer a respeito.

  39. Adm Scorpion disse:

    Mano fiz qoeu vc mandou fazer mais o feed box num fica flutuando e sim em forma de widget

  40. francinelson disse:

    oi clau,
    criei um script a parti de seu mas com outra função ok!
    não copiei nada de de texto do seu artigo!
    da uma olhada ae !
    http://reidobloguinho.blogspot.com/2010/04/box-de-pesquisa-flutuante-no-blog.html

  41. Žéß?_?T disse:

    Ja concertei o problema da pagina abrir em cima do meu blog.

    mas agora tou com outro problema. e creio que esse problema só tem no meu blog. quando voce vai descendo a pagina o box tambem desce, mas só que ele ta passando por tras da imagem que fica o titulo dos widgets da minha sidebar. Clau se poder me ajuda a resolver isso por favor. se eu for mecher no código é capaz de eu estragar ele 😀

  42. EMPREGO PRA ONTEM disse:

    Sera que tem como voce arrumar uma pequena coisinhas. quando a pessoa coloca o email para assinar e clica em Assinar abre uma janela pop-up e tambem abre a pagina de registro do email em cima do meu blog. Eu gostaria que so a janela pop-up abrisse e nao a pagina toda em cima do meu blog.

    Como posso resolver isso?

    desde já agradeço a ajuda
    meu email e felipesouzarabello@gmail.com

  43. Žéß?_?T disse:

    Sera que tem como voce arrumar uma pequena coisinhas. quando a pessoa coloca o email para assinar e clica em Assinar abre uma janela pop-up e tambem abre a pagina de registro do email em cima do meu blog. Eu gostaria que so a janela pop-up abrisse e nao a pagina toda em cima do meu blog.

    Como posso resolver isso?

  44. Žéß?_?T disse:

    Aee. Isso que tava querendo. Vlw

  45. Isabella F. disse:

    Amei e coloquei no meu blog! E não se preocupe pois mantive os créditos ^^

    Obrigada!

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