Comentarios que se expanden debajo de las entradas

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

Es un hack de Singpolyma que nos permitirá ver los comentarios expandidos debajo de cada entrada en la página principal.
Su funcionamiento es sencillo: cuando pinchemos en "comentarios" debajo de una entrada, los comentarios aparecerán expandidos debajo de ella, si volvemos a pinchar de nuevo en "comentarios" se contraerán, volviendo a ocultarse.
Su inclusión en la plantilla, ya no lo es tanto, es decir, no tendrá ninguna complicación en una plantilla original de Blogger sin cambios anteriores, pero probablemente tendremos problemas al localizar los códigos, si previamente hemos hecho algún tipo de cambio en la zona.
Lo mejor sería probarlo antes en una plantilla de prueba, y mejor aún, descargar una copia de la plantilla donde queremos usarlo y cargarla en un blog de pruebas, antes de trabajar en la "de verdad".
Antes de empezar, lo mejor será ver como funciona, para ello podéis visitar Singpolyma y hacer la prueba pinchando en los comentarios debajo de una entrada.

[1] Iremos a la parte de edición HTML de nuestra plantilla y expandiremos los artilugios.
Localizamos el cierre de la cabecera </head> y justo antes, incluimos este script:

<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] Tendremos ahora que localizar estas líneas de código:

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>

Y sustituimos la segunda línea por este código:

<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>

Por debajo de esto, localizamos ahora esta línea:<dl id='comments-block'> y justo encima, colocaremos esta otra:

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

[3] Buscamos ahora estas otras dos líneas de código, que nos servirán de orientación:
<b:includable id='main' var='top'>
<!-- posts -->
Una vez localizada esa sección, veremos dentro de ella, normalmente algo más abajo, lo que en realidad nos interesa:

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if></b:if>

Cambiamos ese código completo por este otro:

<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>

[4] Por último localizamos la parte correspondiente al comienzo de la sección de nuestras entradas, para situarnos:

<b:includable id='post' var='post'>

Más abajo veremos el código que en realidad hemos de modificar:

<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>

Lo eliminamos y colocamos este en su lugar:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<b:loop values='data:post.feedLinks' var='f'>
<a class="comments" rel="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;,&amp;quot;&amp;quot;,&amp;quot;" + data:post.url + "#comments&amp;quot;,&amp;quot;false&amp;quot;);toggleitem(&amp;quot;comments" + data:post.id + "&amp;quot;);return false;"'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></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;"'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>

¡Suerte!