Mensaje del formulario para comentarios anidados siempre visible

Junto con los nuevos comentarios anidados surgieron un buen número de problemas menores -algunos mayores- que más o menos se fueron solucionando. Sin embargo no había encontrado la manera de que el mensaje que se puede programar desde el escritorio para que acompañe al formulario de entrada, se viera también en la cabecera de este cuando se trataba de una respuesta. Siempre permanecía abajo del todo perdiendo su efecto informativo.

Hubiera sido fácil arreglarlo con CSS si un iframe admitiera añadirle un content mediante :before, pero un marco de ese tipo es muy puñetero y yo al menos no encontré la manera. Principalmente porque según he leído :after y :before se sitúan dentro del elemento principal y, en un principio, en un iframe no se puede escribir nada.

Así las cosas pensé en hacer algo con JavaScript, pero mientras me peleaba con jQuery encontré un sistema en Duypham (blog vietnamita para más señas), que simplemente cambiaba un poco el script de Blogger que genera los comentarios y conseguía un resultado más que bueno. Con él el mensaje siempre aparece arriba del formulario sea dónde fuere que se encuentre este.

Ahora que parece que el sistema es estable y que terminaron los cambios, sí que me atrevo a cambiar cosas de ese JavaScript, así que vamos a ver lo que hay que hacer. Sólo necesitamos dos breves pasos.


1El primero comienza localizando esta línea en nuestra plantilla (con artilugios expandidos). Sólo hay una línea como esta así que supongo la encontraréis sin problemas.

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

Pues bien, ese es el principio de un includable o rutina de Blogger que hace una tarea y a la que se puede recurrir usando un include (esto es sólo cultura general).

La rutina completa es la que viene a continuación y en ella hay que insertar las dos líneas marcadas en verde y que son la apertura y cierre de un div con una id='mensajeform' (podéis usar cualquier otro nombre). Esto no causa ningún efecto en el blog, pero si os equivocáis de lugar o metéis algún carácter de más o de menos, obtendréis un bonito error BX o algo peor, así que ya sabéis aquello de "Guarde una copia de seguridad de su plantilla antes de empezar con los experimentos".

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

2Ahora viene lo de modificar el script original de Blogger, pero también se trata de una sustitución muy sencilla. En este caso localizamos la línea...

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

...y ese replybox se cambia por un document.getElementById ('mensajeform'). Sin más, para que quede así:

document.getElementById(domId).insertBefore(document.getElementById ('mensajeform'),null);

Pues ya está todo. El mensaje que hayamos grabado perseguirá al formulario y se mostrará encima de dónde este vaya apareciendo. Podéis hacer la prueba ahora mismo en esta u otra entrada del blog porque instalé este sistema hace unos días.

---

Como efecto secundario pero beneficioso, ahora podremos darle estilo fácilmente al mensaje. Para ello sólo tenemos que añadir a la parte CSS de nuestra plantilla la clase #mensajeform con las propiedades que gustéis. Por ejemplo:

Actualización: Gracias a un pequeño debate con Valentin y Svalin en los comentarios, descubrimos que en las entradas sin comentarios el estilo no salía como en las que sí los tenían. Para que todo funcione igual hay que añadir un segundo selector que ya aparece en el código a continuación (.comment-form).

Además, también surgió una idea sencilla para mostrar una imagen que podemos diseñar al gusto y que consiste simplemente en sustituir el background: white; por un background: url(IMAGEN_FONDO);.

#mensajeform p, .comment-form p {
position: relative;
margin:5px auto;
padding: 4px;
border: 2px solid black;
text-align: center;
color: black;
background: white;
}
#mensajeform p:after, .comment-form p:after {
content: "";
position: absolute;
bottom: -10px;
left: 10px;
width:0;
height:0;
line-height:0;
border-top: 10px solid black;
border-left: 10px solid transparent;
}

Bueno y por supuesto para que salga un mensaje ahí, primero hay que grabarlo en el escritorio...

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter