Hacker of the Web
Tus ideas en código!...y mas

Estas en: > > Blogger: Acerca del Autor de la entrada tipo WordPress
26ene2011

Blogger: Acerca del Autor de la entrada tipo WordPress

En Blanco

Seguro ya habrán visto en algunos blogs que al final de la entrada se encuentra un pequeño apartado donde el autor de la entrada se presenta con sus lectores con un pequeño texto.

Es un recurso interesante, pues mediante eso, los autores del blog pueden hacerse algo de audiencia y preferencia única hacia ellos, mientras que de la manera tradicional casi siempre o siempre pasa desapercibido quien fue el autor que escribió tan fantástica entrada.

Esto no quiere decir que el blog se dividirá en varios sub-blogs, donde cada autor cree sus entradas y cada uno tenga su propia audiencia dentro del mismo blog. Pudiera ser, pero no propiamente, se trata solo de darle los créditos de la entrada al autor la entrada.

Puedes ver un ejemplo de su funcionamiento: Acerca del autor. Aunque no es posible en blogger de manera nativa o por defecto, podemos hacerlo manualmente y conseguiremos el efecto deseado, como se puede ver en la entrada de ejemplo.

/!\ Recomiendo que leas detenidamente las instrucciones, después de leerlas totalmente, serás capaz de aplicarlo sin mayores inconvenientes :P

Lo que hay que hacer es:

[1] Después mediante las combinaciones de teclas 
'Ctrl + F'
necesitarás buscar:
post-footer-line-3


[2] Seguro que podrás ver algo como esto: 
<div class='post-footer-line post-footer-line-3'><span class='post-location'>
  <b:if cond='data:top.showLocation'>
    <b:if cond='data:post.location'>
      <data:postLocationLabel/>
      <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
    </b:if>
  </b:if>
</span> </div>

Si no es como lo anterior, será asi: 
<div class='post-footer-line post-footer-line-3'/>

Pero si tampoco vez lo anterior:

Tendrás que buscar 
post-footer-line-2


y verás algo como esto: 
<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
 <b:if cond='data:post.labels'>
  <data:postLabelsLabel/>
  <b:loop values='data:post.labels' var='label'>
   <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
  </b:loop>
 </b:if>
</span> </div>

[3] Justo despues del código anterior, deberás colocar el código como se muestra:

Generar el código automáticamente

Completa este formulario para generar tu código, si son mas de un autor separa cada campo con una "," como el siguiente ejemplo:

Nombr(es) de autor(es):
URL de avatar(es):
URL de perfil(es):
Resumen(es) de autor(es):

Para evitar futuros errores, las comas se utilizan aqui arriba para separar la información de cada autor. En el resumen de un solo autor trata de utilizar puntos en vez de comas. Ya que despues de la coma se tomará como resumen de otro autor.

Lo mismo para los otros campos.

Personalizar para cada usuario

Si quieres que el mensaje de "Acerca del autor" para cada usuario sea diferente puedes hacer lo siguiente, utilizaremos CSS así que si en algún punto te pierdes o quieres saber como personalizar mas a fondo revisa estos tutoriales de CSS:

Conceptos básicos de CSS
Propiedades y usos de CSS


Tambien colocaremos antes de la etiqueta 
</b:skin>
, el siguiente código:

Hacer el procedimiento manualmente(Usuarios Avanzados)

<div class='post-footer-line post-footer-line-3'>
[.................]
</div>

<b:if cond='data:blog.pageType == "item"'>
 <div class='sntyAboutAutor'>
  <b>Acerca del autor:</b><br/>

  <b:if cond='data:post.author == "AUTOR_1"'>
   <div id='AUTOR_1_SIN_ESPACIOS'>
    <a href='URL_DE_PERFIL_AUTOR_1'><b><data:post.author/></b></a>, 
    <img src='URL_DE_IMAGEN_AUTOR_1'/>
    RESUMEN_DEL_AUTOR_1
   </div>
  </b:if>

  <b:if cond='data:post.author == "AUTOR_2"'>
   <div id='AUTOR_2_SIN_ESPACIOS'>
    <a href='URL_DE_PERFIL_AUTOR_2'><b><data:post.author/></b></a>, 
    <img src='URL_DE_IMAGEN_AUTOR_2'/>
    RESUMEN_DEL_AUTOR_2
   </div>
  </b:if>

  <b:if cond='data:post.author == "AUTOR_3"'>
   <div id='AUTOR_3_SIN_ESPACIOS'>
    <a href='URL_DE_PERFIL_AUTOR_3'><b><data:post.author/></b></a>, 
    <img src='URL_DE_IMAGEN_AUTOR_3'/>
    RESUMEN_DEL_AUTOR_3
   </div>
  </b:if>

  </div>
</b:if>
 Si solo es un autor en tu blog puedes eliminar los códigos sobrantes y te quedará así: 
<div class='post-footer-line post-footer-line-3'>
[.................]
</div>

<b:if cond='data:blog.pageType == "item"'>
 <div class='sntyAboutAutor'>
  <b>Acerca del autor:</b><br/>

  <b:if cond='data:post.author == "AUTOR_1"'>
   <div id='AUTOR_1_SIN_ESPACIOS'>
    <a href='URL_DE_PERFIL_AUTOR_1'><b><data:post.author/></b></a>, 
    <img src='URL_DE_IMAGEN_AUTOR_1'/>
    RESUMEN_DEL_AUTOR_1
   </div>
  </b:if>

 </div>
</b:if>

En:

URL_DE_PERFIL: Coloca el URL de cualquier página que creas conveniente o el URL de tu perfil.

URL_DE_IMAGEN: Coloca la URL de la imagen, que mejor represente al autor

AUTOR_1, AUTOR_2, AUTOR_3: Sustituye por el nombre del autor, si tiene espacios el nombre colócalos

AUTOR_1_SIN_ESPACIOS,
AUTOR_2_SIN_ESPACIOS,
AUTOR_3_SIN_ESPACIOS: El nombre del autor sin espacios

RESUMEN_DEL_AUTOR: Se sobreentiende xD.

Personalizar para cada usuario

Si quieres que el mensaje de "Acerca del autor" para cada usuario sea diferente puedes hacer lo siguiente, utilizaremos CSS así que si en algún punto te pierdes o quieres saber como personalizar mas a fondo revisa estos tutoriales de CSS:

Conceptos básicos de CSS
Propiedades y usos de CSS


Tambien colocaremos antes de la etiqueta 
</b:skin>
, el siguiente código: 
#AUTOR_1_SIN_ESPACIOS{

[.......Estilo que quieras para este Autor......]

}
#AUTOR_2_SIN_ESPACIOS{

[.......Estilo que quieras para este Autor......]

}
#AUTOR_3_SIN_ESPACIOS{

[.......Estilo que quieras para este Autor......]

}

Recuerda que AUTOR_1_SIN_ESPACIOS,
AUTOR_2_SIN_ESPACIOS,
AUTOR_3_SIN_ESPACIOS
Deben ser iguales a los que colocamos en el paso numero [3]


[4] Seguidamente con las combinaciones de teclas 
'Ctrl + F'
deberás buscar: 
</b:skin>


Y colocar antes de esa etiqueta el código CSS siguiente:

Haz click en la imagen para ver el código:
En BlancoEn Negro


Por: Unknown
En Hace 14 años que se publicó
Etiquetas , ,
#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.

Emoticons
Comenta con tu:
Comenta:

Sé el primero y comenta !


Calendario interactivo con fec... Css3 interesantes gradient... Página Principal
Arriba