Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock
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)

:))
:((
: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