soy Kseso y esto EsCSS

Formulario de comentarios de Blogger antes de los comentarios {Ampliado para viejos y nuevos temas}

Cómo hago para mostrar el formulario de comentarios de Blogger antes que los comentarios. (Nada de javascript y menos jQuery es necesario, sólo CSS). Y si ya hay 3 o más comentarios también mostrarlo después de ellos con sólo código nativo de Blogger.

Formulario de comentarios de Blogger antes de los comentarios {Ampliado para viejos y nuevos temas}

·Por Kseso ✎ 8
formulario antes de los comentarios

Y si hay muchos... también después de ellos

En el cambio de tema del blog de este año, EsCSS theme 2018 ~ maCSSornry layout, la parte de los comentarios apenas si la he tocado. Y tampoco es cuestión de conformarse así como así.

Por lo tanto hoy decidí retomar una vieja petición de algún usuario del blog referente a la colocación del formulario de los comentarios, porque comentaba y con razón que se hace un tanto tedioso bajar hasta el último para añadir uno más a pocos que haya.

Y realmente hoy por hoy es una cuestión de lo más sencilla, al menos en mi plantilla, colocar el formulario de comentarios de Blogger antes de los comentarios.

Con la ventaja que no hace falta meterse en el código HTML de la plantilla. Podemos recurrir a CSS para lograrlo.

Antes de meternos en faena, dos importantes avisos, dos, de vital importancia:

  1. Antes de tocar nada ¡Haz copia de seguridad! de tu plantilla.
  2. Los selectores CSS necesarios dependerán del código HTML generado por la plantilla que utilices.

"Viejas Plantillas"

Yo vengo utilizando la misma plantilla base desde hace ya mucho tiempo. Plantilla que con el paso del tiempo y mis juegos acumula ya demasiadas modificaciones. Y hago esta advertencia porque el marcado HTML puede ser diferente en tu plantilla.

Paso 1: ver el HTML generado

Usa el inspector de código de tu navegador para ver el marcado HTML que genera tu plantilla al insertar el iframe de formulario de los comentarios. Y hazlo en un post que al menos tenga un comentario publicado.

En mi caso el código lo puedes ver en la imagen siguiente, captura del inspector de Chrome:

captura del código html generado para los comentarios
Captura del código html generado para los comentarios

