Como agregar una ventana emergente de suscripcion a tu blog

El siguiente truco hace que cuando un visitante entre a tu blog, salte una ventana popup solicitando la suscripción a tu boletín de noticias a través de feedburner. Cada vez que publiques contenido, tus usuarios recibirán el articulo por correo, ya sea completo o corto, según lo hayas configurado. Para que el truco funcione debes de tener redireccionado tu feed de blogger o WordPress a uno de feedburner.

La imagen anterior es como sera el resultado, creado por el autor original, pero haremos la traducción para que se ajuste perfectamente a nuestros visitantes. Bueno, lo que haremos es agregar el css en tu blog pegando el siguiente código:

<link rel=”stylesheet” href=”http://code.helperblogger.com/colorbox-css-code-helperblogger.css” />
<style>
/*———————————————————————————–*/
/*Email Subscribe Box Popup By Helper Blogger @helperblogger.com
/*———————————————————————————–*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif;
color: #666;
height: 355px;
}

#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration: none;
}

.box-title {
color: #F66303;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border: 1px solid #ddd;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding: 10px;
line-height: 25px;
font-family: arial !important;
}

.box-tagline {
color: #999;
margin: 0;
text-align: center;
}

#subs-container {
padding: 35px 0 30px 0;
position: relative;
}

a:link, a:visited {
border: none;
}

.demo {
display: none;
}
</style>
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js’></script>
<script src=”http://code.helperblogger.com/jquery.colorbox.js”></script>
<script type=”text/javascript”>
jQuery(document).ready(function(){
if (document.cookie.indexOf(‘visited=true’) == -1) {
var fifteenDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = “visited=true;expires=” + expires.toUTCString();
$.colorbox({width:”390px”, inline:true, href:”#subscribe”});
}
});
</script>
<!– This contains the hidden content for inline calls –>

<div style=’display:none’>
<div id=’subscribe’ style=’padding:10px; background:#fff;’>
<style> .home-featured-right {
background: url(http://demo.studiopress.com/balance/wp-content/themes/balance/images/dashes-bg.png) #d05353;
border: 5px solid #fff;
font-size: 16px;
margin: 0px;
width: 320px;
font-family: calibri;
}

.home-featured-right,
.home-featured-right p,
.home-featured-right h4.widgettitle {
color: #fff;
text-shadow: #a64242 -1px -1px;
text-align: center;
}

.home-featured-right p {
font-size: 16px;
margin-bottom: 20px;
}

.home-featured-right .widget {
margin: 35px;
}

.home-featured-right h4.widgettitle {
font-size: 26px;
margin-bottom: 20px;
}

.home-featured-right input[type=text] {
-moz-box-shadow: inset 0 1px 2px 1px #eee;
-webkit-box-shadow: inset 0 1px 2px 1px #eee;
background: #fff url(http://demo.studiopress.com/balance/wp-content/themes/balance/images/email-icon.png) no-repeat 16px 15px;
border-bottom: none;
border-left: 1px solid #963c3c;
border-right: none;
border-top: 1px solid #963c3c;
box-shadow: inset 0 1px 1px 1px #eee;
color: #000;
font-family: Verdana, Arial, Tahoma, sans-serif;
font-size: 12px;
padding: 14px 15px 14px 45px;
width: 180px;
}

#home-featured .home-featured-right input[type=submit] {
background: url(http://demo.studiopress.com/balance/wp-content/themes/balance/images/email-button.png) no-repeat !important;
border: none;
font-size: 0;
height: 28px;
margin: 0 0 0 15px;
line-height: 0;
text-indent: -9999px;
width: 26px;
}

#email-news-subscribe .email-box {
padding: 5px 10px;
font-family: “Arial”,”Helvetica”,sans-serif;
border-top: 0;
border-image: initial;
height: 35px;
margin-left: -20;
}

#email-news-subscribe .email-box input.email {
background: #FFFFFF;
border: 1px solid #dedede;
color: #999;
padding: 7px 10px 8px 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border-image: initial;
font-family: “Arial”,”Helvetica”,sans-serif;
}

#email-news-subscribe .email-box input.email:focus {
color: #333
}

#email-news-subscribe .email-box input.subscribe {
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
-pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
font-family: “Arial”,”Helvetica”,sans-serif;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 1px solid #cc7c00;
color: white;
text-shadow: #d08d00 1px 1px 0;
padding: 7px 14px;
margin-left: 3px;
font-weight: bold;
font-size: 12px;
cursor: pointer;
border-image: initial;
}

#email-news-subscribe .email-box input.subscribe:hover {
background: #ff9b00;
background-image: -moz-linear-gradient(top,#ffda4d,#ff9b00);
background-image: -webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
outline: 0;
-moz-box-shadow: 0 0 3px #999;
-webkit-box-shadow: 0 0 3px #999;
box-shadow: 0 0 3px #999
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
background: -moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
-pie-background: linear-gradient(270deg,#ffda4d,#ff9b00);
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 1px solid #cc7c00;
color: #FFFFFF;
text-shadow: #d08d00 1px 1px 0
}
</style>

Guardamos los cambios y vamos a agregar un gadget HTML y pegamos esto:

<div class=”home-featured-right”>
<div id=”enews-2″ class=”widget enews-widget”>
<div class=”widget-wrap”>
<div class=”enews”>
<h4 class=”widgettitle”>Suscribete gratis a mi boletin!</h4>
<p>Recibe gratis en tu correo todos mis articulos</p>
<p>No hacemos spam y protegemos tu privacidad</p>
<div id=”email-news-subscribe”>
<!– Email Subscribe –>
<div class=”email-box”>
<form action=”http://feedburner.google.com/fb/a/mailverify” method=”post”
target=”popupwindow” onsubmit=”window.openundefined’http://feedburner.google.com/fb/a/mailverify?uri=idfeedburner‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520′);return true”>
<input class=”email” type=”text” style=”width: 150px; font-size: 12px;”
id=”email” name=”email” value=”Tu email..” onfocus=”if(this.value==this.defaultValue)this.value=&#39;&#39;;”
onblur=”if(this.value==&#39;&#39;)this.value=this.defaultValue;” />
<input type=”hidden” value=idfeedburner” name=”uri” />
<input type=”hidden” name=”loc” value=”es_ES” />
<input class=”subscribe” name=”commit” type=”submit” value=”Suscribete!”
/>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!– end .home-featured-right –>
<div style=”background: #fff;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: “arial”,”helvetica”,sans-serif;”> <!– Don’t remove the credit links,If you removed credits then your gagdet will not work –><span class=”author-credit” style=”font-family: Arial, Helvetica, sans-serif;”><a href=”http://goo.gl/9fXrd” target=”_blank” >Blogger Widgets »</a></span></div></div>
</div>
</div>
</div>

Recuerda que debes de cambiar el valor del texto en rojo el cual es la ID de tu feed en feedbuner para tu blog.

Fuente

Busquedas relacionadas:

• videos en una ventana emergente wordpress
• GALERIA DE VIDEOS BLOGGER
• ventanas flotantes jquery
• ventana emergente en blogger
• js ventana flotante
• ventana pop up jquery
• ventana popup con jquery
• ventanas popup div con css ajax
• ventana popup jquery ajax
• ventanas emergente sin borde jquery