Bienvenido a bloggertrucos.com un espacio para el blogger moderno donde buscar soluciones a nuestros problemas de cada día.

33

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.

suscripcion 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(https://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(https://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(https://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

 

Show Comments

One Response

  1. LUIS Oct 30, 2015

Leave a Reply