El elemento que nos interesa está resaltado en azul. Es el <div ... class="comment-thread" ...> Es el padre de la lista ordenada (ol en la que están todos los comentarios y del <div ... class="comment-replybox-thread"> que es el elemento que contiene el formulario.

No los intentes buscar en el HTML de la plantilla. Al menos en la mía no aparecen. Son generados por Blogger al servir la página.

Paso 2: Picar el código CSS

Ya has hecho lo más difícil. Saber cuál es la caja padre de los comentarios y del formulario y cómo se llaman (atributo class) de estos elementos y sus hermanos.

Pues para lograr que el formulario de los comentarios aparezca antes que cualquiera de sus hermanos sólo tenemos que alterar el orden en que se muestran. No es necesario alterar el DOM. Y para ello nada mejor que el Flexbox. Vamos con el código:

.comment-thread { display: flex; flex-direction: column; } .comment-thread > .comment-replybox-thread {order: 1;} .comment-thread > ol {order: 2;} .comment-thread > .loadmore {order: 4;}

Como es lógico este CSS se ha de añadir en el elemento style que contiene los estilos que aplican a los comentarios.

El resultado de algo tan sencillo como añadir estas tres reglas CSS lo puedes ver en la imagen inicial del post y abajo en los comentarios si hay alguno.

Formulario contacto antes de comentarios en los nuevos temas

El marcado HTML generado por las nuevas plantillas es muy diferente, y por lo tanto lo anterior hay que adaptarlo. Lo siguiente es en base al tema Contempo.

El código HTML que nos interesa, para ver su estructura y nombres de clases, es el siguiente:

<section class="comments threaded" data-embed="true" data-num-comments="20" id="comments"> <a name="comments"></a> <h3 class="title">Comentarios</h3> <div class="comments-content">...</div> <p class="comment-footer">...</p> <div class="comment-form"></div> </section>

Pues como en el caso de las viejas plantillas, todo se reduce a introducir en el CSS que controla esta parte lo siguiente:

#comments {/* Esta regla ya existe en el tema */ /* añadir lo siguiente*/ display: flex; flex-direction: column; } .comments-content { order: 4; } .comment-form { order: 3; background: #fff; position: sticky; top: 3rem; z-index: 5; }

Supongo que tienes claro para qué son el resto de las declaraciones (además de order). Dejando el formulario de contacto siempre en la parte superior mientras los comentarios se desplazan bajo él nos ahorramos el paso de tener que investigar y modificar el código de la plantilla para incuir un segundo formulario al final de todos los comentarios.

Comment box antes de los comentarios y siempre visible enlos nuevos temas de Blogger
Comment box antes de los comentarios y siempre visible enlos nuevos temas de Blogger

Nuevos temas: vía modificación del código HTML de Blogger

La segunda forma de colocar el formulario para comentar ants de los comentarios es modificando el código de l aplantilla.

Sólo tienes que localizar el <b:includable id='threadedComments' var='post'>. Al desplegarlo localiza el siguiente código:

<p class='comment-footer'> <b:if cond='data:post.allowNewComments'> <b:include data='post' name='threadedCommentForm'/> <b:else/> <data:post.noNewCommentsText/> </b:if> </p>

Córtalo y pégalo justo después de <b:include name='commentsTitle'/> y antes de <div class='comments-content'> de tal manera que te quede tal como se ve en la imagen siguiente:

Imagen del código de Blogger después de la modificación
Imagen del código de Blogger después de la modificación

Y si hay muchos también tras ellos

Esta parte, de momento, sólo es válida para las plantillas tradicionales.

Pero si lo dejamos así tendremos otro problema: en caso de haber unos cuantos comentarios si hacemos scroll hasta el último ahora nos tocará subir para añadir el nuestro.

Así que aquí va cómo poner también el formulario para comentar después del último comentario... si hay más de 'N' comentarios. Siendo 'N' cualquier número que desees para tu blog.

En mi plantilla hay dos widgets que aplican a la hora de mostrar los comentarios:

<b:includable id='comments' var='post'>...</b:includable> <b:includable id='threaded_comments' var='post'>...</b:includable>

Sobre el que he tenido que actuar es sobre el segundo id='threaded_comments'

Al desplegarlo localicé el siguiente código:

<div id='comment-holder'> <data:post.commentHtml/> </div>

Y tras el <data:post.commentHtml/> y antes del cierre del 'div' añadí el iframe que Blogger convierte en un nuevo formulario de contacto:

<b:if cond='data:post.numComments >= 3'> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='350' id='comment-editor' name='comment-editor' src='' width='100%'/> </b:if>

Con el condicional que uso <b:if cond='data:post.numComments >= 3'> le estoy indicando que cree el nuevo formulario de contacto tras los comentarios sólo si hay 3 o más comentarios.

Y para terminar y que todos los formularios luzcan igual (el superior y original, el inferior añadido y el que se muestra al dar a 'responder' a algún comentario de los existentes) sólo es cuestión de añadir una declaración CSS más a los estilos que aplican a los comentarios:

ol .blogger-comment-from-post iframe, .comment-thread > .comment-replybox-thread:not(:empty), .comment-form iframe { background: #fff; display: block; border: 2rem solid var(--negroC); min-height: 350px; margin-bottom: 2rem; }

En las diversas pruebas que he podido hacer no he observado mal funcionamientos ni por colocar el formulario de comentarios de Blogger antes que el hilo de comentarios ni por el formulario añadido al final de los mismos.

Debido a la transformación que hace Blogger de este iframe, creo que vía algún script, no he sido capaz de lograr que el formulario inferior se oculte al lanzar el de respuesta a uno ya existente. Pero creo que es un detalle menor.

Ya comentaréis si veis práctica este novedad, si os funciona correctamente o si por el contrario es una p**da por algún bug que no haya detectado.

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso