Widget de Suscripcion De Rss Color Verde Para Blog Blogger

En este tutorial te explicare como añadir un Widget estilizado de Feed de Suscripcion a tu blog de blogger. Usando este widget puedes enlazar nuestro perfil personal social con Facebook, Twitter Rss Google Pinteret plus.Este ayuda actualizar tus seguidores de los articulos por emails.Este esta hecho con Css y los colores rojos y verde.

Ver el ejemplo en: tricksblogspot.blogspot.com

Para integrarlo a tu blog sigue estos simples pasos.
1.Entra en tu cuenta de Blogger

2.Ahora selecciona "Diseño".

3. Da Click Añadir un Gadget y selecciona 'HTML/Javascript

4. Pegue el codigo de abajo. (puedes añadir cualquier nombre al widget )

<style>
#stb-newsletter{ width:290px;background:#65F228; color:#000; padding:20px; font-size:14px;  margin-bottom:20px;  -moz-box-shadow: 2px 2px 2px #000000;-webkit-box-shadow: 5px 5px 5px #000000;box-shadow: 5px 5px 5px  #14043C;border:double 5px #ED0E1A;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}

#stb-newsletter .stb-title {  margin-bottom:10px;margin-top:-10px; }
.stb-title{margin-left: 8px;font-size:25px; font-weight:bold; border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;padding:1px 8px 2px 8px;text-align:center;border:1px solid #151819;color:#fff;background:#F91008;display:inline-block;}

#footer-subscribe-btn {width:116px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;
position:relative;left:135px;}
.footer-submit-btn {margin-left:50px;margin-top:-5px;margin-bottom:-50px;border: none;color: #fff;text-transform: uppercase; font-size: 13px;padding: 5px 18px 5px;background: #e93a30;border-radius: 30px;-webkit-border-radius: 30px; 
-moz-border-radius: 30px;font-weight: bold;-webkit-transition: background .2s linear;
-moz-transition: background .2s linear;-ms-transition: background .2s linear;-o-transition: background .2s linear;transition: background .2s linear;cursor: pointer;
}
.footer-submit-btn:hover { background:#e51111;}

#fastsearch ,#footer-subscribe-email{background:#ED0E1A;color:#fff;font-size:14px;border:none;
box-sizing:border-box;border-radius:30px;-webkit-border-radius:30px;-moz-border-radius:30px;outline:none;padding:0px 15px; height:30px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
#fastsearch.inactive ,
#footer-subscribe-email.inactive {color:#b5b7b8;}
#footer-subscribe-email {width:100%;}
#sb-nl-members-count {  font-size:12px; font-weight:bold;text-align:center;width:150px;margin:0 0 -36px 0 ;display:inline-block;
</style><br />
<div id="stb-newsletter">
<div class="stb-title">
Actualizacion en Email</div>
<div class="stb-nl-text">
<center>
Suscribete para recibir actualizaciones gratis</center>
</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=SuperTrucosDeBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="inactive footer-text-field" id="footer-subscribe-email" name="EMAIL" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Tu Direccion de Email" />
<input name="uri" type="hidden" value="SuperTrucosDeBlogger" />
<input name="loc" type="hidden" value="en_US" />
<br />
<div id="sb-nl-members-count">
<table border="0">
<tbody>
<tr>
<td style="padding-right: 4px;"><a href="http://twitter.com/andante772" target="_blank" title="Follow Me On Twitter">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4-fpcDLkkhOpi6j-5NgXhVFdU_-653_VBAdPgDm-kUSCBYftAym0WjVgP2NZr7Srh1xSz-ZllDqPD8rVGGEFD1K5wdQWrcPG1EuOa3sca95XfkWYtKQS-mOtwcQRr8v-uIOFcJXOLvzM/s1600/bloggertrix.com-twitter-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="http://feeds.feedburner.com/SuperTrucosDeBlogger" target="_blank" title="Subscribe Via RSS">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyxIFNwISdKILRj1QEjs3SZGDdAyKBRw7sIBYvhjb0wNbijHxYutF24A5Yw5W7sw51qw5Hc7VW8OOZU0INiOBnP-K0xWpKRzR2c9MO173V-cxbxGmHc7NlNfuVGZHYtNLu9j86XxNOi7I/s1600/bloggertrix.com-rss-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="http://www.facebook.com/trucosdeblogger" target="_blank" title="Find Us On Facebook">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiArFccgjH78u3mZC0ruYQMD5Ok882c3IoB6o6tzRReLtk_BBaGfvw1K6oRsGaFF1kZPu_YKsxckVi1qRwmcduyHrjcj0JqeLScwFKIDcTDBASsWD8X6CKim9IUA5Jla2eSdoGC4gQGizg/s1600/bloggertrix.com-facebook-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="https://plus.google.com/116180896434879626623" target="_blank" title="Add me on Google+">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF9Z9YjiiZK5hQLvZRgHioWCG2ghj0d7eE2cFzjz5eqSQUUUUl6DgVRI43wXjC3_6B_fQoRPtYqZHYq6hD4cTJs9nlRGcgJV_7IgkAQo3S-9R1V2G2ikYaqqXuHo3ziUD0SgTt7K_1htM/s1600/bloggertrix.com-google-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="http://youtube.com/id de usuario" target="_blank" title="youtubr subscribe">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPthaIq4pCk4ny3HDrCx3KslgNQ2gS8fdRVpf7NOzlnVzJaJlKzMhIjYnUiDTv0Q0LxTaK3PcF7IcmB8QnB8zspVs9n508OkyMz0rI4egsDXa0cikmzLICWiwBqlUHZxq9ZS0fGELEsXU/s1600/bloggertrix.com-youtube-icon.png" style="height: 25px; width: 25px;" /></a>
</td></tr>
</tbody></table>
</div>
<input class="footer-submit-btn" id="footer-subscribe-btn" type="submit" value="Subscribete" />

<div class="clr">
</div>
</form>
</div>

Reemplace SuperTrucos de blogger con el ID de Feedburner
Reemplace trucos de blogger con el nombre de usuario de Facebook
Reemplace andante772 con tu nombre de usuario de Twitter
Reemplace 116180896434879626623 con el id de usuario de Google plus
Reeemplaza SuperTrucosDeBlogger con tu nombre de Feedburner sino tienes feedburner de tu blog puedes crearlo en www.feedburner.com despues de crear tu feedburner deben de activarlo para usar la suscripcion por email.

5. Luego Guarda tu HTML/Javascript'.

Todo esta listo para usar.

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati