Imagen y enlace en la firma del post para varios autores

Ya habíamos visto como cambiar la firma de las entradas por una imagen, veremos ahora como hacer eso mismo en un blog compartido es decir, con más de un autor.

Antes de empezar tendremos preparadas las imágenes que vamos a usar para cada autor, teniendo en cuanta que lo lógico será que todas tengan las mismas medidas y que no sean demasiado grandes pues no obtendríamos un buen resultado dado el lugar donde van a mostrarse.

[1] Una vez en nuestro panel de Blogger, vamos a "Edición HTML" y marcamos la opción de "expandir las plantillas de artilugios" para localizar este código:

<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>

[2] Tendremos que cambiar ese código por este otro:
<span class='post-author'>
<b:if cond='data:post.author == "TU_NICK"'>
<data:top.authorLabel/>
<img class='blog-autor' src='URL_TU_IMAGEN'/><data:post.author/>
<b:else/>
<data:top.authorLabel/>
<img class='blog-autor' src='URL_IMAGEN_OTRO_AUTOR'/><data:post.author/>
</b:if>
</span>
[3] En "TU_NICK" colocamos el nombre del autor principal del blog, escrito exactamente como su nick aparece en la firma de entradas,  y en "URL_TU_IMAGEN" la url de la imagen que usará el autor principal.

En "URL_IMAGEN_OTRO_AUTOR" colocaremos la url de la imagen para el otro autor del blog.

[4] Si es necesario, añadimos algo de CSS para controlar la posición de la imagen (lo colocamos como siempre antes de ]]></b:skin>):

img.blog-autor {
padding: 2px; margin: 0; border: 0;}



Resultado:
Firma autores

Modificaciones:

En el ejemplo son dos los autores que publican en el mismo blog, para hacer lo mismo cuando son más de dos, tendríamos que añadir en el código las condicionales necesarias por cada autor.
Por ejemplo para un tercer autor, colocaríamos en el código después de  <b:else/> esta nueva condición :
<b:if cond='data:post.author == "SU_NICK"'>
<data:top.authorLabel/>
<img class='blog-autor' src='URL_SU_IMAGEN'/><data:post.author/>
<b:else/>


Haciendo unos ligeros cambios en el código, también podemos conseguir:

Mostrar la imagen después del nombre del autor
<span class='post-author'>
<b:if cond='data:post.author == "TU_NICK"'>
<data:top.authorLabel/>
<data:post.author/><img class='blog-autor' src='URL_TU_IMAGEN'/><data:post.author/>
<b:else/>
<data:top.authorLabel/>
<data:post.author/><img class='blog-autor' src='URL_IMAGEN_OTRO_AUTOR'/>
</b:if>
</span>
Firma + imagen

Firma sin el "publicado por"
<span class='post-author'>
<b:if cond='data:post.author == "TU_NICK"'>
<data:post.author/><img class='blog-autor' src='URL_TU_IMAGEN'/><data:post.author/>
<b:else/>
<data:post.author/><img class='blog-autor' src='URL_IMAGEN_OTRO_AUTOR'/>
</b:if>
</span>
Firma e imagen

"Publicado por" y la imagen de la firma
<span class='post-author'>
<b:if cond='data:post.author == "TU_NICK"'>
<data:top.authorLabel/>
<img class='blog-autor' src='URL_TU_IMAGEN'/>
<b:else/>
<data:top.authorLabel/>
<img class='blog-autor' src='URL_IMAGEN_OTRO_AUTOR'/>
</b:if>
</span>
Publicado por+imagen

Enlace en la imagen de la firma a un sitio determinado

Lo haremos tal como ya hicimos antes al añadir el enlace en la firma del autor, dentro del código anterior y en la imagen de cada uno:

<a href='http://url_del_enlace' target="_blank"><img class='blog-autor' src='URL_IMAGEN_OTRO_AUTOR'/></a>

0 comentarios:

Publicar un comentario