Azul + Color + Social + + Suscripción Widget
Hola!! Navegando por la web me encontre con este widget de suscripcion que se ve muy elegante para nuestro blog.
Voy a explicar cómo agregar este cuadro de suscripción para blogger con icons.hope sociales.

Mediante el uso de esto, los usuarios pueden suscribirse a su blog. Por lo tanto, ayudará a obtener las nuevas actualizaciones por correo electrónico. Este Widget usa CSS.

Vamos a ponerlo en nuestro blog………
1. Como ya es costumbre vamos a Diseño >> Añadir un gadget >>  HTML / JavaScript.

Después añadir este código:

 

<style>
#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
 .sidebar-subscribe-box-wrapper{background:url(http://2.bp.blogspot.com/-Y3hbgki8hXE/UXZE9IlUi4I/AAAAAAAAAgI/gIGB-L-HKHo/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}
 .sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}
 .sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(http://3.bp.blogspot.com/-DfHJzP9Mlh4/UXZE9ONhVnI/AAAAAAAAAgM/5xtMqb9biR4/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
 .sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}
 .sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}
 .sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
 #footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}
a.social-icons{margin-right: 5px;height:45px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}
</style>
<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
    <br/>
<a class="social-icons" href="https://facebook.com/mi_pag"><img src="http://2.bp.blogspot.com/-0UOzHUdczG4/USDjuyJCndI/AAAAAAAAAY8/5nN8AcBcvHs/s1600/Bloggertrix-facebook.png" /></a><a class="social-icons" href="https://twitter.com/mi_usuario"><img src="http://2.bp.blogspot.com/-H-E4Ll7i2-0/USDjw3bxgVI/AAAAAAAAAZc/a2kMp8rGRVU/s1600/bloggertrix-twitter.png" /></a><a class="social-icons" href="https://plus.google.com/mi_Usuario"><img src="http://3.bp.blogspot.com/--KlnPhT6pRA/USDjvgwOluI/AAAAAAAAAZM/_O8TI0WivQk/s1600/Bloggertrix-Googleplus.png" /></a><a class="social-icons" href="http://www.feedburner.com/mi_feed_id"><img src="http://2.bp.blogspot.com/-kXhnrJzlA_A/USDju5hXjPI/AAAAAAAAAZA/x6NdMR0JFhQ/s1600/Bloggertrix-Rss.png" /></a><p>Subscribe To Our Email Newsletter & Receive Updates Free</p>
<div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=id_Feed" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Tu_id_Feedburner', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="bloggertrix" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address here"/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form>
</div></div></div>
2. Sustituye todo lo que esta en azul por tus datos y listo.
 
– Puedes cambiar donde dice: Enter your email address here por lo que quieras.

25 comentarios

Anonymous · mayo 19, 2013 a las 6:05 pm

Hola me ha encantado, desde ayer estoy que leo todo lo nuevo que traes,siempre estoy pendiente a todos tus artículos,aunque no suelo comentar esta vez he querido hacer la excepción para decirte que eres genial y gracias por esos consejo.

Ayer recién he puesto el gadget para dejar mensaje en mi blog. saludo desde la distancia.

    Miguel Lp · mayo 19, 2013 a las 11:43 pm

    Claro amigo, gracias a ti por tu comentario, me alegra saber que te gusta lo que publico aquí, disfrútalo y sigue visitando el blog…. Saludos!!

Celso Bergantiño · mayo 19, 2013 a las 6:58 pm

Gracias por poner este cuadro, lo estaba buscando en color azul y no lo daba encontrado.

Un abrazo.

    Miguel Lp · mayo 19, 2013 a las 11:44 pm

    Gracias a ti por comentar Celso, disfrútalo..!!!

David Moreno · mayo 20, 2013 a las 1:24 pm

:LOL:

Hayder Juvinao · mayo 23, 2013 a las 4:12 pm

Amigo gran tutorial, tu siempre trayendo novedades a este blog, Saludos

    Miguel Lp · mayo 25, 2013 a las 12:15 am

    jeje…gracias hayder, solo me gusta hacer esto y poder compartirlo y mucho mas en un blog como este…Saludos!!! 😀

Bryan Guerra · mayo 24, 2013 a las 3:23 pm

Muchas gracias, le hice unos cambios y lo puse en mi blog
http://bryan-guerra-69.blogspot.com/p/contacto.html

TrucosAndroid.org · junio 7, 2013 a las 10:00 am

Muy buen blog, estoy encontrando cosillas interesantes, jejeje.

Yo el widget de mi blog lo hice uniendo el codigo de feedburner y el de addthis. 😉

    Hayder Juvinao · junio 7, 2013 a las 4:33 pm

    Amigo visita todas las entradas del blog, que seguro encontraras muchas cosas interesantes.

    Saludos

Conocer Y Saber · julio 3, 2013 a las 9:08 pm

Hola , me podras ayudar en decir Porque no me sale igual ?,

Me sale sin el Fondo y lo de Subscribe Now tambien me sale como sin formatoe , solo me aparece sin el fondo y los detalles, lo unico que me sale bien son los iconos de las redes sociales

Conocer Y Saber · julio 4, 2013 a las 10:35 pm

En Este amigo , cuando uso el codigo ese que dejaste me sale sin formato, entonces ligue estos uno aparte el de suscribirse que lo vi en otra pagina con los botones de las redes sociales pero no me gusta mucho porque no sale parejo y centrado, si entras en mi Blog ves como sale

Gracias ^^

http://conocerysabermundial.blogspot.com/

Conocer Y Saber · julio 4, 2013 a las 10:47 pm

Ya lo acomode gracias !!

mett colombia · julio 16, 2013 a las 4:30 pm

Soy nuevo en esto, podrías ayudarme a saber que poner en «id_feed» «mi_feed_id» y «tu_id_feedburner»?
Gracias!

mett colombia · julio 19, 2013 a las 1:10 pm

Hola! Tenia el widget bien y de un momento a otro los iconos no quedaron horizontalmente sino ordenados verticalmente. Algún consejo de como arreglarlo? Mira, este es mi blog para que veas el problema http://mettcolombia.blogspot.com/ gracias!!

Music Manía · octubre 2, 2014 a las 11:56 pm

como funciona eso de rss se que es para enviar nuestros post pero como lo hago?? solo pongo esta caja y ya?

Israel Alexander Gomez · octubre 12, 2014 a las 3:35 pm

Me puedes decir por favor como hago con
mi_feed_id
id_Feed
Tu_id_Feedburner
He tratado de encontralos pero no se como

Lucas · noviembre 13, 2014 a las 1:57 am

Hola, buenas noches. ¿Se podría acomodar a Mailchimp?

gary reyes · noviembre 30, 2014 a las 8:55 pm

gracias por tu aporte me gusto mucho ahora mismo lo aplicare a mi blog http://saludyusted.blogspot.com/ muchas gracias broo

Responder a Hayder Juvinao 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 *