Una de las cosas que menos me gusta de Blogger y que envidio de Wordpress es el formulario de comentarios, tan anodino, igual para todos y que no pega nada con el resto del estilo del blog.
ACTUALIZACIÓN: Ya está disponible un
formulario de comentarios para Blogger tipo WP; por lo tanto, aunque el hack que explico en esta entrada era una muy buena solución "provisional", es mucho mejor poner el nuevo. Si quieres implementarlo en tu blog, echa un vistazo a esta entrada:
FORMULARIO DE COMENTARIOS BLOGGER.
Pues bien, la
Gran Rosa por fin ha dado con una solución y modificando el HTML de la plantilla ha conseguido que el formulario para dejar comentarios de Blogger no aparezca en una ventana aparte, sino que lo haga incrustado justo al final de cada entrada, donde hasta ahora sólo aparecían los comentarios y el enlace al formulario de Blogger.
Lo reconozco, esta entrada está absolutamente copiada de la suya, pero me parece uno de los mejores hacks de todos los tiempos, así que creo que merece la pena reproducirlo.
Hacerlo es realmente sencillo, pero hay que ser cuidadoso, así que vamos a ello. Lo primero que hay que hacer es situarnos en Configuración/Comentarios y en la opción "¿Mostrar comentarios en una ventana emergente?" seleccionar SÍ y guardar configuración.
Ahora vamos a Plantilla/Edición de HTML, expandimos artilugios y buscamos la siguiente línea:
]]></b:skin>Justo encima pegamos el siguiente código:
#comenta-outter {margin: 50px 0;}#comenta-inner {display: block;height: 650px;width: 500px;margin:0;border:none;background-color: #ddd;}
Estas CSS nos permitirán más tarde personalizar la apariencia del formulario.
Buscamos el siguiente trozo de código:
<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>Y lo sustituimos por este otro:
<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>Igualmente buscamos este otro trozo de 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.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 también lo sustituimos, en este caso 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>Clicamos sobre Guardar Plantilla y ya está! Ya tenemos el formulario de comentarios incrustado debajo de cada entrada en las páginas individuales de ésta. Ahora, cuando un lector clique sobre los comentarios en el pie de las entradas desde la página principal del blog, el enlace le llevará a la lista de comentarios y el formulario integrado (tal y como se ve cuando tenemos configurado el "Abrir formulario de comentarios en una ventana emergente") debajo de la entrada.
Ahora si lo deseamos podemos incluso personalizar el formulario para que case a la perfección con el resto del estilo del blog. Nos situamos de nuevo en Plantilla/Edición de HTML, expandimos artilugios y buscamos el siguiente código que acabamos de añadir:
#comenta-inner {display: block;height: 650px;width: 500px;margin:0;border:none;background-color: #ddd;}En él podemos hacer las siguientes modificaciones:
·height: 650px; Es el alto que tendrá el formulario, podemos cambiar el valor por el que necesitemos, pero si tienes muchos comentarios aparecerá una barra de scroll para permitir leerlos todos, y al final de éstos aparecerá el formulario de comentarios. De todas formas, en la parte superior de los comentarios hay un enlace que te lleva directamente al formulario sin necesidad de pasar los comentarios.
·width: 500px; Es el ancho del formulario, que os recomiendo que sea el mismo que el del cuerpo del blog (las entradas).
·border:none; Borde del formulario, está en none (ninguno), pero se puede variar para que aparezca con la siguiente sintaxis:
border:anchopx tipo #colorhexadecimalPor ejemplo
border:2px solid #000;·background-color: #ddd; El color de fondo del formulario. Se puede poner el color en hexadecimal que mejor case con el estilo de vuestro blog (
AQUÍ teneis la tabla de colores hexadecimales que uso yo) Se puede incluso añadir una imagen de fondo al formulario para hacerlo más original, cambiando esta línea:
background-color: #ddd;por esta otra:
background: url(URL_de_tu_imagen);Este gran descubrimiento de Rosa acaba con una de las limitaciones de Blogger, así que por favor no dejeis de pasar por
El Escaparate para felicitarla!
Personaliza tu plantilla (3): la inspiración
Acuarelas, que dan un efecto sutilmente elegante y muy natural
Collage, sobre todo en blogs femeninos; superposición de varias imágenes
Colores brillantes y vibrantes, como el magenta, los naranjas...
Escritura a mano, aspecto de cuadernos, apuntes, libros de dibujos.
Importancia de la tipografía como una decoración más del blog
Por fin me he decidido a instalar Popbox, que descubrí gracias a 
Esto lo escribe
