Mostrar/ocultar comentarios en Blogger

Si os gusta tener el blog bien ordenado y poder expandir y contraer cosas, este post os gustará, lo que hoy os voy a enseñar es contraer y expandir los comentarios de una entrada.
Es muy simple, para hacerlo sólo tenéis que hacer lo siguiente:

• Entra en "Diseño", "Edición de HTML", marca la casilla "Expandir plantilla de artilugios" y pega antes de </head> lo siguiente: 

<!-- Prototype y Scriptaculous-->

<script src='http://www.google.com/jsapi'/>

<script>

google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);

google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);

</script>

<!-- Prototype y Scriptaculous-->

• Si ya tienes ese código pasa directamente al segundo paso sin hacer nada. 

• Ahora busca este código y añade lo que está en color rojo: 

<div expr:class='data:post.postAuthorClass' expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>

<a href='javascript:void(0)' onclick='Effect.toggle(&quot;comentarios&quot;,&quot;slide&quot;); return false'>&#9660;&#9650; Mostrar / Ocultar comentarios</a><div id='comentarios' style='display: none;'>

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

<b:loop values='data:post.comments' var='comment'>

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

<b:if cond='data:comment.favicon'>

<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>

</b:if>

<a expr:name='data:comment.anchorName'/>

<b:if cond='data:blog.enabledCommentProfileImages'>

<data:comment.authorAvatarImage/>

</b:if>

<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

<b:else/>

<data:comment.author/>

</b:if>

<data:commentPostedByMsg/>

</dt>

<b:if cond='data:comment.author == data:post.author'>

<dd class='blog-author-comment'>

<p><data:comment.body/></p>

</dd>

<b:else/>

<dd expr:class='&quot;comment-body &quot; + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'><data:comment.body/></span>

<b:else/>

<p>

<data:comment.body/>

<span class='interaction-iframe-guide'/>

</p>

</b:if>

</dd>

</b:if>

<dd class='comment-footer'>

<span class='comment-timestamp'>

<a expr:href='data:comment.url' title='comment permalink'>

<data:comment.timestamp/>

</a>

<b:include data='comment' name='commentDeleteIcon'/>

</span>

</dd>

</b:loop>

</dl>

</div>

</div>

Una vez hemos hecho esto, guardamos los cambios y ya podremos ver como se expanden y se contraen los comentarios de cada entrada.