Personalizando el Formulario de Comentarios

Las opciones de presentación de los comentarios en Blogger no son demasiado convincentes; la que más cómoda me resulta es la ventanita independiente, ya que no te saca del blog; sin embargo, y ya puestos a meter mano a todo, el apartado de comentarios no puede ser menos. Gracias a este hack de Jackbook, podemos darle un aspecto diferente y personalizado. Y si podemos, queremos, que dice mi refrán.

Echa un vistazo antes de nada al ejemplo, para que veas a qué me refiero. Pincha en el apartado de los comentarios; verás que al pie de la entrada aparece una imagen, en este caso un globo exhortativo, y al pasar el cursor sobre ella, verás el formulario de comentarios, que también podemos personalizar.




Y aquí va el código. Descarga una copia de tu plantilla, y sigue las instrucciones con atención. ¡Es muy fácil, y el resultado, mucho estilo para tus comentarios!

CÓDIGO [+/-]

• Expande la plantilla de artilugios y busca este código (ayúdate de CTRL + F para localizarlo):
  
  <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>
  
  Fíjate bien dónde empieza y acaba, y sustitúyelo entero por éste:
  
  <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 la imagen que ocultará la forma de los comentarios (en mi caso, el globo). Puedes aplicar también una imagen de fondo al formulario; si deseas aplicar solamente un color, sustituye la línea backgound-image: url (AQUI LA URL IMAGEN FONDO FORMA COMENTARIOS); por background: #f5f5f5; con el color que quieras. Modifica el borde, la altura y la anchura del formulario para adaptarlo a tu blog.



• Ahora busca </body>, y añade 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>



• Y de nuevo vamos a localizar un código y sustituirlo por otro. Busca esto:
  
  <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>
  
  Y sustitúyelo entero por éste:
  
  <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>

Con estos pocos cambios, habremos conseguido un completo lavado de cara, y una forma muy original de presentar los comentarios. Solo falta que escojas la imagen que indicará pasar el cursor por encima (asegúrate de que indica perfectamente que ahí están los comentarios), y la imagen que quieres poner de fondo al formulario. Sé bueno con tus lectores y aplica una imagen que respete la legibilidad. ¡Espero que este código te guste tanto como a mí!

* Este hack es de Jackbook.