Widget con Suscripción y Botones Sociales para Blogger

 

De nuevo vuelvo con un gadget para tu blog, esta vez te mostraré un widget parecido a uno anterior, pero diferente en varios aspectos, ya que este viene con un cuadro para la suscripcion por electronico, y solo con los botones de Facebook, Twitter, Google+ y RSS. (el anterior widget tiene mas botones)  

Los botones de las redes sociales tienen un color verde, así como la suscripción por correo electrónico  Este Gadget es perfecto para usarlo en la Sidebar (barra derecha del blog). Es muy elegante y podría decir que en poco espacio albergas casi la mayoría y mas relevantes tipos de suscripciones a tu blog.

Agregar Widget a Blogger

Para agregar este artilugio al blog, ve a Blogger.com - Diseño - Añadir un gadget - HTML/Javascript y pega allí el siguiente código:

<style type="text/css">
/* Terrenoblogger.co - botones sociales */
#TB-caja-suscripcion {width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
.TB-caja-suscripcion-wrapper{background:url(https://ia800900.us.archive.org/24/items/TerrenobloggerFacebook/BackgroundBotonesSociales.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:16px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:capitalize}
.TB-caja-suscripcionform{clear:both;display:block;margin:10px 0}form.TB-caja-suscripcion-form{clear:both;display:block;margin:10px 0 0;width:auto}
.TB-caja-suscripcion-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihzfdjdfnDM3PVjC9iJqI2DFOMEKzK0diqn90EQNbOlAVEcLFite8kgEdXQdUd_gUUXaTWu6oUjeh2nCMlAE0jFvTCZmSznjGtakSjIksID8dFBc651XuNkbGJdWHj6D9ktABvgUMSokU/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%}
.TB-caja-suscripcion-email-button{background:#00B047;border:1px solid #01B831;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:capitalize;width:100%}
.TB-caja-suscripcion-email-button:hover,.TB-caja-suscripcion-email-button:focus{background:#20B95D}
.TB-caja-suscripcion-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}
a.social-icons{margin-right: 5px;height:45px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}</style>

<div id="TB-caja-suscripcion">
<div class="TB-caja-suscripcion-wrapper">
<br />
<a class="social-icons" href="https://facebook.com/USUARIO-FACEBOOK" target="_blank" title="Síguenos en Facebook">
<img src="https://ia600900.us.archive.org/24/items/TerrenobloggerFacebook/terrenoblogger-facebook.png" /></a> 
<a class="social-icons" href="https://twitter.com/USUARIOTWITTER"><img src="https://ia600900.us.archive.org/24/items/TerrenobloggerFacebook/terrenoblogger-twitter.png" /></a>
<a class="social-icons" href="https://plus.google.com/ID-GOOGLE+" target="_blank" title="Síguenos en Google+"><img src="https://ia600900.us.archive.org/24/items/TerrenobloggerFacebook/terrenoblogger-google%2b.png" /></a> 
<a class="social-icons" href="http://feeds.feedburner.com/USUARIO-FEEDBURNER" target="_blank" title="Suscríbete a nuestro Feed"><img src="https://ia600900.us.archive.org/24/items/TerrenobloggerFacebook/terrenoblogger-rss.png" /></a>
<p>Suscríbete para recibir nuestras actualizaciones</p>
<div class="TB-caja-suscripcion-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=USUARIO-FEEDBURNER" class="TB-caja-suscripcion-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="USUARIO-FEEDBURNER" /> <input name="loc" type="hidden" value="en_US" /><input autocomplete="off" class="TB-caja-suscripcion-email-field" name="email" placeholder="Escribe tu Email Aquí" /> <input class="TB-caja-suscripcion-email-button" title="" type="submit" value="Suscribirme!" />&nbsp;</form></div></div></div>

Ahora cambia lo que esta resaltado en verde por cada uno de tus usuarios en las redes sociales y feedburner.

Será sencillo poner este Gadget en tu blog y se vera muy bien allí  Sin embargo, si surge algún inconveniente, coméntalo y te ayudare.