Mejorando la apariencia de los comentarios

H ace ya un tiempo que he aplicado un truco por el cual, los comentarios se despliegan en el blog como parte de cada entrada, disimulando un poco el interfaz que Blogger le a dado a la plantilla de comentarios, que queda tan mal estéticamente hablando con nuestros blogs.
Es que nos matamos para que nuestros blogs, sean únicos, y reflejen nuestros gustos, "tuneándolos" de la mejor manera posible, pero los comentarios son algo que hasta ahora no se podían cambiar.

Vromo consulta, y yo le cuento:
Gracias a la genialidad de Rosa, (una gran maestra para todos), que ha encontrado hace un tiempo este truco en un blog en inglés que ya no existe, se tomó el trabajo, de corregirlo y publicarlo par todos.
Y yo lo transcribo para darle una respuesta a Vromo ^_^, aunque pueden ir a la fuente ;)

Es importante que siempre antes que hagas un cambio en la plantilla guardes una copia, por si el truco no te funciona o no te gusta puedas volver a lo que tenías.
Nada es infalible...^_^


1- Vamops a la pestaña "Configuración" de nuestra plantilla y de ahí a "Comentarios" y seleccionamos SI en "¿Mostrar comentarios en una ventana emergente?"

2- Luego vamos a Plantilla/Edición HTML, expandir artilugios y encima de </head> colocamos este código:

<style>
#comenta-outter {
margin: 50px 0;
}

#comenta-inner {
display: block;
height: 650px;
width: 500px;
margin:0;
border:none;
background-color: #ddd;
}
</style>

3- Luego tratamos de localizar esta parte del código en la plantilla y lo seleccionamos:

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

(Recuerden que todas las plantillas son distintas, y esta parte del código puede ser que esté un poco distinta, es cuestión de encontrar el principio y el final, lo van viendo y de paso se acostumbran a los códigos. Lo comento por experiencia propia. ;) )

4- Una vez que seleccionamos todo el código anterior, lo sustituimos por el siguiente:

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<center>
<div id='comenta-outter'>
<div id='comenta-inner'>
<iframe align='middle'
expr:src='data:post.addCommentUrl'
frameborder='0' marginheight='0' marginwidth='0' scrolling='auto'
style='width:100%;height:100%;'/>
</div>
</div>
</center>
</b:if>

5- Ahora tenemos que localizar esta otra parte del código y lo seleccionamos:

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

6- Sustituímos lo seleccionado por este código:

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

Pronto, ya queda :D

Como bien marca Rosa en su blog, podemos modificar el código CSS, para adaptar el formulario y darle una apariencia mucho más original.

#comenta-inner {
display: block;
height: 650px;
width: 500px;
margin:0;
border:none;
background-color: #ddd;
}

height: 650px; Altura del formulario
width: 500px; Ancho del formulario
border:none; Borde del formulario, es modificable el grosor, tipo y color, por ej, border:2px solid #000;
background-color: #ddd; Color de fondo del formulario, no solo podemos cambiar el color, sino que podemos añadir una imagen de fondo al formulario, cambiando background-color: #ddd; por background: url(URL DE LA IMAGEN);

Listo !!!!
Yo, como les comentaba, ya lo tengo en funcionamiento hace tiempo, asi que si lo quieren ver, solo hagan click en comentarios y ahí está ;)

Seguir Leyendo...[+/-]