PopUp de suscripción para Blogger con jQuery

4
Este popup de suscripción elaborado con jQuery permite que el usuario al ingresar por primera vez al blog, muestre una ventana emergente la cual le permita suscribirse a distintas redes sociales o servicios.

Este popup tiene la particularidad que trabaja con jQuery Cookie, una extensión que permite que jQuery almacene datos, gracias a ello permite que sólo aparezca una vez el mensaje cada 1 semana (tiempo de expiración de la cookie).

Tuto gracias a Ayuda Blogger



Vista previa del plugin:




¿Cómo añadirlo a Blogger?

Paso 1: Añadiendo la sección:

Primero, vamos a ''Diseño | Edición HTML'', marcamos ''Expandir plantillas de artilugios'' y buscamos la siguiente línea:
</body>

Justo arriba de esta, pegaremos el siguiente código:
<div id='popupContact'>
<a id='popupContactClose'>x</a>
<h1>TU TÍTULO</h1>
<p id='contactArea'>
Muchas gracias por visitar este blog, te recomiendo que te suscribas a los siguientes servicios:

<div class='separator' style='clear: both; text-align: center;'>
<a href='http://www.facebook.com/USUARIO' imageanchor='1' style='margin-left: 1em; margin-right: 1em;' target='_blank'><img border='0' src='http://3.bp.blogspot.com/-4Bz7JTJO_TM/TYjGrOxkskI/AAAAAAAAAjc/e_E59mI-0VU/s1600/facebook_32.png'/></a><a href='http://www.youtube.com/user/USUARIO' imageanchor='1' style='margin-left: 1em; margin-right: 1em;' target='_blank'><img border='0' src='http://1.bp.blogspot.com/-_z25Btg5c7Q/TYjGs6Qiv7I/AAAAAAAAAjo/MOcOd-lmAi4/s1600/youtube_32.png'/></a><a href='http://www.twitter.com/USUARIO' imageanchor='1' style='margin-left: 1em; margin-right: 1em;' target='_blank'><img border='0' src='http://4.bp.blogspot.com/-paLT5kbLPTY/TYjGr7bmcAI/AAAAAAAAAjk/bNJ33x_xDLM/s1600/twitter_32.png'/></a><a href='http://tu-blog.blogspot.com/feeds/posts/default' imageanchor='1' style='margin-left: 1em; margin-right: 1em;' target='_blank'><img border='0' src='http://2.bp.blogspot.com/-ULq8qNzNwQw/TYjGrhN9SRI/AAAAAAAAAjg/feTIE-KbfGk/s1600/rss_32.png'/></a></div>
<center>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=blogspot/USUARIO-FEEDBURNER&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='padding:3px;text-align:center;' target='popupwindow'><p>Ingresa tu Dirección de Correo:</p><p><input name='email' style='width:140px' type='text'/></p><input name='uri' type='hidden' value='blogspot/vkhLT'/><input name='loc' type='hidden' value='es_ES'/><input type='submit' value='Suscribir'/></form>
</center>


</p>
</div>
<div id='backgroundPopup'/>
Reemplaza los valores marcados por los correspondientes.

Paso 2: Añadiendo los scripts:

Ahora buscamos la siguiente línea:
</head>

Justo encima de esta, añadimos el siguiente código:

&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  
&lt;script src=&quot;https://sites.google.com/a/blogsydescargas.co.cc/ayudabloggers/scripts2/jquery.cookie.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
     var popupStatus = 0;
//this code will load popup with jQuery magic!
function loadPopup(){
    //loads popup only if it is disabled
    if(popupStatus==0){
        $(&quot;#backgroundPopup&quot;).css({
            &quot;opacity&quot;: &quot;0.7&quot;
        });
        $(&quot;#backgroundPopup&quot;).fadeIn(&quot;slow&quot;);
        $(&quot;#popupContact&quot;).fadeIn(&quot;slow&quot;);
        popupStatus = 1;
    }
}

//This code will disable popup when click on x!
function disablePopup(){
    //disables popup only if it is enabled
    if(popupStatus==1){
        $(&quot;#backgroundPopup&quot;).fadeOut(&quot;slow&quot;);
        $(&quot;#popupContact&quot;).fadeOut(&quot;slow&quot;);
        popupStatus = 0;
    }
}

//this code will center popup
function centerPopup(){
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $(&quot;#popupContact&quot;).height();
    var popupWidth = $(&quot;#popupContact&quot;).width();
    //centering
    $(&quot;#popupContact&quot;).css({
        &quot;position&quot;: &quot;absolute&quot;,
        &quot;top&quot;: windowHeight/2-popupHeight/2,
        &quot;left&quot;: windowWidth/2-popupWidth/2
    });
    //only need force for IE6  
    $(&quot;#backgroundPopup&quot;).css({
        &quot;height&quot;: windowHeight
    });
  
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
    if ($.cookie(&quot;anewsletter&quot;) != 1) {  
        //centering with css
        centerPopup();
        //load popup
        loadPopup();  
    }      
    //CLOSING POPUP
    //Click the x event!
    $(&quot;#popupContactClose&quot;).click(function(){
        disablePopup();
        $.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });
    });
    //Click out event!
    $(&quot;#backgroundPopup&quot;).click(function(){
        disablePopup();
        $.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });
    });
    //Press Escape event!
    $(document).keypress(function(e){
        if(e.keyCode==27 &amp;&amp; popupStatus==1){
            disablePopup();
            $.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });
        }
    });
});
&lt;/script&gt;


Paso 3: Añadiendo los estilos correspondientes:

Ahora buscamos la sección de CSS de nuestra plantilla:
]]></b:skin>



Arriba de esta, pegaremos el siguiente código:

#popupContactClose{
cursor: pointer;
text-decoration:none;
color: #fff;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack para internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack para internet explorer 6*/
height:284px;
width:391px;
background:#FFFFFF url(http://3.bp.blogspot.com/-5dXeJlybFpk/Tb2fi7pEkvI/AAAAAAAAA0g/MideNQUtcBM/s1600/metalbg-ayudabloggers2.PNG) center;
border:9px solid #cecece;
border-radius:5px;
z-index:2;
color:#fff;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#fff;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#fff;
font-weight:700;
display:block;
}


Guardas los cambios y listo:
 


Consideraciones:

  • Te recomiendo deshabilitar las cookies al trabajar el script, ya que éste una vez presionado, no volverá a aparecer durante una semana.
  • Si quieres vaciar el contenido del script, deberás eliminar el contenido desde <p id='contactArea'> a </p>.
  • El script no tiene atribución, pero está escrictamente prohibido copiar el contenido en otro blog sin citar la fuente (http://ayuda-bloggers.blogspot.com).