PopUp de suscripción para Blogger con jQuery

Por Anónimo el domingo, mayo 01, 2011

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).

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('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/USUARIO-FEEDBURNER', 'popupwindow', 'scrollbars=yes,width=550,height=520');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:

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

//This code will disable popup when click on x!
function disablePopup(){
    //disables popup only if it is enabled
    if(popupStatus==1){
        $("#backgroundPopup").fadeOut("slow");
        $("#popupContact").fadeOut("slow");
        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 = $("#popupContact").height();
    var popupWidth = $("#popupContact").width();
    //centering
    $("#popupContact").css({
        "position": "absolute",
        "top": windowHeight/2-popupHeight/2,
        "left": windowWidth/2-popupWidth/2
    });
    //only need force for IE6
    $("#backgroundPopup").css({
        "height": windowHeight
    });

}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
    if ($.cookie("anewsletter") != 1) {
        //centering with css
        centerPopup();
        //load popup
        loadPopup();
    }
    //CLOSING POPUP
    //Click the x event!
    $("#popupContactClose").click(function(){
        disablePopup();
        $.cookie("anewsletter", "1", { expires: 7 });
    });
    //Click out event!
    $("#backgroundPopup").click(function(){
        disablePopup();
        $.cookie("anewsletter", "1", { expires: 7 });
    });
    //Press Escape event!
    $(document).keypress(function(e){
        if(e.keyCode==27 && popupStatus==1){
            disablePopup();
            $.cookie("anewsletter", "1", { expires: 7 });
        }
    });
});
</script>

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).

Actualización (22 Mayo 2011):

Para poder utilizar el script de forma permanente, es decir que no se ejecuten la función de guardado de las cookies, elimina la siguiente línea (Se repite 3 veces):

$.cookie("anewsletter", "1", { expires: 7 });

Consideración:

Si la cookie ya ha sido guardada (Es decir si ya utilizamos el script y además presionamos en cerrar), deberás vaciarlas, o de lo contrario no se mostrará porque la instrucción de no mostrar el Popup ya está establecida.

Ir a la página principal Subir A favoritos