Pop-Up de Correo Feed estilo Wordprees

Vamos a instalar un widget, esto que es en realidad un plugin para Wordpress y que tiene tiempo implementado ahora está disponible para blogs de Blogger.
Este widget esta basado en jQuery y cuenta con efecto pop-Up agradable y suave. Donde podemos recibir más suscriptores de correo electrónico con este simple widget y que ademas es muy fácil de instalar en tu blog sin complicaciones.
Cabe mencionar que este diseño es creado por nuestros amigos de Way2Blogging.

Como instalar el widget de suscriptores?

Para poder instalar este widget debemos contar con el plugin de jQuery en la plantilla de su blog. Este paso es necesario, si tu blog ya tiene este plugin instalado no es necesario volver a instalarlo.
 Si tu blog no tiene este plugin, debes instalar el Plugin de jQuery.

Debes añadir la siguiente línea de código antes de </ head> etiqueta.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Instalación del Widget:

• Mediante la adición de código del widget de la plantilla.

Adición a la plantilla:

Para poner este Widget de "Follow" en el blog, entra en la Edición HTML y antes de </head> pega el siguiente código:

<style type="text/css">
/*<![CDATA[*/
#w2bfollowSubscribe {background-color: #464646;width: 220px;color:
 #fff;position: fixed;z-index: 999999;right: 10px;bottom: 0;}
.followOpened {-webkit-border-radius: 2px 0 0;-moz-border-radius:
 2px 0 0;border-radius: 2px 0 0;-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);box-shadow: 0 0 8px rgba
(0, 0, 0, 0.5);}
.w2bfollowButton {background: #464646;color: #CCC !important;font-size:
 13px;line-height: 28px;padding: 0 10px;text-decoration: none;position:
 absolute;top: -28px;right: 0;display: block;-webkit-box-shadow: 0 -1px 5px rgba
(0, 0, 0, 0.2);-moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);box-shadow:
 0 -1px 5px rgba(0, 0, 0, 0.2);-webkit-border-radius: 2px 2px 0 0;
-moz-border-radius: 2px 2px 0 0;border-radius: 2px 2px 0 0;height: 28px;}
.w2bfollowButton span {background:
 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijNxX4t7D0_G5mMXqJE_kgaEzfFIn4imbpefFuBVkqiWpJoHv_HJmER9PPzTjXYCTFTiaYiB3co3dIRgOczlvz-fE6qc1ApXd87jcIJfvD1A4VJL8x1MdR9O8Ob5PAb9l-jGljZlGb2Xkb/
s1600/follow-w2b.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}
.w2bfollowButton:hover,.followActive {color: #fff !important;}
.w2bfollowButton:hover span,.followActive span {background-position:
 0 -37px !important;}
.followactive {background-color: #333;}
.w2bfollowForm {padding: 15px;}
.w2bfollowForm h3 {font-size: 18px;margin: 0 0 10px;font-weight: normal;}
.w2bfollowForm p {margin: 0 0 10px;}
.w2bfollowForm .emailInput {width: 95%;padding: 2px 4px;margin:
 0 auto;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius:
 3px;font-size: 15px;border: 1px solid #444;color: #888;display: block;clear:
 both;}
.w2bfollowForm form {text-align: center;}
.w2bfollowForm .emailInput:focus {color: #000;border-color: #000;}
.w2bfollowForm .emailSubmit {cursor:pointer;padding: 2px 20px;background:
 #333;background: -webkit-linear-gradient(top, #333 0%, #111 100%);background:
 -moz-linear-gradient(top, #333 0%, #111 100%);background: -o-linear-gradient
(top, #333 0%, #111 100%);background: -ms-linear-gradient(top, #333 0%,
 #111 100%);background: linear-gradient(top, #333 0%, #111 100%);color:
 #ccc;text-shadow: 0 1px 0 #000;border: 1px solid #282828;-webkit-border-radius:
 11px;-moz-border-radius: 11px;border-radius: 11px;-webkit-box-shadow:
 inset 0 1px 0 #444;-moz-box-shadow: inset 0 1px 0 #444;box-shadow:
 inset 0 1px 0 #444;text-decoration: none;-webkit-transition: all 0.25s
 ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 
0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all
 0.25s ease-in-out;margin: 1em 0 1em 0;}
.emailSubmit:hover {background: #222;background: -webkit-linear-gradient
(top, #333 0%, #222 100%);background: -moz-linear-gradient(top, #333 0%, 
#222 100%);background: -o-linear-gradient(top, #333 0%, #222 100%);background:
 -ms-linear-gradient(top, #333 0%, #222 100%);background: linear-gradient
(top, #333 0%, #222 100%);color: #fff;-webkit-box-shadow: inset 0 1px 0 #4f4f4f;-moz-box-shadow: inset 0 1px 0 #4f4f4f;box-shadow: inset 0 1px 0 #4f4f4f;text-decoration: none;}
.emailSubmit:active {background: #111;background: -webkit-linear-gradient
(top, #111 0%, #222 100%);background: -moz-linear-gradient(top, #111 0%, 
#222 100%);background: -o-linear-gradient(top, #111 0%, #222 100%);background:
 -ms-linear-gradient(top, #111 0%, #222 100%);background: linear-gradient
(top, #111 0%, #222 100%);color: #aaa;-webkit-box-shadow: inset 0 -1px 0 
#333;-moz-box-shadow: inset 0 -1px 0 #333;box-shadow: inset 0 -1px 0 #333;
text-decoration: none;}
.w2bFollowFooter {text-align: center;font: normal 11px "Helvetica Neue",
 sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid
 #3c3c3c;}
.w2bFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background:
 none;text-decoration: none;}
.w2bFollowFooter a:hover {color: #fff;background: none;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
;(function(w2b){w2b(document).ready(function(){w2b.extend(w2b.easing,
{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});
var followBox=w2b("#w2bfollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});
setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);w2b(".w2bfollowButton")
.click(function(e){if(followBox.hasClass("followOpened")){w2b(this).removeClass("followActive");followBox.removeClass("followOpened")
.stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{w2b(this).addClass("followActive")
;followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);
/*]]>*/
</script>
<div id="w2bfollowSubscribe" style="display:none;">
<div class="w2bfollowForm">
<a class="w2bfollowButton" href="#" title="Follow"><span>Follow</span></a>
<h3>Follow "BloggAyuda"</h3>
<p>Blogg Ayuda directamente en tu bandeja de mensajes!!!
Unete</p>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggayuda', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" class="emailInput" name="email" placeholder="Enter Your Email..."/>
<input type="hidden" value="BloggAyuda" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Subscribe" class="emailSubmit"/>
</form>
<p class="w2bFollowFooter">
<a href="http://feedburner.google.com" target="_blank">Delivered by FeedBurner</a>
</p>
</div>
</div>

Ya que agregamos el codigo anterior solo damos guardar plantilla y listo quedara agregado dentro de nuestro blog.

Solo deben modificar lo que se encuentra de color lo demás debe dejarse como esta.

Posted in: Blogger, Gadget