Formulario de comentarios de Blogger antes de los comentarios {Ampliado para viejos y nuevos temas} 28.8.17
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}
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:
- Antes de tocar nada ¡Haz copia de seguridad! de tu plantilla.
- Los selectores CSS necesarios dependerán del código
HTMLgenerado 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:
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.
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:
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.
.
Y si ya hay 3 o más comentarios también mostrarlo después de ellos con sólo código nativo de Blogger.){kind=link}
Kseso
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
Me vas a hacer famoso ¡hasta ponés mis comentarios como ejemplo en la imágenes! 😁
ResponderEliminarMe quedé pensando en eso de ocultar un formulario cuando se usa el otro, y no sé si estaré regando fuera del cantero, porque no tengo Blogger y ni tengo donde estudiar el asunto, pero... ¿agregando un 'focus' en uno para que cambie el 'display' del otro, no funcionaría? Me parece que se puede apuntar al último con CSS, y si van a usar los que están en el interior de los comentarios, les van a tener que poner foco, de otra forma no se puede escribir.
Bueno, en cualquier caso, coincido en que es un detalle menor. Solamente a vos se te puede ocurrir fijarte en eso.
Un gran abrazo.
Muy interesante esta idea. Se me ocurre que se podría ampliar para mostrar los comentarios en orden inverso, de más nuevos a más antiguos. Hasta permitir que el usuario seleccione su preferencia con un input y :checked. E incluso guardar la preferencia con la ayuda de cookies o localStorage en Javascript...
ResponderEliminarSobre el iframe siempre visible al final, pocas mejoras se me ocurren usando únicamente CSS. Las pseudoclases :focus y :active no tienen efecto en este elemento y ocultarlo :hover no serviría de mucho. Con JS se podrían controlar los clicks en los botones y actuar en consecuencia pero, como tú dices, tampoco es un detalle tan importante.
Por cierto, estéticamente quedaría mejor si el botón "Cargar más" tuviera el mismo estilo que los botones de "Responder", además de ocultarlo cuando no haga falta (Blogger ya le añade la clase "loaded" para ello).
Saludos.
Gracias Jorge
EliminarSí, definitavemente no amerita más vueltas. Más que nada por la escasa actividad que genera el blog es esta sección xD
Y menos aún teniendo que lidiar con la forma en que Blogger maneja la caja de comentarios. Incluido que sea en un iframe
Ya en su momento desistí de enriquecerla con funcionalidades para facilitar la inclusión de negritas, itálicas... incluso para los códigos, pens e imágenes.
Y el "Cargar más" sí, se había quedado por ahí olvidado :palm: Corregido.
Un saludo
Pensaba igual que Jorge, excepto que el fue más allá e incluso pensó en acomodar todo al gusto del lector.
EliminarRespecto al nuevo tema había estado algo alejado de varios blogs incluido éste y entrar y ver todo lo nuevo me hace sentir cual niño en juguetería. Se me hace muy interesante el diseño de los títulos y aún no me he dado una vuelta por el código pero algo me dice que ese bonito fondo está formado por imágenes SVG.
Con esto de mover de lugar la caja de comentarios también se me ha pasado por la mente algo pero lo dejaré en un comentario aparte.
Luego de ver éste movimiento que hasta éste momento pensaba que era imposible se me ocurre cambiar de lugar otros elementos como la primera imagen del post. Algo como lo hecho en algunas plantillas al implementar el leer más con JS externo pero que funcione no sólo en la portada sino también en las páginas individuales aunque no sé si sea algo tan sencillo como copiar los códigos de ésta entrada y tratar de adaptarlos pues supongo que las imágenes de los posts no funcionan de igual modo que el formulario de comentarios.
ResponderEliminarAntes me sentía bastante experimentado con CSS pero cada vez que leo un artículo tuyo siento que me falta muchísimo por aprender y eso me encanta porque me motiva a leer cada nueva entrada e investigar e intentar cosas por mi cuenta, espero que nos sigas trayendo contenido con tan buena calidad no sólo de parte tuya sino también de Furoya y demás colaboradores.
¡Saludos!
Gracias Sergio
EliminarEn la plantilla sí puedes modificar casi todo lo que se te ocurra, excepto aquello que Blogger sigue insertando vía iframe como el formulario de contacto, bien toqueteando el código nativo, vía CSS o javascript.
Pero en las entradas (redacción de los artículos) los códigos nativos de Blogger no funcionan (los data, includes...).
No se tras qué idea andarás, pero si es con vistas a alterar el contenido en el cuerpo de un post tendrás que recurrir o bien a CSS o javascript.
Una de las carencias principales de Blogger que yo encuentro es precísamente el panel de control ysobre todo la gestión global del contenido.
Un saludo