2 trucos para el área de comentarios

11.9.17

Coding

Los comentarios son sin duda el alma de cualquier blog, nos nutren de experiencias y de otros puntos de vista.

Por ello, es de suma importancia contar con un área de comentarios que sea agradable a la vista y de uso sencillo e intuitivo para los visitantes.

Si has optado por usar el sistema nativo de comentarios anidados (threaded commenting system) de Blogger, opcionalmente puedes configurar tu área con los siguientes 2 trucos que te comento:

⚠ Recuerda siempre hacer copia de seguridad de tu plantilla ANTES de aplicar cualquier tutorial.

1. Una imagen personalizada para comentarios sin su propio avatar (o migrados).

Si un comentarista no utiliza su cuenta Google notarás que no hay avatar disponible, sólo queda un espacio blanco.

Bueno, ese espacio no está realmente en blanco, es una imagen transparente (GIF) que nos coloca Blogger en sustitución del avatar. Y este GIF también funciona como avatar cuando el comentario viene de una importación de contenido.

También está que quien comenta en el blog sí tiene una cuenta Google pero NO un perfil configurado en G+ ni Blogger y su avatar será entonces el logo de Blogger.

Para estos casos he elaborado unas sencillas líneas en el CSS, que afectan a sólo los avatares de ambas situaciones:

.comment .avatar-image-container img[src$="img/blank.gif"] {
background: url(URL DE TU IMAGEN) no-repeat;
}
.comment .avatar-image-container img[src$="jSZ82UPq5w6hJ-SA=s35"] {
-moz-box-sizing: border-box;
box-sizing: border-box; 
background: url(URL DE TU IMAGEN) no-repeat;
width: 35px;
height: 35px;
padding-left: 35px; 
}
Recuerda colocar la url de tu imagen, previamente subida a Blogger (u otro hosting de imágenes) y ASEGURARTE que el fragmento de dicha url que controla el tamaño de la imagen sea s35-c ya que es la medida estándar que implementa Blogger.

Anteriormente ofrecía un método mediante Jquery realizar esta tarea, pero hacerlo con CSS es mucho más óptimo.


2. Formulario para comentar, antes que los mismos comentarios

Algo muy típico del sistema propio de Blogger, es que nos muestra los comentarios ya hechos antes de la caja para poder hacer el propio comentario.

Pienso yo, que se debe a que así podemos conocer lo que otros han opinado y lo que el blogger ha replicado a fin de no ser repetitivos.

Pero es cierto, que entre más comentarios (hurra por el blogger) tenga la entrada en cuestión, tendremos un tantito de trabajo en hacer scroll para llegar al formulario y puede ser algo tedioso.

Si consideras que es importante mostrar primero el formulario, basta con cambiar unas cuantas líneas en tu plantilla.

Localiza en tu plantilla el b:includable cuyo id es threaded_comments y dentro busca lo siguiente:

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

Generalmente, está abajo de <div class='comments-content'> y lo único que hay que hacer es cortar el código anterior, y pegarlo sobre este div.

Voilá, tendrás el formulario sobre los comentarios realizados. Pero si haces uso de un titulillo tipo 'han comentado', cuida de pegar el código del formulario sobre este, sino se verá raro todo.


- - -


Como ves, son dos sencillos trucos para el área de comentarios en tu blog, que podrían marcar la diferencia en la experiencia del usuario. Y también recuerda que puedes personalizar el formulario mismo, siguiendo este tutorial mío.

Actualizado en Julio 2018




yo, cyball

Escrito por Cyball Ruiz

Creadora de ANMATT Studio donde encuentras recursos y consejos para tu espacio en Blogger.






Otros artículos...