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: 

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='http://1.bp.blogspot.com/-vMKNd43nx_k/ULICajFZLsI/AAAAAAAAkEo/japevMx_fpI/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='http://2.bp.blogspot.com/-mqqPvGPt7dI/T9maU7JKaRI/AAAAAAAAA4o/BPeRM6y7oxA/s1600/twitter.png' title='Síguenos Twitter!'/></a> 
<a href='http://www.facebook.com/USERNAME' target='_blank'><img alt='Hazte Fan!' src='http://4.bp.blogspot.com/-8bWXS3t1S3g/T9maPS0F8HI/AAAAAAAAA4I/bwiZYy8Ri6o/s1600/facebook.png' title='Hazte fan'/></a>
<a href='http://www.stumbleupon.com/stumbler/gaganmasoun' target='_blank'><img alt='Hazte Fan!' src='http://1.bp.blogspot.com/-uRuQesGA0r4/T9maULj720I/AAAAAAAAA4g/U3qsSaNtyf4/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='http://2.bp.blogspot.com/-AQVtTqyD7N8/T9maQRwpl6I/AAAAAAAAA4Q/Y9mltd_ZgtI/s1600/google.png' title='Síguenos en '/></a>
<a href='http://pinterest.com/USERNAME' target='_blank'><img alt='Hazte Fan!' src='http://4.bp.blogspot.com/-B9D4idtZrD4/UOlGeOQ0REI/AAAAAAAAmXQ/91iB-YSnyGI/s24/BlogsDaddy-Pinterest-Button.png' title='Siguenos'/></a>
<a href='http://feeds.feedburner.com/USERNAME' target='_blank'><img alt='RSS Feed' src='http://3.bp.blogspot.com/-ZFSOToEIH3k/T9maR7A2-dI/AAAAAAAAA4Y/TFqXHP9j1I8/s1600/rss.png' title='RSS Feed'/></a><a href='http://www.tutoriales-blogger.info/'><img src='http://1.bp.blogspot.com/-MiryOkTk9fs/T9nKXxy3riI/AAAAAAAAA5o/kMhpj-0aCAM/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
- - 2 Comentarios
Tag

Comentarios (2)

  1. grasias lo eh implementado en mi blog queda genial grasias

    ResponderEliminar
:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar