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.

Gadget de Suscripción por email sencillo y atractivo

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:

Suscripción por correo.

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

Vía/Arlina

Categorías: Trucos Blogger

14 comentarios

Jonathan Lozano · enero 18, 2015 a las 8:41 pm

Al parecer alguien olvidó colocar los estilos CSS de este gadget…

JJ Leo Jaimes · enero 19, 2015 a las 3:12 am

bueno esta muy lindo. pero cuando le colocas el click para colocar el nombre o correo. no se borra lo que dice. deberia quedar en blanco. y asi poder colocar el nombre.

    Hayder Juvinao · enero 19, 2015 a las 4:12 pm

    Amigo ya se ha agregado el CSS, así que ya se arregló el problema de los estilos 😉

    Saludos

      JJ Leo Jaimes · enero 20, 2015 a las 11:27 pm

      Listo 😀 que bueno. Gracias.. :-d

      JJ Leo Jaimes · enero 20, 2015 a las 11:33 pm

      Hayder Disculpa molestar tanto. pero ahora cuando colocar el click en el correo sigue el correo ahi. no se quita. yo no se mucho de codigos ^^

        Hayder Juvinao · enero 21, 2015 a las 4:17 pm

        Compañero este es un pequeño error del HTML, aunque mientras lo soluciono puedes quitar manualmente el correo :-d

        Saludos

Nicholas R. · enero 19, 2015 a las 3:32 am

Pero y el CSS?

Ivan · febrero 10, 2015 a las 11:12 pm

Alguien sabe como crear un area de miembros con blogger. Que para entrar a la pagina debe poner username y password. Me dejan saber lo antes posible si tienen informacion.

jose antoinio · noviembre 9, 2016 a las 11:38 am

Hola buenas,he colocado el gadgets de suscripción y leído los comentarios,lo que no me ha quedado muy claro es si lo del nombre y el correo se quedan fijos o se pueden quitar para que no aparezcan.Manualmente los quitos pero cuando pincho en otro lado vuelven a aparecer.Muy chulo el gadgets y gracias por compartir todas estas cosas que hacen que nuestros blogs sean mas chulos jeje Saludos!!

Responder a Ivan Cancelar la respuesta

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *