Y es que ya todos hemos leído bastantes (suficientes y demasiados) tutoriales online acerca de este extraño formulario, en páginas en español, en páginas en inglés, tratando de descifrar tales códigos. Y asimismo, esta pequeña área del blog no ha dejado de cambiar y cambiar. Sin embargo, ahora que ya por fin está disponible desde el panel “normal” de Blogger, se ha habilitado la vista previa, y agregado la opción de suscribirse a los comentarios, mejor revisemos el código “nuevo” -no tan nuevo, pero nuevo-. Es preferible reemplazarlo por el que tenemos en este momento.
* La clave está en buscar: <b:includable id=’comment-form’ var=’post’> (desde Edición HTML con la plantilla de artilugios expandida).
Antes
<b:includable id='comment-form' var='post'> <div class='comment-form'> <a name='comment-form'/> <h3><data:postCommentMsg/></h3> <p><data:blogCommentMessage/></p> <iframe allowtransparency='true' expr:src='data:post.commentFormIframeSrc' frameborder='0' height='275' id='comment-editor' scrolling='auto' width='100%'/> </div> </b:includable>
Después
<b:includable id='comment-form' var='post'> <div class='comment-form'> <a name='comment-form'/> <h4 id='comment-post-message'><data:postCommentMsg/></h4> <p><data:blogCommentMessage/></p> <data:blogTeamBlogMessage/> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/> <iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='auto' src='' width='100%'/> <data:post.iframeColorizer/> </div> </b:includable>
El código muestra, en general, un contenedor, un encabezado, un párrafo, más un intocable iframe.
El contenedor general
<div class='comment-form'>
Cambiando el ancho del contenedor
* Lo primero que hay que hacer es cambiarle el “nombre” (comment-form) al contenedor por cualquier otro (ej. comment-form-block), o sencillamente cambiar “class” por “id”.
Blogger utiliza su clase predeterminada (comment-form) para darle propiedades ajenas a las que nosotros en realidad queremos (Blogger agrega max-width: 425px;). Es por esto que el editor sale mucho más angosto de lo que debería. Si se fijan, en este blog cubre todo el ancho del post.
* Después, desde la hoja de estilos (CSS) de nuestro blog -básicamente lo que está antes de ]]></b:skin>-, agregaremos el siguiente código:
div.comment-form-block{
width: 450px; /*aquí definimos el ancho (valor en pixeles)*/
margin: 0 auto; /*centramos el contenedor*/
}
El encabezado
<h4 id='comment-post-message'>
Aquí se muestra el mensaje de Blogger que dice: “Publicar un comentario en la entrada”. Podemos cambiar ese mensajito remplazando <data:postCommentMsg/> por nuestro mensaje personal (ej.: deja tu comentario, no olvides dejar tu huella).
El mensaje del formulario
<p><data:blogCommentMessage/></p>
* Aquí se muestra el mensaje que configuramos desde Panel> Configuraciones> Comentarios.
* Sin embargo, desde la hoja de estilos (CSS) de nuestro blog (de nuevo, lo que está antes de ]]></b:skin>), podemos darle diferentes estilos al texto:
div.comment-form-block p{
color: #fff; /*color de fuente*/
font-family: 'Trebuchet MS'; /*tipo de fuente*/
font-size: 12px; /*tamaño de fuente*/
text-align: right; /*hacia adónde se alinea el texto*/
}
El intocable iframe y el script colorizer
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='auto' src='' width='100%'/> <data:post.iframeColorizer/>
El script colorizer es el que ha creado Blogger para que tanto el mensaje que dice “Comentar como” y el enlace de Suscripción a los comentarios adopten las propiedades ya establecidas en nuestro blog. Ejemplo: si los enlaces en mi blog son color rojo oscuro (#990000) el de Subscribe también.
* Para que funcione es necesario que la clase del iframe sea “blogger-iframe-colorize”. Y que bajo el código del iframe esté <data:post.iframeColorizer/>.
* Se puede marcar el ancho del iframe (con respecto al contenedor general) donde dice width=’100%’. Yo preferiría no cambiarlo sino tan sólo marcar el ancho directamente en el contenedor.
* La altura predeterminada es 275, pero si queremos que ese espacio en blanco bajo el editor se reduzca, lo conveniente sería cambiarlo a 250 más o menos y cambiar la propiedad scrolling=’auto’ a scrolling=’no’. También se puede agregar la siguiente línea al CSS de la plantilla (para que no se vea el horrible scroll -en especial en Windows Vista-):
#comment-editor{overflown: hidden;}
Podríamos decir que eso es todo. Pero uno ya ni sabe, así que podemos dejar la duda planteada… 