Comentarios a pie de página (Incrustado)

Este es uno de mis trucos favoritos para la presentación de comentarios. Lo he visto hace mucho en La bloguería. Se trata de presentar los comentarios incrustado al pie de la entrada, mediante el uso normal de la ventana Pop Pup o Página individual, pero agregando algunos scripts y cambiando varios códigos en la plantilla que aunque paresca difícil, es uno de los más fáciles que he visto!.

Primeramente, como el trabajo es un poco largo y podemos cometer varios errores (Yo los tuve), es recomendable que nos descarguemos una copia previa de nuestra plantilla, si algo sale mal, de inmediato lo recuperamos todo y sin perder absolutamente nada!.

(1) Diseño/Edición HTML y expandimos los artilugios, para facilitar el proceso de búsqueda de códigos siempre me gusta utilizar el buscador (Ctrl+F). Buscamos este trozo de códigos:

<b:includable id='comments' var='post'>
<div class='comments' id='comments'><a name='comments'/>
<b:if cond='data:post.allowComments'><h4><b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>:<b:else/><data:post.numComments/> <data:commentLabelPlural/>:</b:if></h4><dl id='comments-block'><b:loop values='data:post.comments' var='comment'><dt class='comment-author' expr:id='"comment-" + data:comment.id'><a expr:name='"comment-" + data:comment.id'/><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><dd class='comment-body'><b:if cond='data:comment.isDeleted'><span class='deleted-comment'><data:comment.body/></span><b:else/><p><data:comment.body/></p></b:if></dd><dd class='comment-footer'><span class='comment-timestamp'><a expr:href='"#comment-" + data:comment.id' title='comment permalink'><data:comment.timestamp/></a><b:include data='comment' name='commentDeleteIcon'/></span></dd></b:loop></dl><p class='comment-footer'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a></p></b:if><div id='backlinks-container'><div expr:id='data:widget.instanceId + "_backlinks-container"'><b:if cond='data:post.showBacklinks'><b:include data='post' name='backlinks'/>
</b:if></div></div></div>
</b:includable>

Como es un poco largo, fíjate bien donde comienza y termina, sustituye completamente por este otro:

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<!--
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
-->
<div class='onepx'>
<dl id='comments-block' style='height: 1px;overflow:hidden;'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<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>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>
<!--
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
-->
<div id='comment-parent' onmouseover='showcomment("hoverme", "comment-child");' style='margin-bottom: 50px;'>
<h3 id='hoverme' style='display:block;'>
<img alt='Deja aqui tu comentario' src='URL IMAGEN QUE OCULTA EL FORMULARIO' title='Deja aqui tu comentario'/>
</h3>

<!-- este iframe de abajo es el formulario de comentarios. Puedes modificar el alto y el ancho y añadir imagen de fondo, entre otras modificaciones -->

<div id='comment-child' style='border:none; display: none; height:750px; width: 440px; margin-bottom: 5px; background-image: url (AQUI LA URL IMAGEN FONDO FORMA COMENTARIOS); border: 2px solid red;'>
<iframe expr:src='data:post.addCommentUrl' height='100%' scrolling='yes' style='border:none;' width='100%'/>
<br/>
</div>
<!-- fin del iframe -->
</div>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>

Añade una imagen para ocultar el formulario, al pasar el mouse sobre la que elijas, saldrá automáticamente el editor. La parte del código background-image: url (AQUI LA URL IMAGEN FONDO FORMA COMENTARIOS);, la puedes cambiar por background: #f5f5f5;, por cualquier otro color que quieras. También puedes modificar el alto y ancho en height:750px; width: 440px;.

Ahora buscamos la etiqueta </body>, añadimos este código justo antes:

<script languange='javascript'>function showcomment(a,b){var jackbookdotcom = document.getElementById(a);jackbookdotcom.style.display = 'none';jackbookdotcom = document.getElementById(b);jackbookdotcom.style.display = 'block';}</script>

Ahora nueva vez vamos a localizar un código y sustituirlo por otro:

<span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><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></b:if></span>

Lo cambiamos por este otro:

<span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.url + "#comments"' ><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></span>

Hasta aquí es todo. Con estos sencillos pasos hemos dado un buena limpieza a ese feo formulario que Blogger nos proporciona.

Vista: La Bloguería