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='http://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?


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.

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.

Comentários
  1. Monique Tosta
  2. Alvaro
  3. Caio Albuquerque
    • Vanessa
  4. fernando
  5. Anonimos
    • Vanessa
      • Michel
  6. Isa
    • Vanessa
      • Isa
        • Vanessa
  7. Ivan
  8. Douglas Rios
  9. Stephanie Barbosa
  10. Jessi Potter
  11. Tom Download
  12. .:: Clau ::.
  13. Pablo Henrique
  14. Angela Regina e Luccas Brunno
  15. youtomusic
  16. ? yaa
  17. RoEeD
  18. Sílvio Ribas
  19. Sm@rtiN
  20. .:: Clau ::.
  21. Criativo de Galochas
  22. ana costa
  23. .:: Clau ::.
  24. Beto Default
  25. .:: Clau ::.
  26. Luis ADM
  27. luis[adm]
  28. .:: Clau ::.
  29. arteffinal.com
  30. Bruno Sajermann
  31. ::Clau::
  32. Bruno Sajermann
  33. ::Clau::
  34. Daniel
  35. Nissan Skyline
  36. sandro3a
  37. Ganac
  38. ::Clau::
  39. Adm Scorpion
  40. francinelson
  41. Žéß?_?T
  42. EMPREGO PRA ONTEM
  43. Žéß?_?T
  44. Žéß?_?T
  45. Isabella F.