Formulario de Comentarios, con tu estilo

26.4.17

Coding

Cuando en marzo pasado se lanzaron los nuevos temas de Blogger, me dediqué a obtener la manera de implementar uno de los nuevos estilos para el formulario de comentarios y al día siguiente del lanzamiento de Google, ya mis sitios tenían esta novedad implementada.

Pero debido a las mejoras realizadas en Blogger, lo que se agradece, dicho cambio dejó de funcionar hace poco obteniendo una página de error donde se suponía que iba el formulario.

La ventaja de esta actualización es que se pueden tener el formulario ahora más acorde con el estilo del blog, pues se pueden configurar mediante variables en el Editor.

Por ello, en este tutorial te muestro los dos posibles resultados para que le implementes en tu blog, según dos skins que he escogido, de entre los cuatro disponibles.
Skin Contempo


Skin Soho



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

Blogger como plataforma hace actualizaciones de manera interna y poco promocionadas, por lo que si notas que tu caja de comentarios deja de funcionar, se debe a la falta de alguna variable del skin escogido. Puedes ir a Nota para ver cómo solucionarlo.


Paso 1

Ir a Tema > Editar HTML, localizar el <b:includable id='threaded-comment-form' y SUSTITUYE todo su contenido con el siguiente código:
        <b:includable id='threaded-comment-form' var='post'>
        <div class='comment-form'>
         <p><data:blogCommentMessage/></p>
         <data:blogTeamBlogMessage/>
         <a expr:href='data:post.commentFormIframeSrc + &quot;&amp;skin=soho&quot;' id='comment-editor-src'/>
         <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='110px' id='comment-editor' name='comment-editor' src='' width='100%'/>
         <data:post.cmtfpIframe/>
         <script>
         BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);
         </script>
         </div> 
</b:includable>  

Notarás lo resaltado en rosa, y esto es el skin que hemos de personalizar. Por cuestiones prácticas sólo he localizado el código necesario para dos de ellos: Contempo y Soho.

Si escoges Soho, sólo cambia contempo por soho, todo en minúscula.


Paso 2

Selecciona TODO el siguiente <b:includablecuyo id es 'threaded_comment_js',  REEMPLAZÁNDOLO todo con el siguiente código:
        <b:includable id='threaded_comment_js' var='post'>
   <b:template-script inline='true' name='threaded_comments'/>
   <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
         <script type='text/javascript'>
         blogger.widgets.blog.initThreadedComments(
         <data:post.commentJso/>,
         <data:post.commentMsgs/>,
         <data:post.commentConfig/>);
         </script></b:includable>

Paso 3

Según el skin que escogiste en el Paso 1, localiza <b:skin> y dentro coloca los códigos siguientes.

Skin Contempo

<Variable name="body.text.font" description="Font" type="font" default="$(fuente)" value="15px Josefin Sans, sans-serif"/> <!-- fuente -->
<Variable name="body.text.color" description="Color" type="color" default="#444"/> <!-- color  -->
<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"/> <!--  fondo -->
<Variable name="body.link.color" description="Link color" type="color" default="#992e38"/> <!-- enlaces -->
<Variable name="tabs.font" description="Fonts" type="font" default="$(fuente)"/>
<Variable name="posts.title.color" description="Post title color" type="color" default="#212121"/> <!--  títulos -->
<Variable name="posts.icons.color" description="Post icons color" type="color" default="#707070"/> <!-- "checkbox" --> 
<Variable name="labels.background.color" description="Label background color" type="color" default="#f7f7f7"/>
  <Variable name="posts.text.color" description="Post text color"  type="color" default="$(body.text.color)"  value="#757575"/>
  <Variable name="posts.byline.color" description="Post byline color" type="color" default="rgba(0, 0, 0, 0.54)"  value="rgba(0, 0, 0, 0.54)"/>
  <Variable name="blockquote.font" description="Blockquote font" type="font" default="$(robotoLightItalic15)"  value="italic 300 15px Roboto, sans-serif"/>
  <Variable name="blockquote.color" description="Blockquote color" type="color" default="#444"  value="#444444"/>

Skin Soho

