Tutoriales Sobre Blogger: Añadir Caja de Autor estilo WordPress para Blogger

En este tutorial veremos como agregar Caja de Autor debajo de Cada entrada con un estilo WordPress modificado para Blogger. Esta caja de Autor tendrá una Avatar
del Autor, una mini-biografía, una caja de Suscripción, y iconos de tus redes Sociales

Antes de Comenzar veremos una Demostración: 

Demostración

Comencemos:

• Paso 1: Vamos a Blogger>>Plantilla>>Edicion HTML>>Expandir Plantilla de Artilugios. 
• Paso 2: Buscamos la siguiente linea (Ctrol +F).

 <div class='post-footer-line post-footer-line-1'>

• Paso 3: Pegue el siguiente código justo por encima de  <div class='post-footer-line post-footer-line-1'> 

<style>#postauthor { background: #eef7f8; border: 1px solid #c6d9ed; padding:10px; margin: 15px 0; width:650px; height:90px; font-family:Georgia, "Times New Roman", Times, serif; }
#author-info{float:left; width:410px; padding:0 15px 0 0; border-right:1px solid #ccc;margin-top: 0px; }
#author-info img {background:#fff; border: 1px solid #ddd; float: left; margin-right:10px;padding: 5px;
box-shadow: 0 0 3px #CCC; padding:3px;}#author-info h6 { color: #666; font-size: 18px; font-family:Georgia, "Times New Roman", Times, serif; font:Georgia, "Times New Roman", Times, serif }
#author-info h5 {color:#666; text-transform:none; font-size:11px; letter-spacing:0; font-family: Georgia;}
#author-info p { color: #515151; font-size: 12px; line-height:16px; font-family: Georgia;}
.social-connect-widget{width:400px;}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px}
.social-connect-widget img:hover{
opacity:0.4;
filter:alpha(opacity=40);
}
#news-letter{margin-left:-35px;clear:both;padding-top:5px;width:300px;margin-top:-5px;}
.msg-box{float:left;width:50px;height:54px;margin-right:9px;padding-top:15px;margin-top:5px;background: url(http://cdn1.iconfinder.com/data/icons/UII_Icons/48x48/email.png) no-repeat;}
* { margin:0; padding:0;}#author-connect{width:21%; float:right; margin-right:8%; }
</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;Author Name&quot;'>
<div id="postauthor" style="margin: 100px 0 0 300px;">
<div id="author-info">
 <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuVFue7EjbPZLgXSTOR9uxHR2sdWheLkBR9encxHne5QPnTpFxgAa0npbWMKIICiJB8AyEHinxEQARVqwYO6Ui0VCSFDgaIdEGhV2tembNHEhL0qxn84aoIQSs9fbefYoDzpGg4l5KBgYc/s1600/gravatar.jpg'  height='80' width='80' /><h6 style="font:Georgia">Articulo escrito por <a expr:href='data:post.authorProfileUrl' rel='author'><data:post.author/></a></h6>
<h5></h5>
<p>Si te gusto este articulo puedo seguirnos en  <strong>
<a href="URL Twitter" target='_blank' rel="nofollow" >Twitter  </a> </strong>. Suscrirbirte por  <strong> <a href="http://feeds.feedburner.com/USERNAME" target='_blank' rel="nofollow" >RSS</a> o  <a href="http://feedburner.google.com/fb/a/mailverify?uri=USERNAME&amp;loc=en_US" rel="nofollow" > EMAIL </a>  </strong>para recibir actualizaciones instantáneamente  </p></div>
 
<div id="author-connect">
 
<div class='social-connect-widget' style='margin-top:10px;margin-bottom:10px;margin-left:-15px;'>
<a href='http://twitter.com/USERNAME' target='_blank'><img alt='Siguenos Twitter!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZgbWqgVRhi3RsEaN_S3h1dwXoM8dgF3RbA0TIHgAnFwsynzTpUDD4K6CMICgYQ8qnpgx-SYyg5XZ72jEuQM49WP1rJ4L8GGc4ATsSmXJ6ZXsUlucdAr0u54JWQHow9Yu5S4ulYEtE8x0/s1600/twitter.png' title='Síguenos Twitter!'/></a> 

<a href='http://www.facebook.com/USERNAME' target='_blank'><img alt='Hazte Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkRG-NJ6SCu-EJ9nHjud3CEewSCusDmb9DK-lk4bAQkF2Ir_lUAPBPd6iqGO4uL7kehmR8ZlNv87UFxBwsQ_M4P74gJh6zLNj4w3VeXVUfqHIgf3vhYTMUc3qESv2n79YhraNI5rSZXgA/s1600/facebook.png' title='Hazte fan'/></a>
<a href='http://www.stumbleupon.com/stumbler/gaganmasoun' target='_blank'><img alt='Hazte Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuLfEJlaWbuP2d8-RNcj6wjZpBXgk_VVIR8UNvhcGxbm1mgKsgF-UNN7xVuBdW9llFNbQzSCZ6djSTohy_oxmuIeHvwmpjNrkO9cQNQlVJzyJYDJSGG7wqWqBhhXSMFnmyo8OewL6wNRk/s1600/stumbleupon.png' title='Síguenos en '/></a><a href='https://plus.google.com/u/0/NUMERDO DE ID' target='_blank'><img alt='Hazte fan !' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7_gw5W5GaqkiLasVBCJytCXWFxq9-bhHyXbJt5QJEL4BH5qFO4JUuBPe78AS9AdapbO-Dsly1oRDcxAijyDoKu5VSIZpskjFEkAHI9hEuj-_DNH8OEK5gGWLb8QqbPZaPV-ktOU6H9Mo/s1600/google.png' title='Síguenos en '/></a>
<a href='http://pinterest.com/USERNAME' target='_blank'><img alt='Hazte Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKIvxhcqCRzIYjmUQ_7k5i5iLKSxfWSzZSDkN37VfdDZp3pOBlA_TYVp19o6SrJrG2K94dpd6IY8gpuAUw_VjRXCW71ERb84FPbd_HmJpdnn1UgLYZbdbQ_ZXFpOdDnay-3YHbD2jTJihM/s24/BlogsDaddy-Pinterest-Button.png' title='Siguenos'/></a>
<a href='http://feeds.feedburner.com/USERNAME' target='_blank'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgitb9c2bXWwLS2jxpeUB15T3C0110jVUUzPPNHLmXHjLvScgHb1bP4jZDwbJTLKxA_voGuSTec34r_hJ7tsy109Bg081fycKnp3ugdR3bU-fiVxwxgutjeYXbaMryYeIl2LyGMDzUsa90/s1600/rss.png' title='RSS Feed'/></a><a href='http://www.tutoriales-blogger.info/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRt1rP3fjKYzAglvZUe5UilZ6w1HBCuqD2Gg2pSVDwLF9PBDBvIb8oCDkve76gDSpgnH54rNyXJ0TJUnAeitoxMyxIiC1JJ51bdWM69lciCkK3KVAHEValcvHa4r5-LreQ8sLsmETzThY/s1600/image.png' target='_blank'/></a>
</div>
<hr style="width:155px;" />
    <div id="news-letter">
<span class="msg-box"></span>
<b> Suscribirte en</b>
<br />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=USERNAME', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="ebutton3" gtbfieldid="2" maxlength="100" name="email" onfocus="this.value = '';" size="25" style="color: #333333; font-size: 11px; height: 21px; width: 130px;" type="text" valign="middle" value="Email..." />
<input name="uri" type="hidden" value="USERNAME" />
<input name="loc" type="hidden" value="en_Es" />
<input class="ebutton2" id="submit" style="font-size: 11px;" type="submit" value="Enviar" />
</form>
</div>
</div></div>
</b:if></b:if>​

• Paso 4: Guardamos los cambios realizados en nuestra plantilla 

Nota:- Solo tienes que cambiar las URL de tus Redes Sociales y FeedBurner