Mil Trucos Blogger

Gadget de Suscripción por email sencillo y atractivo

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

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

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

14 Comentarios

  1. enero 18, 2015    

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

  2. enero 19, 2015    

    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.

    • enero 19, 2015    

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

      Saludos

      • enero 20, 2015    

        Listo 😀 que bueno. Gracias.. :-d

      • enero 20, 2015    

        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 ^^

        • enero 21, 2015    

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

          Saludos

  3. enero 19, 2015    

    Pero y el CSS?

    • enero 19, 2015    

      Listo amigo ya lo he colocado, se me había olvidado :ng

  4. febrero 10, 2015    

    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.

  5. noviembre 9, 2016    

    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!!

Deja un comentario

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

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo