Iluminar Comentarios (I)

La primera fórmula que voy a explicar es la "Asynchronous Peek-A-Boo Comments", de Singpolyma. ¿Qué "hace"?: Pues desplegar los comentarios en sus entradas y marcar, con un color distinto al de los otros liks de comentarios (los de las entradas que no tienen comentarios) la entrada que tiene algún comentario. Además, se puede picar en el link del comentario para verlo o, si no hay, para poner uno, sin necesidad de andar picando en el título de la entrada.

Y nada mejor para explicarme, que veáis el hack en accion AQUÍ: Picad en el título de "Yera un Burru" o en el "1 Comentario|Pon quí tu comentario" de esta entrada.

Y vamos al hack, que ¡Aviso!, lo he interpretado a mi manera... entre otras cosas, porque está realizado con el "0 comentarios" y el "1 comentarioS (plural)" que tan poquito me gustan. Así que lo he adaptado en este punto. Quien no lo quiera así, que siga el hack original, please. Además, he insertado un "Pon aquí tu comentario" para facilitar a las visitas el lugar donde picar para insertarlos (eso... para quien le visite gente maja que le escriba, que no es mi caso, jajajjaaa :p)

1º.- Id a Edición de plantilla y expandidla. Añadid el siguiente script antes del cierre /"head":

<script type="text/javascript">

//<![CDATA[

var comment_form_template = '<div class="commentelem"><div class="comment-poster">[[AUTHOR]]</div>\n'

+ '<div class="comment-body"><div class="innerCmntBody">[[BODY]]</div></div>\n'

+ '<div class="comment-timestamp"><a href="[[PERMALINK]]" title="comment permalink">[[DATE]]</a></div></div>\n';



if(typeof(thisblog_showCommentPhotos) == 'undefined')

thisblog_showCommentPhotos = false;



//]]>

</script>



<script src='http://jscripts.ning.com/get.php?xn_auth=no&amp;amp;id=2941927' type='text/javascript'></script>

2º.- Encontrad la siguiente pieza de código:
<b:includable id='comments' var='post'>

<div class='comments' id='comments'>


y reemplazad la SEGUNDA LÍNEA (SOLO LA SEGUNDA, NADA DE LO QUE VIENE DETRÁS NI DELANTE DE ELLA EN VUESTRA PLANTILLA. INSISTO: SOLO ESA LÍNEA) por lo siguiente:

<div class='comments' expr:id='"comments" + data:post.id'>

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"commentsul" + data:post.id'> </div>

<script type='text/javascript'>

document.getElementById('comments<data:post.id/>').style.display = 'none';

</script>

</b:if>

3º.- Encontrad en vuestra plantilla el código que se refiere a los posts, y que se debe parecer a ésto: <b:includable id='main' var='top'>

<!-- posts -->
Bajad un poquito desde esa tag hasta encontrar la sección del "AllowComments":

<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:post.allowComments'>

<b:include data='post' name='comments'/>

</b:if>

</b:if>


Y sustituidla por ésto:

<b:if cond='data:post.allowComments'>

<b:include data='post' name='comments'/>

</b:if>

4º.- Encontrad la sección que encabeza esa tag: <b:includable id='post' var='post'>
y dentro de ella, algo como ésto, precedido por un "span":
<b:if cond='data:post.allowComments'>

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>

</b:if>


Reemplazadla, por lo siguiente (aquí es donde vienen mis "cambios"):

<span class='post-comment-link'>

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.allowComments'>

<b:loop values='data:post.feedLinks' var='f'>

<a class='comments' expr:href='data:post.url + "#comments"' expr:onclick='"peekaboo_comments_display(&amp;quot;" + data:f.url + "&amp;quot;,&amp;quot;commentsul" + data:post.id + "&amp;quot;,thisblog_showCommentPhotos);toggleitem(&amp;quot;comments" + data:post.id + "&amp;quot;);return false;"' rel='comments'> |Pon aquí tu comentario|

<b:if cond='data:post.numComments == 0'>



|sin comentarios|



<b:else/>



<b:if cond='data:post.numComments == 1'>



|1 comentario|



<b:else/>



<data:post.numComments/> comentarios

<data:top.commentLabelPlural/>





</b:if>



</b:if>



</a>





</b:loop>

</b:if>



<b:else/>

<b:if cond='data:post.allowComments'>

<a class='comment-link' expr:href='data:post.url + "#comments"' expr:onclick='"toggleitem(&amp;quot;comments" + data:post.id + "&amp;quot;);return false;"'> |Pon aquí tu comentario|

<b:if cond='data:post.numComments == 0'>



|sin comentarios|



<b:else/>



<b:if cond='data:post.numComments == 1'>



|1 comentario|



<b:else/>



<data:post.numComments/> comentarios

<data:top.commentLabelPlural/>





</b:if>



</b:if>



</a>



</b:if>

</b:if>







</span>

Y, por fín, hemos terminado. Mirad en "Vista Previa" si todo está en orden y guardad la plantilla.

Y... atenttos... porque es fácil perderse en este hack... :)