Gadget de Suscripción por email sencillo y atractivo

El gadget de suscripción de Blogger es muy útil, sin embargo su aspecto es bastante simple y no llama la atención del usuario, es por ello que hoy les presento un espectacular gadget de suscripción que aunque es algo sencillo llega a ser atractivo, pues está justo en la linea de no ser tan simple ni tan complejo es justo lo que se necesita en este tipo de gadgets.

El gadget es el siguiente:

Para agregar este gadget en tu blog, sólo debes ir a Diseño, Añadir gadget, HTML/Javascript y pegas allí lo siguiente:

<style type='text/css'>
/* CSS Subscribe Box */
#subscribe-box {width:auto;max-width:300px;height:auto;background-color:#222;}
#subscribe-box p {font-family:&#39;Droid Sans&#39;;font-size:13px;color:#ccc;line-height:20px;padding:10px 20px 0 20px;margin:0;}
#subscribe-box .emailfield {padding:0px 20px 10px;}
#subscribe-box .emailfield input {background:#fafafa;color:#999;padding:10px;margin-top:10px;font-size:13px;font-family:&#39;Droid Sans&#39;;width:91%;border:0;border:none;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield input:focus {background:lightyellow;outline:none;border:none;color:#444;}
#subscribe-box .emailfield .submitbutton {background:#f56954;color:#fff!important;text-transform:uppercase;font-weight:bold;border:none;outline:none;width:99%;cursor:pointer;transition:all 0.4s ease-out;}
#subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#444;color:#fff;}
#subscribe-box .emailfield .submitbutton:hover{background:#dc5e4b;color:#fff;}
#HTML98 h2 {border-bottom:4px solid #eee;}
#HTML98 h2 span {border-bottom:none;margin-bottom:0;}
</style>
<div id='subscribe-box'>
                 <p>Suscripción por correo.</p>
             <div class='emailfield'>
              <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=AFusion&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
               <input type='text' name='name' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Introduce tu nombre&quot;;}' onfocus='if (this.value == &quot;Introduce tu nombre&quot;) {this.value = &quot;&quot;;}' value='Introduce tu nombre'/>
               <input type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Introduce tu  correo&quot;;}' onfocus='if (this.value == &quot;
Introduce tu  correo&quot;) {this.value = &quot;&quot;;}' value='Introduce tu correo'/><input name='uri' type='hidden' value='Nombre de Tu Blog'/>
<input name='loc' type='hidden' value='es_ES'/>
                <input class='submitbutton' type='submit' value='Subscribete  Ahora!'/>
              </form>
             </div>
</div>

Ahora debes cambiar Nombre de Tu Blog, por el nombre de tu blog -todo junto sin espacios-.

Guarda los cambios y disfruta de este genial gadget.

Puedes ver el gadget funcionando a continuación:

Espero que te haya gustado este genial gadget y no olvides compartir este articulo en tus redes sociales.

Vía/Arlina