x About... Servicios Portfolio BLOG Mis guest posts Contacto Codificando tu estilo
- 26.6.17 - Tutorial

Formulario de comentarios en Blogger, a tu estilo

formulario de comentarios en Blogger

ACTUALIZADO EL 6/7/17 debido a las mejoras internas de Blogger que afectan los skins.
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, con tutorial incluido.

Pero debido a las mejoras realizadas en Blogger, dicho cambio dejó de funcionar obteniendo una página de error donde se suponía que iba el formulario. Adiós trabajo realizado.

Sin embargo, debido a mi ya mencionada testarudez, nuevamente pude tener los formularios activados, y aún mejor, más acordes con los estilos de cada uno de mis sitios. 

Por ello, en vez de reeditar el tutorial anterior, he desarrollado este paso a paso.

Te muestro los dos posibles resultados según mis personalizaciones, que tú también podrás realizar.
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:

<div class='comment-form'>
         <a name='comment-form'/>
         <b:if cond='data:mobile'>
         <b:else/>
         <p><data:blogCommentMessage/></p>
         <data:blogTeamBlogMessage/>
         <a expr:href='data:post.commentFormIframeSrc + &quot;&amp;skin=contempo&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%'/>
         </b:if>
         <data:post.cmtfpIframe/>
         <script type='text/javascript'>
         BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);
         </script>
         </div>  

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'>
<script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
         <b:template-script inline='true' name='threaded_comments'/>
         <script type='text/javascript'>
         blogger.widgets.blog.initThreadedComments(
         <data:post.commentJso/>,
         <data:post.commentMsgs/>,
         <data:post.commentConfig/>);
         </script>
 <script async='async' src='https://www.blogger.com/static/v1/jsbin/2919819878-comment_from_post_iframe.js' type='text/javascript'/>
</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) cuales variables son las que debes agregar a tu plantilla, y esto es ensayo y error. O puedes también solicitar mi servicio de ajuste y aplicación personalizada de tutoriales.

La otra opción sería volver al estilo básico, y para ello debes hacer los siguientes pasos:
  • En el Paso 1, edita el expr:href que contiene el skin para que quede así: expr:href='data:post.commentFormIframeSrc'
  • El Paso 2 lo puedes dejar tal cuál, es en realidad una mejora en tu carga y peso del blog.
  • En en Paso 3, debes eliminar todas las variables que agregaste.





Se ha comentado...
  1. Pues a mí al instalar lo del skin, me da problemas. Me sale:

    Invalid variable declaration in page skin: Two variables must not have the same description. Input: Font

    ¿Alguna solución?

    ResponderEliminar
    Respuestas
    1. Hola Sandra, esto sucede porque ya tienes declaradas variables en tu plantilla y coinciden, intenta nuevamente y en esta ocasión elimina la repetida en el código que te facilito. Si funciona entonces el skin, este tomará la fuente que tengas ya predeterminada con esa variable. (Las variables son las que activan el Diseñador de Plantillas). Gracias por la observación, como trabajo directamente sobre el Editor HTML no caí en cuenta en esta posibilidad.

      Eliminar
    2. Aquí estoy de nuevo. Nada, puse el código, quité lo de la fuente, sí me dejó guardar, pero cuando entro en el post, me sigue saliendo igual la caja de los comentarios..

      Eliminar
    3. Viendo el código fuente de tu blog, sí veo que agregaste las variables, pero en el enlace que crea el iframe del formulario no está generado el skin.

      Verifica que los pasos 1 y 2 estén completos, quizá al intentar por segunda vez la plantilla los omitió. Recuerda que los códigos deben coincidir, si usas soho con variables contempo tendrás error, cosas de Blogger...

      Eliminar
    4. Es raro, porque antes de hacerlo actualicé la página. Lo vuelvo a intentar de nuevo y disculpa por todas las molestias que te esté causando :(

      Eliminar
    5. Pues he ido a mirarlo y sí que está cambiado, pero no se aprecian los cambios. Quizás es debido a la plantilla, no lo sé :(

      Eliminar
    6. Si gustas podría revisar tu plantilla, de ser así envíame invitación a tu blog al usuario hola(arroba)cyballruiz(punto)com

      Eliminar
    7. Dejo aquí la explicación a este dilema:
      1. Asegurarse de que las variables NO queden dentro de un comentario /* ... */
      2. Ver que el enlace que crea el formulario (Paso 1), sea el que está fuera de la condicional para móviles. Explicado mejor en el post.

      Saludos ;)

      Eliminar
    8. Más tonta y no nazco :(
      Gracias por tu ayuda, la verdad es que ni miré que estuviese cambiando lo del móvil. De nuevo, muchas gracias!!

      Eliminar
    9. Vale, pues otra vez estoy de nuevo por aquí. La cosa es que iba todo bien, pero justo acabo de subir un post nuevo y veo que no sale la caja para comentar. Total que he puesto todo como estaba antes, ya que tengo la plantilla en el blog de pruebas, pero sigue sin salirme la caja por ningún lado :(

      Eliminar
    10. Es una lástima en verdad, hasta he descargado tu misma plantilla y probado, y si bien en principio 'aparenta funcionar' el tutorial, apenas debe generar el comentario da error. Me temo que es debido a la construcción misma de la plantilla, algún elemento genera el error.

      Eliminar
    11. No te preocupes, bastante hiciste. Debe de ser algún script o algo, pero mira me quedo como estoy. El problema es que me dejó de funcionar, así que me tocó descargar la plantilla de nuevo e instalarlo otra vez todo, ya que nunca hago copias de seguridad, pero bueno, te agradezco todas las molestias que te tomaste conmigo!!

      Eliminar
    12. Bueno, cómo me preocupo mucho porque mis tutoriales funcionen, he dado con el 'problema' y actualicé el post. En resumen: mejoras de Blogger al tema Contempo que afecta al skin del mismo nombre (y que escogiste para tu blog). Y para nada son molestias, son como retos para mí y eso me gusta ;)

      Eliminar

Dejar comentario

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *