Tutoriales Sobre Blogger: Caja de suscripción para blogger

En este tutorial veremos como agregar una caja de suscripción para tu barra lateral o gadget. Esta caja de Suscripcion tendra Facebook, Twitter, Google +, Feedburner Email. y un lindo recuadro animado de feed.


Ante de comenzar veremos una demostración:
(La demostracion la encontraras en nuestro blog) 

Comencemos:

• Paso 1: Vamos a Blogger>>Diceño>>Añadir nuevo gadget>> HTML/Javscript
• Paso 2: Dentro del gadget agregaremos el siguiente código HTML

<style>
.bssubsboxfull{
width:255px;margin-left:5px;background:#f7f7f7;
padding-top:10px;
padding-right:10px;
padding-bottom:15px;
padding-left:10px;
color:#333;
height:110px;
border:1px solid#ddd;
margin-bottom:0px;
}
.bsrss-boxicon{padding-left:10px;margin-right:1em;font-size:13px;font-weight:bold;}
.bsrss-boxicon a:hover{color:#555btext-decoration:none}
.bsemail-boxicon{padding-left:0px;font-size:13px;font-weight: bold;}
.bsemail-boxicon a:hover{color:#555; text-decoration:none}
.bstopbaricons{float:right;width:246px;margin:0 0 0px 0;padding-left:3px;margin-top:2px;margin-right:4px}
.bstopbaricons ul{margin:0;padding:0}
.bstopbaricons li{float:left;list-style:none;margin:0 10px 0 0;padding:0}
li.last{float:right;margin:5px 0 0 0;padding:0}
.bstopbaricons li:hover{opacity:0.8;filter:alpha(opacity='80');}
.bsfeedmail{float:left;margin:0 0 0px 0;padding-left:160px;margin-top:-140px}
<!--http://www.tutoriales-blogger.info/-->
</style>
<div style='margin-top:10px; margin-left:-2px;'>
<div class='bssubsboxfull'>
<div class='bstopbaricons'>
<ul>
<li>
<a href='https://www.facebook.com/TutorialesBlogger' rel='nofollow' target='_blank'><img height='25' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRNtUdnEzj0SjQ9o1t2CRxOurxIOVWbnLS3zgBTV9-FTI1rl9MxZy9g9voSujGn5UQikx77KwzwZR50SvbQm3EQFUyA8FgkbwO9FNUHel3Ny7rwIxKFjTaWorabH_xt8xUbrVnv-fzTDV1/s320/BS+facebook.png' title='Facebook' width='25'/></a></li>
<li><a href='https://twitter.com/TutorialesBlogg' rel='nofollow' target='_blank'><img height='25' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWz4FaUnhn1ufn3YZ3_bZorTDB9vfGoiRHtW7A9QA-QJMDp2HoZUD9-xQovvdgrSzhBNYh17tLrJHtE9THBR2Tv6kSARaJiqGfiZW-DsGNnDTDcqvkWFofrrKfDgP3hkOfyEpeZt5rczw3/s320/BS+twitter.png' title='Twitter' width='25'/></a></li>
<li><a href='https://plus.google.com/u/0/102309934171768207604' rel='nofollow' target='_blank'><img height='25' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrvPiBuYvBxbeXPbZS8VYF4jEeTcjuhpN0zEi364heO9h3kuThKIAv41vT1kU0jsyFb-r5b2VNNA1H8hYRC6qTBlEzBOdG2cLBPF00yssjPlYA0e7zUPOcmeBWKqJ4mh6BZl8ZHLl4W6qg/s320/BS+googleplus.png' title='Google Plus' width='25'/></a></li>
<li><a href='http://feeds.feedburner.com/tuto/blogger' rel='nofollow' target='_blank'><img height='25' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiapEVpvNSxVRLvwYMsWblCS4g5smfk09_8dTk1eibY6lv7H-fHUEaoTnGn2soSDNzCKaY52uQ9SLNFopghqmC5hn9oz0pUc-U8ecKqYNyN6tAbcipcl6YYu6wkRolEsPX6RENUlClxYMc-/s320/BS+rss.png' title='RSS Feed' width='25'/></a></li>
<li><a href='http://feedburner.google.com/fb/a/mailverify?uri=/tuto/blogger' rel='nofollow' target='_blank'><img height='25' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7I_wgrYuNiP4FfGvkt1rfLOM3G9sl7-nDL8CRaPp8c_qmD07LCMw0QBwCmRTc6YAIVzvXkNRBEM1Pv9QNL1mFLoeYIWoh4xg-he5P0Nz9x7bviJynNwnOF1f911nF539ZE0u6uQN8OMrG/s320/BS+Email+Contact.png' title='Mail' width='25'/></a></li>
</ul>
</div>
<div style='padding-top:10px;'>
</div>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=tuto/blogger' method='post' onsubmit='window.open(\'http://feedburner.google.com/fb/a/mailverify?uri=/tuto/blogger', \'popupwindow\', \'scrollbars=yes,width=550,height=520\');return true' target='popupwindow'><p><input name="email" style="width:222px; border: 1px solid #e5e5e5;margin-left:6px; padding: 6px; font-size:13px; color: #333; font-weight: bold;" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Ingresa tu Email&quot;;}" onfocus="if (this.value == &quot;Ingresa tu Email&quot;) {this.value = &quot;&quot;;}" type="text" value="Ingresa tu Email" /></p><input name="uri" type="hidden" value="/tuto/blogger" /><input name="loc" type="hidden" value="en_US" /></form>
<div style='padding-top:10px;'></div>
<a class='bsrss-boxicon' href='http://feeds.feedburner.com/tuto/blogger' rel='nofollow' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQNaSMUle_mOj1Y7UFXHJZshhLH_VYPbsVHto955EvOg1ojh8YrqCCh0w6-Jn_fy6vTcrrtmv8acjNxD3xYFd6ZXDDQRP2ZcxQ4we7rEp0FKQoxo6XmZlFseqMuQUW_Eka07AALuQylgIv/s320/BS+feed.png"/> Feed</a>
<a class='bsemail-boxicon' href='http://feedburner.google.com/fb/a/mailverify?uri=tuto/blogger' rel='nofollow' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiguglswJHQ_1Xp1zuNKUChT_s8glFxtEaztqQDIgqKAjnJIXHKBIk_Pp2m_WyqaK4RrRAOiUD_o3veArgIzbme0d0WtTD4PZ0w2gBrD8sMIMWRWATmjc6bhEeEC0OFijfSHgJb7rgikpV2/s320/BS+email.png"/>Email</a>
<div style="float:right;margin-right:5px;">
<a href="http://feeds.feedburner.com/tuto/blogger"><img src="http://feeds.feedburner.com/~fc/tuto/blogger?bg=000000&amp;fg=ffffff&amp;anim=1&amp;label=listeners" height="26" width="88" style="border:0" alt="" /></a>
</div>
</div></div>

Nota:- Solo debes de cambiar ROJO por las de tu ID