<Variable name="body.background" description="Background" type="background" color="$(body.background.color)" default="$(color) none repeat scroll top left"  value="#ffffff url(https://1.bp.blogspot.com/-L1QF3AEPkCc/WUBaE0Ok8QI/AAAAAAAAJDQ/zaV2flqJrfMRa2zLQpJ_tmdHLNjdexPEwCLcBGAs/s1600/shatt.jpg) no-repeat scroll top center /* cyball  */;"/>
<Variable name="body.background.color" description="Background color" type="color" default="#fff"  value="#f7f7f7"/><!--  fondo -->
<Variable name="body.title.color" description="Title color" type="color" default="#000"  value="#000000"/><!--  títulos -->
<Variable name="body.action.font.large" description="Action font (large)" type="font" default="$(montserrat14)"  value="normal 14px Arial, sans-serif"/><!--  títulos -->
<Variable name="body.action.color" description="Action color" type="color" default="#bf8b38"  value="#bf8b38"/>
<Variable name="body.text.font" description="Text font" type="font" default="$(garamond20)"  value="normal 20px Arial, sans-serif"/><!-- fuente -->
<Variable name="body.text.color" description="Text color" type="color" default="#000"  value="#000000"/>
<Variable name="body.link.color" description="Link color" type="color" default="#bf8b38"  value="#e0384c"/><!-- enlaces -->

Como ves, sólo algunas líneas poseen un comentario, esto es lo que te indica donde puedes hacer los cambios que necesites, siempre dentro del atributo 'value'. Las que no poseen comentarios es porque no modifican nada pero siguen siendo necesarias para mostrar la skin.

Algo que hay que tener en cuenta, es que si la plantilla que tienes instalada utiliza el Diseñador de plantillas de Blogger es posible que YA tengas variables incluidas y quizá coincidan con las necesarias para el skin. En este caso, te recomiendo dejar la que ya está en tu plantilla, y ver si así funciona el skin, eso sí, con cuidado al personalizar porque los cambios podrían afectar otras partes de tu plantilla.

Ahora, ya tu formulario de comentarios tiene un poco más de tu estilo, contrario al básico de Blogger. Un avance que a mí me encanta y a tus lectores también.


Nota

Quiero aclarar algo muy importante, el nuevo estilo de los comentarios es propio de los nuevos temas lanzados por Blogger, aplicarlo a nuestras plantillas puede o no funcionar al primer intento, dependiendo de la construcción de nuestros sitios. Con gusto puedo guiarte en la resolución, sólo deja tu comentario.

Adicionalmente, al Blogger hacer actualizaciones tras el telón, puede o no afectar funcionalidades de nuestros sitios, y en este caso específico, al depender los skins del tema del que toma el nombre, si hay cambios bruscos en las variables veremos error en nuestro formulario previamente funcional con este tutorial.


¿Cómo solucionar?

Si deseas conservar el nuevo estilo y aún este tutorial no ha sido actualizado (lo intentaré siempre), pues el paliativo sería localizar en el tema original (Contempo o Soho) cuáles variables son las que debes agregar a tu plantilla, y esto es ensayo y error.

Otra opción sería volver al estilo básico, y para ello debes hacer los siguientes pasos:

  1. En el Paso 1, edita el expr:href que contiene el skin para que quede así: expr:href='data:post.commentFormIframeSrc'
  2. El Paso 2 lo puedes dejar tal cuál, es en realidad una mejora en tu carga y peso del blog.
  3. En el Paso 3, debes eliminar todas las variables que añadiste.







yo, cyball

Escrito por Cyball Ruiz

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






Otros artículos...



Se ha comentado...

  1. Hace unos días me preguntaba si era posible darle el estilo de la nueva caja de comentarios a la caja que tengo en el blog y por casualidad me he topado con tu tutorial. Hora de probar suerte y ver si es que esto funciona.

    Muchísimas gracias por la entrada Cyball.

    Saludos!

    ResponderEliminar
  2. Muy buena información! Gracias. Tienes algún tutorial para revisar el diseñador de temas de estas nuevas plantillas ?

    ResponderEliminar
    Respuestas
    1. Me alegra que te haya gustado mi escrito. Lastimosamente no tengo tutoriales sobre los nuevos temas en sí. Saludos

      Eliminar
  3. Thanks for sharing, but how without skin?

    ResponderEliminar
    Respuestas
    1. Hi Emira, sorry but the skin is very important in this case, without it you obtain error. But always you can customize the skin with your own colors and fonts... Thank for visit my site.

      Eliminar