Caja social de suscripcion para Blogger

Para incrementar el trafico de tu blog, siempre es positivo que se suscriban lectores. Y lo mejor es tener a la vista del usuario lo mas practico para que esto suceda. Por eso te traigo un diseño que incluye 3 iconos sociales con enlaces al feed, a Twitter y a Facebook, y el formulario para la suscripcion por correo. Todo con un estilo minimalista y elegante en gris, con un efecto 'hover' suave.

Para añadirlo en la sidebar de nuestro blog, vamos a Diseño, Añadimos un Gadget HTML/Javascript y pegamos el siguiente codigo. Modificamos lo que esta en rojo, poniendo la url de nuestro feed, la del Twitter, la del Facebook y el nombre de nuestro Feedburner.

<center><table style="border: 1px solid #dcdcdc; width: px;"><tbody>
<tr> <td><br/>
<div class="mbt" style="padding: 0pt 0pt 0pt 20px;">

<table><tbody>

<tr>  <td>

<a href="URL FEED" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQuTnhu9RD8rBo5jIua8U0nA2JVYlocFRo0AIEjSKItulr31QWHzGQe5cgfRklYXGC-LVl26UDmSJm_4_xFHXD8Gg0E_2yYOfWNDIjrXaH94PO9aVUjydko_gGIKP0zAQkjLyh1FsCPF4/s1600/rss.png" /></a></td>  <td>

<a href="URL TWITTER" rel="nofollow" style="margin-left: 12px;" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivfWmq7bF6Yi-ZWz3QLZcmzzikI3dIS5TCTwTJ4ymyg3ra8qnufF1yKBKwBgwfQgI8ZOW2avFUUnL70e43Ew5s0KNif2iIpcyxlqwWlR6eBZBJ5_boO0ucdnmnJhFouszihyphenhyphenDlwj_kau4/s1600/twitter.png" /></a></td>  <td>

<a href="URL FACEBOOK" rel="nofollow" style="margin-left: 12px;" target="_blank"><img border="0" class="sinborde" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV9W9aE84hhDGV0WaPXNBKag6YKtcMdRzJ9CS7CkSheX1bxmYHzJQbooF68nyNJnKsjZHkztSjsyzjTCD2bka-45yg38BCCWfkYY6diO2RMrCzt3zBIPSgh7lHSQqHkEDqeZHGRUuGpYU/s1600/facebook.png" /></a></td>  </tr>

</tbody></table>

<div class="mbtbar">

<div class="emailsub">

<div class="emailupdatesform">

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=NOMBRE FEEDBURNER', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">

<input class="emailupdatesinput" gtbfieldid="10" name="email" onblur="if (this.value == '') {this.value = 'Submit email...';}" onfocus="if (this.value == 'Submit email...') {this.value = '';}" type="text" value="tu email aqui..." /><input name="uri" type="hidden" value="NOMBRE FEEDBURNER" /><input class="joinemailupdates" type="submit" value="Suscribirse" /></form></div></div></div></div>

<style type="text/css">
.mbt a{
    color: #6e6e6e;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 7px 12px;
    position: relative;
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    border: solid 1px #dcdcdc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}
.mbt a:hover {
    color: #333;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.mbt a:active {
    color: #000;
    border-color: #444;
}


.mbtbar{ width:280px; float: left; margin-left:3px; margin-top:5px; padding:0;}

.mbtbar .emailsub{border-bottom: 0px solid #e6e6e6; padding: 0px 0 15px 0; float: left; width: 100%; font-family: Helvetica, Arial;}

.mbtbar .emailsub .emailupdatesform{width: 100%; float: right; padding:0px;}

.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3;  float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 12px;  width: 130px; height:30px;   border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;}

.mbtbar .emailsub .emailupdatesform input.emailupdatesinput:hover{

border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}



.mbtbar .emailsub .emailupdatesform input.joinemailupdates:hover{ border-color: #666;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); cursor:pointer;
}

.mbtbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
    background: #F3F3F3;
   font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 10px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
  border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}



.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3;  float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px;  width: 145px; height:28px;   border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;}

.mbtbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
    background: #F3F3F3;
   font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 0px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
  border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}
</style>

</tbody></table>
</center>