Pop-Up Assinar feed via email no Blogger ( PEDIDO - RECURSOS CLOCK )

FERRAMENTA DE FEEDS FLUTUANTE NA LATERAL DO SEU BLOG

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:

Olá, sou o dono da WallpapersClock(*?HREAL) e da RecursosClock.(*?HPLAY )
Gostaria de pedir o código dessa janelinha dos feeds...

Obrigado

Baseado nisso resolvi criar um tutorial para criar uma Pop-up de inscrição do Feed via email, ENTÃO, VAMOS LÁ !

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 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=’REAL PLAY DOWNS‘/><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://realplaydowns.blogspot.com/2011/10/pop-up-assinar-feed-via-email-no.html”>Widget by REAL PLAY DOWNS</a></div>

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/REALPLAYDOWNS, 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!