Devitácora

Un blog informático

Obtener la nueva caja de comentarios de Blogger

Una de las cosas que me llamó la atención de los nuevos temas de Blogger fue el diseño de la caja de comentarios, mucho más simpático que el tosco formulario que me hacía utilizar. Obtenerlo sin tener que cambiar mi vieja plantilla resultó ser muy sencillo, bastó con buscar las siguientes líneas en ella:

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

Y añadir como parámetro el nombre del tema deseado:

<a expr:href='data:post.commentFormIframeSrc + &quot;&amp;skin=contempo#%7B%7D&quot;' id='comment-editor-src'/>

Los temas para elegir son: contempo, soho, emporio y notable.

Actualización (02/06/17): el 19 de mayo me percaté que la nueva caja de comentarios ya no aparecía en mis entradas, en su reemplazo me mostraba un mensaje de error. Hoy decidí atender el caso y descubrí que el formulario ahora requiere la definición de determinadas variables. Lo siguiente debe ir dentro de <b:skin><![CDATA[/* y */]]></b:skin> para ponerlo en marcha con el tema contempo:

<Group description="Page Text">
  <Variable name="body.text.font" description="Font" type="font" default="15px Roboto, sans-serif"/> <!-- fuente del texto -->
  <Variable name="body.text.color" description="Color" type="color" default="#444"/> <!-- color del texto -->
</Group>
<Group description="Backgrounds">
  <Variable name="body.background" description="Background" type="background" default="#fff none repeat scroll top left"/>
  <Variable name="posts.background.color" description="Post background color" type="color" default="#fff"/> <!-- color del fondo -->
</Group>
<Group description="Links">
  <Variable name="body.link.color" description="Link color" type="color" default="#2196f3"/> <!-- color de los enlaces -->
</Group>
<Group description="Tabs text" selector="div.widget.PageList">
  <Variable name="tabs.font" description="Font" type="font" default="15px Roboto, sans-serif"/>
</Group>
<Group description="Posts" selector="div.widget.Blog">
  <Variable name="posts.title.color" description="Post title color" type="color" default="#212121"/>
  <Variable name="posts.text.color" description="Post text color" type="color" default="$(body.text.color)" value="#757575"/>
  <Variable name="posts.icons.color" description="Post icons color" type="color" default="#707070"/> <!-- color de los iconos como el del "checkbox" de suscripción -->
</Group>
<Group description="Labels" selector=".widget.Label">
  <Variable name="labels.background.color" description="Label background color" type="color" default="#f7f7f7"/>
</Group>

Lo anterior no funciona si el tema elegido es distinto al contempo, he de suponer que cada uno requiere su propio juego de variables. No he profundizado en ese asunto por no ser de mi interés, pero es cuestión de probar.

Es posible que algunas variables del código anterior ya estén definidas en la plantilla, en esos casos Blogger arrojará el error Variable name must not be declared twice al intentar guardar los cambios. Para solventar el conflicto, simplemente se retira la variable (línea completa).

Lo curioso es que seguía sin ver la caja de comentarios en este blog, pero en los de pruebas funcionaban a la perfección. Me tocó descargar mi vieja plantilla (opción Crear/Restablecer copia de seguridad en la sección Temas), aplicar uno de los nuevos temas de Blogger a mi blog y luego restablecerlo con la copia de seguridad que había descargado. No entiendo aún el porqué, pero fue necesario hacer eso.


search-icon home-icon blog-icon about-icon envelop-icon calendar-icon tag-icon comment-icon share-icon gmail-icon blogger-icon twitter-icon facebook-icon printer-icon link-icon list-icon rss-icon logo-icon