Mensaje del formulario de comentarios, siempre visible y personalizado

Con los comentarios anidados muchas de las caracteristicas personalizadas que se tenian en los otros comentarios se perdieron y entre ellas el mensaje del formulario de comentarios que solo se veía en las entradas sin comentarios mientras que en las entradas con comentarios ya este mensaje no se veía, esa fue una de las razones por las cuales desactive el mensaje.

Luego de tanto buscar una solución efectiva para este pequeño problema, encontré la solución en Oloblogger que a su vez encontró la solución en el blog vietnamita Duypham, y la verdad que es muy practica, solo haciendo cambiando algunas pequeñas lineas de JavaScript se arregla todo este lió.

En mi caso, he dejado el mensaje del formulario de la siguiente manera:


Para agregar este pequeño truco a tu blog sigue los siguientes pasos:

En plantilla, Editar HTML busca la siguiente linea:

<b:includable id='threaded-comment-form' var='post'>

Con la anterior linea identificaras un bloque de codigo como el siguiente:

 <b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='240' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<div id='mensajeform'><!-- Apertura --><p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='240' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div><!-- Cierre --></b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
</script>
</div>
</b:includable>
Donde tendrás que agregar las lineas resaltadas en negrita y color azul, de tal manera que quede como el bloque de códigos anterior.
Ahora lo que viene es modificar el script de los comentarios, para ello busca la siguiente linea:

document.getElementById(domId).insertBefore(replybox,null);

Cambia  replybox por  document.getElementById (‘mensajeform’) quedando la anterior linea de la siguiente manera:

document.getElementById(domId).insertBefore(document.getElementById (‘mensajeform’),null);

Con esto hemos terminado el truco y ya aparecerá el mensaje del formulario de comentarios que hayas escogido en el escritorio de Blogger cada vez que vayas a comentar.

Pero dado a que desde el escritorio de Blogger solo se puede añadir texto, les enseñare también como agregar imágenes para que sea aun mas atractivo el mensaje.

Para agregar imágenes o cualquier otro contenido busca la etiqueta:

<div id='mensajeform'><!-- Apertura -->

Debajo de ella añade lo siguiente:

 <img src="URL DE LA IMAGEN"/>


Reemplazas “URL DE LA IMAGEN” por la URL de tu imagen y listo guardas los cambios.

Esto es solo una pequeña muestra de como se puede personalizar el formulario, ya que podrás agregar muchas cosas, incluso CSS.
0
Shares

45 thoughts on “Mensaje del formulario de comentarios, siempre visible y personalizado

  • mayo 14, 2013 en 10:17 pm
    Permalink

    Buen tutorial Juvinao! como siempre eres un crack!. Por cierto la plantilla que tuvistes antes de la de estilo Facebook… Podrias compartirla? es una que tu logo de mil trucos blogger aumentaba.. m e gustaria tenerla para empezar a hacer tutoriale y me gustó el estilo y no quiero que sea muy elegante jeje.

    Un saludo.

    Responder
  • mayo 28, 2013 en 7:19 pm
    Permalink

    muy bueno amigo pero solo me funciona en las entradas que ya tienen comentarios en las que no tienen no parace la imagen ¿alguna solucion?

    gracias

    Responder
    • junio 5, 2013 en 3:48 pm
      Permalink

      Es cierto, es un pequeño error en el código, en estos días haré una actualización de la entrada.

      Saludos

      Responder
    • junio 10, 2013 en 10:23 pm
      Permalink

      gracias por tu repuesta amigo estare esperando ese nuevo codigo

      Responder
    • enero 22, 2014 en 2:48 am
      Permalink

      Me pasa lo mismo, ha quedado perfecto pero sólo se ve la imagen cuando el post ya tiene comentarios. En la plantilla tengo un montón de “replybox” ¿será que tengo que reemplazar algún otro? 🙂
      Gracias por el tutorial, me ha servido de mucho.
      ¡Saludos!

      Responder
    • enero 23, 2014 en 9:12 pm
      Permalink

      Lo que pasa es que hay que añadir una condicional especial que he pasado por alto, en breve actualizare la entrada.

      Saludos

      Responder
    • enero 27, 2014 en 2:09 am
      Permalink

      Ah, es eso. Entonces esperaré, pero mientras tanto ha quedado muy lindo. Muchas gracias por las instrucciones.

      Responder
    • febrero 16, 2014 en 11:27 pm
      Permalink

      Hola.
      No sé si actualizaste la entrada con esa condicional especial, pero yo lo he seguido al pie de la letra y me ocurre lo mismo que a Jaz y a los otros.
      ¿Puedes decirme cómo solucionarlo?

      Responder
    • febrero 18, 2014 en 9:42 pm
      Permalink

      Teniendo en cuenta que te escribí hace un par de días y que ya has escrito dos entradas desde entonces, deduzco que simplemente no sabes solucionar este problema. No pasa nada, pero sólo tienes que decirlo.
      Un saludo.

      Responder
  • junio 3, 2013 en 4:22 am
    Permalink

    oye porqué me sale que está mal esta parte cuándo la guardo:
    ” < / div > < ! — Cierre –> < / b : i f > ” responde porfa

    Responder
  • junio 3, 2013 en 4:23 am
    Permalink

    me sale:
    Error al analizar XML, línea 1543, columna 9: The element type “p” must be terminated by the matching end-tag “< / p >”. dime que hago o que hice mal

    Responder
  • junio 14, 2013 en 1:04 am
    Permalink

    Osea si funciona pero solo se ve fija la imagen de “Mostrar emoticones”, pero que falta para que al hacerle clic solbre la imagen ” aparezca la otra imagen donde estan todos los emoticones”

    Responder
  • junio 20, 2013 en 9:24 pm
    Permalink

    Hola gracias por tu aporte ,modifique el codigo html ,javascrip no agregue imagen , no me interesa ,pero al cerrar el blog y volver a habrir no deja visibles los comentarios ,muestra un link con la cantidad de comentarios ,me gustaria que queden visibles te dejo la direccion del blog http://ganardineroanuncio.blospot.com.ar ,verifique el codigo y quedo como deberia agradesco tu ayuda

    Responder
  • junio 20, 2013 en 9:30 pm
    Permalink

    gracias por tu aporte implemente el codigo como lo publicaste pero los comentarios no quedan visibles cuando cierro el blog muestra un link con la cantidad de comentarios te dejo la direccion del blog
    http://ganardineroanuncio.blogspot.com.ar agradesco tu ayuda

    Responder
  • agosto 6, 2013 en 10:24 pm
    Permalink

    amigo podrias poner video de como lo agregaste tu?
    porque yo pongo en mi blog y me sale un error o no se donde poner

    Responder
  • septiembre 4, 2013 en 3:29 pm
    Permalink

    Gracias Juvinao, y cuando tengas un momento me cuentas como dejar los comentarios abiertos como estan en tu blog? con la línea pequeña que dice cuantos hay, me responden al email y no quedan rastros del paso por el blog. Gracias!

    Responder
  • octubre 3, 2013 en 3:06 pm
    Permalink

    Rayos. A mi no me salio. Lo intente varias veces y no ocurre nada. Me pregunto si será porque mi plantilla es personalizada.

    Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *