- 22.3.17 - Tutorial

Renueva el estilo del Formulario de Comentarios de Blogger

formulario de comentarios en Blogger

Esta semana ha sido de novedades para quienes usamos y trabajamos con la plataforma +Blogger y es que este lunes han lanzado 4 nuevos juegos de plantillas responsives.

Enhorabuena por esto, por todo el trabajo que han realizado los desarrolladores y que nos demuestra que a pesar de los malos augurios de quienes insisten en mostrar a Wordpress como panacea y 'aconsejan' a diestra y siniesta pasarse a dicha plataforma por el inminente cierre de Blogger, éste sigue en buen pie.


Son muchos los cambios en la construcción de estos juegos de plantillas, cada uno con 5 variantes en tonos e imágenes; pero el más destacable para mí y el único que envidié al instante es el aspecto del formulario de comentarios de Blogger, ese tan feucho (sí, hay que llamarlo como lo que es) que era capaz de romper con cualquier personalización esmerada que una hiciera.



He pasado mis momentos libres de ayer revisando minuciosamente las plantillas nuevas para pronto, y en conjunto con +Minerva Aurora de Odisea Gráfica, darte nuestras opiniones, pros, contras y consejos (está en el horno esta revisión), y también porque mi mente inquieta y pedigüeña quería entender e implementar el nuevo estilo de comentarios, ¡y lo he logrado!

Puedes verlo en pleno funcionamiento al final de este tutorial, y en mi blog personal también lo he instalado, ambas son plantillas no nativas de Blogger (la que uso aquí ha sido creada desde cero por mí).

Debido a cuestiones propias de Blogger, este tutorial tal cuál aquí descrito NO FUNCIONA, por lo que he desarrollado uno nuevo, que incluye algunas mejoras como mayor personalización.

Pasa ya a conocer como tener un formulario más acorde con tu estilo en

O puedes volver al estilo clásico, al editar en el Paso 1 la tag <a> dejándole así:
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

Si también quieres dejar el anterior estilo del formulario de comentarios en el olvido, sigue leyendo.


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

Paso 1

Ir a Tema > Editar HTML, localizar <b:includable id='threaded-comment-form' var='post'> y REEMPLAZAR todo el contenido entre este y </b:includable> 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>


Paso 2

En el siguiente <b:includable cuyo id es 'threaded_comment_js' hay que hacer lo mismo que en el paso anterior,  REEMPLAZAR todo con el siguiente código:

<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'/>


Aquí nos encontramos con una ligera mejora, pues el script para el formulario anterior estaba incluido dentro de la misma plantilla, ahora lo tendremos mediante una carga externa asíncrona lo que disminuye el peso de nuestra página y también mejora su carga.

¿Qué hay que editar?

Solamente en el Paso 1 se debe cambiar lo que he resaltado en rosa, y esto es el skin que dará uno de los nuevos 4 estilos a nuestro formulario, sin eso no habría ningún cambio estético.

Puedes escoger entre los siguientes:

contempo


emporio


notable


soho




Cuando escojas el skin que más se adapte al estilo general de tu blog, sólo sustituye contempo por la palabra que está como leyenda de la imagen, en minúsculas.

Por ahora, los colores y fuente del formulario NO se puede editar, es lo mismo que con el estilo antiguo. Pero es un paso enorme el que han dado los desarrolladores de Blogger al dar esta funcionalidad a las nuevas plantillas y espero que mi esfuerzo por desentrañar la manera de implementarla en las plantillas personalizadas o desarrolladas por terceros sea de utilidad para ti.

Te agradeceré inmensamente si compartes este tutorial, no toma más que segundos hacerlo 😉





¿Quieres mejorar el diseño de tu sitio?

Suscríbete al newsletter y consigue una asesoría express gratuita


Dejar comentario



Se ha comentado...
  1. Hola!!
    Pues me ha funcionado a la perfección, así que muchas gracias por el tutorial. Ya está puesto en mi blog :)
    Solo faltaría poder cambiar el color, pero en fin, no se puede tener todo!!
    Besos :33

    PD: Por supuesto que lo comparto ^^

    ResponderEliminar
    Respuestas
    1. Me alegra mucho Sandra que te hay funcionado bien el tutorial, es mi objetivo. Y sí, creo que seríamos muchos quienes agradeceríamos más control sobre el estilo del formulario. Gracias mil por compartir :D

      Eliminar
  2. Muchísimas gracias, me ha servido mucho, estaba deseando poder cambiar el formulario de comentarios y con tu ayuda ha queda genial. ;)

    ResponderEliminar