Mensaje del formulario para comentarios anidados siempre visible | Oloblogger Junto con los nuevos comentarios anidados surgieron un buen número de problemas menores -algunos mayores- que más o menos se fueron solucion...

17 de enero de 2013

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

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

follow us in feedly

110 comentarios :

  1. Genial oloman muchas gracias todo quedo muy bien explicado, intentare aplicarlo al blog de pruebas, pero si algo falla estaré por acá para aclarar dudas :)

    ResponderEliminar
  2. Muy buen tutorial, claro y sencillo. Lo he implementado y funciona estupendamente. ¡Gracias!

    Otra cosa pendiente es un sistema para marcar lo comentarios del autor/es de una forma clara, por ejemplo con un borde de distinto color. Yo lo dejo caer y si alguien conoce una solución que lo diga ;)

    ResponderEliminar
    Respuestas
    1. Si te sirve de momento resaltar el nick...

      .comments .comments-content .blog-author a {font-size:120%;font-weight:bold;padding:2px;background:#666666;color:#ffffff;}

      Eliminar
    2. Yo lo tengo resuelto de la siguiente manera:
      Busca la línea:
      <b:loop values='data:post.comments' var='comment'>
      A continuación tendras el elemento que contiene el comentario individual (un div en mi caso), en esa expresión añades lo resaltado en negrita:
      <div expr:class='"comments " + data:comment.authorClass'>
      Ahí le añade la clase authorClass a los comentarios del autor del blog, así que vía Css ya tienes un selector específico para apuntarla:
      .comments.blog-author {}

      En mi caso hago uso del pseudoelemento :before para lograr dos cosas:
      .- Una banda de color diferente a mis comentarios
      .- Un contador css para numerar los comentarios (común a todos)

      #Blog1_comments-block-wrapper .comments.blog-author:before {
      background: #19DD89;
      }
      #Blog1_comments-block-wrapper .comments:before {
      background: #8AA9B8;
      color: #FFFFFF;
      content: "#" counter(comentario, decimal);
      counter-increment: comentario;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      z-index: 100;
      text-align: center;
      }

      También en vez de añadir una clase puedes incluirlo como un data-rel o cualquier otro atributo y usar los selectores de atributo para apuntarla con el css, con menos soporte que la clase.

      Espero te sirva en lo que Oloman encuentra una vía mejor.

      Eliminar
    3. Pues no he sido capaz de hacer la modificación propuesta por Kseso, pero he modificado un poco más el estilo del nombre... Supongo que la personalización que se podía hacer en el sistema viejo (borde, color de fondo) no es factible con los comentarios anidados, porque es algo que aún no he visto en ningún sitio. Una pena.

      Eliminar
    4. Eso ha estado muy bien pensado Kseso. Lo que me extrañaba es que Felipe al que tengo por "modificador de plantillas" avezado, no lo hubiera conseguido y es que tú ¡usas el antiguo sistema de comentarios! En ese es más fácil y como dices se puede hacer sólo con CSS, pero para el de comentarios anidados ya hay que hacer más historias.

      Hace tiempo le estuve dando vueltas y deduje que sólo era posible si pudiera controlar ascendentes, pero creo que para eso necesito jQuery (u otra librería) forzosamente.

      Eliminar
  3. Oloman², muchas gracias, me has ahorrado el trabajo, tenía entre mis pendientes buscar una solución para ésto, de hecho había quitado el mensaje del formulario porque aparecía donde no debería...bueno pues voy a probar tu propuesta ;)

    ResponderEliminar
  4. Muy bueno!!lo he probado en mi blog de pruebas y el unico detalle es que me queda mas ancho que la caja de comentarios,se puede controlar el ancho de la burbuja?
    gracias!

    ResponderEliminar
    Respuestas
    1. ¿No lo puse? Perdón, sólo hay que añadir a #mensajeform p un width en tanto por ciento. Por ejemplo, width: 80%;

      Eliminar
  5. Mi querido amigo, tanto tiempo. Excelente tutorial ya lo apliqué, cambié colores y te copié algunas medidas que pusiste para el tuyo que no están en este tutorial, o sea estuve espiando en "Inspeccionar elementos" Quedó muy bueno, pero la única diferencia que el tuyo guarda el mismo tamaño del mensaje ya lo pongas RESPONDER o AÑADIR. Es decir, cuando lo ves por primera vez ESTA PERFECTO pero si RESPONDES o tocas el botón AÑADIR toma una forma más estirada. Se entiende?
    Este es el link donde encontraras mensajes ya escritos para que al click puedas evaluar "http://kioscodecrochet.blogspot.com/2012/12/Crochet-bebes-Descarga-gratis-revistas-Kiosco-de-Crochet.html?showComment=1356155610910#c6469922874614007316"
    Espero tus comentarios, te mando un abrazo enorme.

    ResponderEliminar
    Respuestas
    1. Tambien me a mi me sucede lo mismo,y ademas los estilos a veces se ven otras no...

      Eliminar
    2. Sacerdote, es que yo tengo también adaptado el tamaño del formulario según el punto dónde se muestre y como el mensaje está con un tamaño en proporción (tanto por ciento) sobre ese espacio, pues se ve idem (proporcionalmente).

      Y Coco, no sé a qué te refieres porque lo vi en tu blog "oficial" y me pareció que estaba bien.

      Eliminar
    3. Gracias igual. Abrazo

      Eliminar
    4. Inspeciona, inspecciona. En este caso que sea el iframe de los comentarios ;)

      Eliminar
  6. Yo lo aplique y me salió bien.. solo que no se ve me ven los estilos probe de varias formas y no me los muestra :(

    ResponderEliminar
    Respuestas
    1. Acabo de observar que si me muestra los estilos, pero unicamente cuando visitas el enlace de algun comentario. Si entras a un post sin comentarios no hay estilos.. Se puede solucionar eso ? :)
      Gracias de antemano Oloman

      Eliminar
    2. Se ve que no usé todas las clases que se necesitan para cubrir ese caso, pero es que como no suelo tener posts sin comentarios (no es presunción, sino a veces un agobio) se me es escapó. Este fin de semana tengo un problema familiar añadido a otros anteriores, pero lo veo en cuanto pueda.

      Eliminar
    3. No te preocupes amigo y entiendo todo lo que me dices.
      Te agradezco las molestias.
      Saludos Oloman !

      Eliminar
    4. Javier Pujalte Egea:
      Eso pasa por que al no tener comentarios en la entrada la caja de comentarios se encuentra en la antigua zona de comentarios, por lo tanto esa área carece de una clase, yo lo solucione de esta manera

      con artilugios expandidos busca esta linea:
      <h4 id='comment-post-message'><data:postCommentMsg/></h4>
      Solo hay una línea como esa en toda la plantilla y justo debajo de esa encontraras esta otra línea:
      <p><data:blogCommentMessage/></p>

      A esa ultima línea le das una clase con el nombre que prefieras por ejemplo podría quedar de esta forma

      <div class="CommentMessage">
      <p><data:blogCommentMessage/></p>
      </div>

      ya con eso puedes darle color, tamaño etc etc

      usa esta linea en el CSS con las propiedades que elijas
      .CommentMessage {
      .......
      ....
      ..
      }
      .CommentMessage:after {
      ......
      ....
      ..
      }

      Eliminar
    5. Magoplup, mil gracias por el consejo. muy bien explicado y sencillo. Ahora mismo veo de aplicarlo :)
      Nuevamente gracias por tu ayuda compañero !

      Eliminar
    6. Eso, mil gracias, que sigo liado...

      Eliminar
  7. ayudaaaaa hola estoy trabajando en una plantilla pero ya me atore ve esta imagen la primera es vista como segun la veo yo pero al momento de verla en una pantalla mas grande o al hacerle zoom se mueven los posters de hanse y gretel no se si me puedas ayudar con algun codigo en css para q no se muevan y se queden en su lugar de antemano muchas gracias
    https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-prn1/36497_451983351533982_2092873014_n.jpg

    ResponderEliminar
    Respuestas
    1. No puedo ver nada porque "Lo sentimos, el blog de c1ne3g.blogspot.com se ha eliminado."

      Eliminar
  8. Gracias Oloman, me ha funcionado muy bien esto! :D

    Pero quería consultarles algo, creen que fuese posible agregar algún botón social junto a la fecha de los comentarios, por ejemplo el +1 de google+, con lo cual hacer una especie de valorización de comentarios?

    Alguien sabe si es posible o como se tendría que hacer?

    Saludos! :D

    ResponderEliminar
    Respuestas
    1. Pues pienso que sí porque la fecha es un enlace al comentario, o sea una dirección que podría ponerse en el +1. Al menos técnicamente me parece posible, pero otra cosa es si serviría para el fin que pretendes y si los visitantes entenderían que el +1 es para eso.

      De todas formas no sabría cómo hacerlo con los nuevos comentarios anidados porque ese enlace se genera desde el script y hoy por hoy sólo entiendo algunas partes de él.

      Eliminar
  9. Sabes que estuve dándole vueltas a la lógica que usa Blogger para desplazar el mensaje hacia abajo al responder un comentario, y creo que conviene mantener el mensaje fijo si y solo si, éste aporta info. relevante para cualquier comentarista, ya sea aquel que responde a otro comentarista o bien, aquel que comenta dirigiéndose al autor de la entrada. El mensaje que tu usas, es un claro ejemplo del tipo de mensaje que es viable. En otras palabras habrá que pensar bien el mensaje que quiere mostrarse, ya que éste siempre estará visible.

    Saludos Oloman ;)

    Saludos Oloman.

    ResponderEliminar
    Respuestas
    1. Bueno, así lo entendí yo también y mi necesidad era justo la que ves: recordar que existe la posibilidad de suscribirse a las entradas porque muchos me dejan incluso su dirección de correo para avisarlos y eso evidencia que no saben que hay otro sistema más eficaz.

      Eliminar
  10. Adorei! Besos de Brazil.

    ResponderEliminar
  11. hola Oloman, yo ye habìa hechp una consulta respecto a los comentarios anidados tipo bocadillo cómic. Para llegar a eso debía empezar por el principio: anidar los comentarios, cosa que hice, pero me quedé en este post. Te explico: el mensaje grabado no salía al anidar los comentarios, así que seguí estos pasos de este post, y ahora está, pero debajo de todo!!! si con esto apareció, con qué lo pongo al inicio? :) gracias gracias

    ResponderEliminar
  12. bueno, el mensaje apareció donde se debe, pero ahora no toma los estilos, copié y pegué tu ejemplo para ver cómo aparecía y luego hacer los cambios, pero no, no hay estilo... snif

    ResponderEliminar
  13. ya está Oloman, voy ahora al bocadillo cómic ajajja ;)

    ResponderEliminar
    Respuestas
    1. Vale. Leído en otro post que esta parte está solucionas ;)

      Eliminar
  14. Oloman una duda de este modo es posible agregar la imagen de emoticonos arriba como antes de los anidados? para no dejar clavos sueltos mejor te dejo este enlace para que revises si del modo que lo propones no se pudiera.. mira acá como quedaron

    http://demo.btemplates4u.com/2012/09/metro-simple-blogger-template.html

    Es que a algunos nos gusta mostar los emoticonos de ese modo :)

    ResponderEliminar
    Respuestas
    1. Pues seguro seguro no lo sé, pero casi seguro que sí. En lugar de un texto debería ser suficiente con poner el "muestrario" de emoticonos, pero prueba eso primero antes de cambiar el resto del código porque si en "Mensaje del formulario de comentarios" no te deja poner las imágenes, pues ya no te va a servir de nada el resto.

      Eliminar
    2. Solucionado me puse a buscar la forma y es simple solo es agregar la tabla o la imagen despues de la nueva ID aplicada por ejemplo..

      <div id='mensajeform'><!-- Apertura -->
      <p><data:blogCommentMessage/></p>
      <div class="emoticonos">
      Aca se colocan los emoticonos
      </div>

      <data:blogTeamBlogMessage/>

      Eliminar
    3. Ahora que lo veo, sí. Ese era el sitio más adecuado. Gracias por el soplo Magoplup.

      Eliminar
  15. Hola, Oloman, hace mucho tiempo que te sigo y que uso tu blog para hacer modificaciones y solucionar problemas.
    Sin embargo no suelo comentar. Más que nada es porque no tengo mucho que aportar. Pero como se que se agradece saber que te siguen, quería comentarte que he puesto en práctica en mi blog los "Comentarios anidados tipo bocadillo cómic", "Últimos tweets", "Cambiar avatar anónimo y sin imagen" y este "Mensaje del formulario para comentarios anidados siempre visible"
    Todo perfecto y sin problemas.
    Gracias por tu tiempo.
    Salud(os).

    ResponderEliminar
    Respuestas
    1. De nasa Antonio y efectivamente siempre es de agradecer que te hagan saber que hay alguien ahí detrás :D

      Eliminar
  16. hola oloman, la verdad adore mucho este estilo de comentarios y otro de mis post favoritos es el de entradas relacionadas con miniaturas. Por cierto muy buen blog el tuyo :D

    ResponderEliminar
  17. Muchas gracias, lo probaré ahora mismo...

    Salu2

    ResponderEliminar
    Respuestas
    1. Funciona perfectamente, muchas gracias!

      Solo una cosilla mas. Al final del texto me apetece añadir una imagen pequeña, pero si lo intento desde el panel de control, no me deja añadir ningún elemnto HTML... He pensado en que se podría hacer con CSS, pero soy muy torpe y no me sale... Si pudieses ayudarme, te lo agradecería muchisimo.

      De nuevo gracias y Salu2

      Eliminar
    2. Prueba con #mensajeform p:after {content: url(IMAGEN);}

      Si funciona probablemente tendrás que añadir algún POSITION para reubicarlo.

      Eliminar
    3. Genial, justo lo que quería! Muchas Gracias.

      Siento molestarte de nuevo, pero es que me he fijado que cuando una entrada no tiene comentarios, el CSS no se aplica, y solo se queda el texto en limpio...

      ¿Sabes por qué?

      Gracias y Salu2

      Eliminar
    4. Te contesto a la gallega, con otra pregunta: ¿puedes cambiar #mensajeform p por #mensajeform p, .comment-form p? Y lo mismo con el del after. Cuéntame que tal por favor ;)

      Eliminar
    5. Gracias, eres todo un maquinas! ya he recomendado tu blog a mas de un amigo mio... :)

      Te cuento: cambiando lo primero, se llega a mostrar el recuadro perfectamente, sin embargo, cuando se lo aplico al "after", se distorsiona....

      Se te ocurre algo mas?¿

      Gracias por adelantado, Salu2

      Eliminar
    6. Debería ser así: #mensajeform p:after, .commentform p:after {REGLAS}

      Pero quizás alguna regla de .commentform afecte al triángulo. Habría que ver cual es si persiste el problema.

      Eliminar
    7. Justo iba a decirte que me salió poniendo el ":after" pero no me dio tiempo, te adelantaste... xD

      Dejandolo así, se muestra el recuadro con el triangulo perfectamente en entradas sin respuestas (lo digo por si quieres mencionarlo en tu artículo):

      #mensajeform p, .commentform p {REGLAS}
      #mensajeform p:after, .commentform p:after {REGLAS}

      Otra cosa, antes te mencioné que quería mostrar una imagen (es un "div" con botones sociales adentro) pero se me presentan varios problemas que me impiden realizarlo, por lo que me preguntaba si me podías aclarar unas dudas que tengo acerca de Blogger en general y darme algunas pistas (no quiero que me hagas el trabajo, prefiero currármelo y entenderlo por mi mismo xD)

      1= Cuando intento meter un elemento "div" dentro de "mensajeform" o "comment-form", cuando analizo el codigo fuente en una entrada sin comentarios, ese "div" NO EXISTE, pero sin embargo cuando abro una entrada CON comentarios, está allí... ¿Por qué? ¿Como consigo meter un "div" sin que desaparezca luego"

      2= Cuando intento aplicar CSS a un "class", con la herramienta de desarrollador me doy cuenta que las propiedades que se aplican no son las mias, sino la de un archivo .css externo... ¿Se puede priorizar un CSS para evitar que suceda esto?

      Las letras en grande son para destacar, no para gritar (por que luego me eliminan comentarios... xD)

      Espero que me puedas ayudar en algo...

      Gracias por adelantado y espero ver mas obras tuyas en tu blog ;)

      Salu2

      Eliminar
    8. Se agradece que quieras batirte el cobre con el código tú mismo, porque la verdad es que me deja exhausto el tener siempre que explicarlo todo al mínimo detalle. Pásate al comentario 20 ;)

      Eliminar
    9. La belleza está en lo simple... y Blogger no entra allí, eso seguro... -.-"

      Después de releer mis comentarios, voy a aclarar un poco mi propósito y que es lo que quiero hacer exactamente.

      Debajo del formulario dejé un espacio en blanco porque quería añadir iconos de redes sociales (aunque luego me acordé de que no se puede con un simple link) por lo que tuve que añadir un div nuevo de nombre mensajeformSocial, con 3 redes sociales (Facebook, G+ y Twitter) y sus propiedades CSS correspondientes para ubicarlo (#mensajeformSocial).

      Ese div lo agregué dentro de mensajeform y comprobando el resultado en artículos CON comentarios se mostraba perfectamente, pero los que NO tienen comentarios, los 3 botones no aparecían...

      Probé a cambiar el código de javascript que tu diste por este:

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

      No se si es la forma mas óptima de implementar la regla, pero me sirvió, los botones en los artículos CON comentarios seguian mostrandose, pero los que NO tenían, seguían igual.

      Por último, se me ocurrió mencionar el class junto al id en el CSS, para ver si aprecía de esta forma (como con la caja) pero nada, sigue sin aparecer.

      No sé porque no aparece, creo que es porque no sé que class juntar al CSS para mostrarlo, pero no tengo ni idea...

      Alguna idea¿?

      Salu2

      Eliminar
    10. Estoy un poco perezoso y con muchos comentarios pendientes de contestación así que antes de meterme con esto.. ¿realmente ves útil poner los botones sociales en los comentarios? Piensa que de todos los que leen las entradas, sólo unos pocos las comentan y con esa premisa parece más práctico poner los botones no al final (en los comentarios), sino más bien en el cuerpo del post ¿no?

      Eliminar
  18. Saludos de nuevo Oloman

    Soy el que comentó en: http://www.oloblogger.com/2009/08/blogger-modificar-el-formulario-de.html?showComment=1364839207183#c2254366482590461699 al respecto de modificar el formulario de comentarios. He seguido las instrucciones de esta entrada, pero el problema persiste. Es decir, el comentario que tengo puesto en 'Configuración' del blog se ve.. ¡debajo del formulario de comentarios!

    La idea es que se vea como lo tienes tú, osea sobre él, pero nada, no entiendo por qué pasa si el código que tenemos es el mismo

    Esta línea: document.getElementById(domId).insertBefore(replybox,null); no la tengo en mi plantilla, al menos escrita tal cual, así que esa parte no la he tocado. Mis conocimientos de HTML, CSS, etc., son bastante limitados, me baso en el ensayo/error para ir avanzando y en las guías que tú y otros hacéis con truquillos para personalizar los blogs. Pero me supongo que debe ser un 'repetir ese mensaje cliques donde cliques para que aparezca el formulario de comentarios'. Y como a mí eso realmente me da un poco igual (de hecho prefiero que sólo aparezca abajo una vez), pues creo que puedo 'saltarme' esa parte

    Sinceramente, no sé qué estoy haciendo mal =/

    ResponderEliminar
    Respuestas
    1. Anónimo4/4/13, 0:35

      Vale, no he dicho nada =P
      Estaba equivocado, precisamente es la línea que no cambiaba la que hacía que saliera encima del formulario de comentarios. No la encontraba porque en lugar de:
      document.getElementById(domId).insertBefore(document.getElementById ('mensajeform'),null);

      tenía:
      document.getElementById(domId).insertBefore(document.getElementById ('mensajeform'), null);

      Vaya, un mísero espacio entre la coma y el null, pero claro, haciendo Ctrl + F en el Chrome y buscando, pues no salía. Al final se me ocurrió la idea de ir borrando línea a ver si encontraba algo parecido, et voilà!


      En tal caso reformulo duda: ¿existe la posibilidad de que, de manera normal el mensaje aparezca encima del formulario, pero que si vas a responde a un comentario anterior no aparezca?

      Eliminar
    2. Anónimo4/4/13, 0:41

      Perdón por el reposteo, que son varias las dudas que empiezo a tener. Acabo de fijarme que el recuadro del mensaje es más ancho que el propio formulario de comentarios. ¿Cómo puedo hacerlo menos ancho?

      Eliminar
    3. Anónimo4/4/13, 0:46

      Sigh.. perdón de nuevo. Ya sé cómo hacerlo menos ancho, basta con poner una línea en plan 'width: xPX;' después de '#mensajeform p {', donde x es el número en píxeles de anchura que queremos tenga ese recuadro

      Sin embargo, aunque pueda ya reducir la anchura, veo que no se fija en el centro, y sigue manteniendo ese 'ancho de más' en cuanto a centrarse se refiere. Así que está algo más a la derecha de lo que sería un centrado auténtico. Seguiré tocando código a ver si por algún casual doy con la tecla

      Eliminar
    4. Anónimo4/4/13, 1:01

      Bueno, lo que he hecho ha sido más sencillo, y así no necesito centrar nada. He ido a 'Configuración' y he eliminado el mensaje que tenía, y en la línea de CSS que pone 'background: white;' he puesto la url de una imagen, en PNG, que hace el mismo efecto. Así me ahorro el tener que toquetear código, y molestarte a ti con cosas que aunque puedan parecer simples a algunos nos cuesta =P

      Así que nada, de momento me queda sólo una duda, que ya expresé antes. Y es cómo hacer para que esa imagen que tengo sobre el formulario de comentarios, sólo aparezca una vez, abajo, y no aparezca para las respuestas

      Eliminar
    5. Svalin I El Rápido XD

      Mira el comentario 20

      Eliminar
  19. Anónimo5/4/13, 1:26

    Siento los constantes reposteos, pero es que me van surgiendo cosas según toqueteo. Lo que me he dado cuenta es que, no sé por qué, el aspecto del formulario de comentarios varía en función de si hay comentarios o no. Ejemplo práctico

    Entrada CON comentarios, y todo correcto: http://bk-201-fansub.blogspot.com.es/2013/04/black-rock-shooter.html
    Entrada SIN comentarios, donde no parece aplicarse nada de lo establecido para la caja de formularios: http://bk-201-fansub.blogspot.com.es/2013/04/denpa-onna-to-seishun-otoko.html

    Es curioso, porque en cuanto pones un comentario sí, ahí ya cambia y sale todo correcto. Pero mientras nadie haya comentado, sale el formulario típico sin cambio alguno. ¿Por qué pasa esto? =/

    ResponderEliminar
  20. Svalin y Valentin Kivachuc, os voy a contestar a la vez porque ambos estáis en el mismo tajo, pero se ve que no os leéis entre vosotros y en los comentarios muchas veces se aprende más que en las propias entradas. Esa es la salsa de los blogs ;)

    El sistema de comentarios anidados es un poco complejo y no lo domino, pero por lo que entiendo básicamente es una aplicación JavaScript autónoma que va leyendo una especie de feed que está en la base de datos de Blogger.

    Los programadores -a mi parecer- se han complicado mucho la vida y hay distintos selectores para el CSS según se accede a comentar desde un sitio u otro. Además, me parece que ese JavaScript sustituye bloques enteros según también dónde se pincha, cambiando hasta la estructura HTML.

    Para terminar, parte del gadget es un iframe (una vista en nuestros blogs de algo que realmente está alojado en otro sitio). Todo eso junto hace que mucho de lo que se pretenda cambiar resulte algo complicado.


    Dicho esto, para meter el mismo estilo en posts sin comentarios o con comentarios, hay que añadir un segundo selector al CSS que indiqué inicialmente en el post (.comment-form y .comment-form p, respectivamente). Ahora cuando acabe de escribir esto lo actualizo.

    Y para añadir una imagen, pues lo que dice Svalin, cambiar el color del background del CSS por una imagen. Lo de borrar el texto supongo que no es necesario pues se debería ver por encima de la imagen.

    Si se quiere que sea sólo un icono o un pequeño detalle, la opción más sencilla sería crear un .png o .gif en el que ese detalle ocupe la posición que queramos en el conjunto imagen-texto e incluir un no-repeat al background. También se puede posicionar la imagen usando background-positon e incluso se puede "mover" el texto desde el CSS también añadiendo top/left/bottom/right píxeles al gusto.

    ResponderEliminar
    Respuestas
    1. Hahaha sí, es cierto, ahí andábamos los dos de debate por separado contigo. Leí su primer comentario, y como no era específicamente mi problema no seguí leyendo. Craso error, porque repetí duda innecesariamente

      Con este cambio que has introducido en el CSS sí, la imagen que tenía preparada aparece, aunque me sigo encontrado con elementos que debería personalizar para que adquiriera coherencia

      Por un lado, si fuera posible eliminar lo de 'Publicar un comentario en la entrada' que parece que Blogger añade por la cara. Mayormente porque ya en la propia imagen que tengo pongo lo de que dejen un comentario

      Por el otro, el ancho del formulario es bastante pequeño, supongo que sería el tamaño original. La historia sería hacerlo del mismo ancho que los que salen cuando en una entrada sí hay comentarios, para que parezca que son los mismos

      Y ya por último, como sub-duda del segundo punto, me pregunto: si aumento el ancho de ese formulario predefinido (u original) de Blogger, ¿automáticamente la imagen también se ubicaría donde está en las entradas que ya tienen comentarios, o debo añadirle también a la imagen un nuevo patrón de alineamiento?

      Arf, arf, arf..
      Parece que Blogger no quiere que toquemos mucho sus.. formularios

      Eliminar
    2. Auto-respuesta para la primera duda

      Se busca en el html de la plantilla lo siguiente:

      (Donde pongo hache4 es H4, pero no me deja enviar el comentario al no estar permitida esa etiqueta)

      Con borrar '' ya está, eliminado el problema. Incluso puede sustituirse por un texto personalizado o por una imagen

      En mi caso me he decidido a borrar la línea entera, así no queda el h4 ese ahí de gratis, que supongo que comerá espacio aunque no tenga nada

      Eliminar
    3. h4 id='comment-post-message' data:postCommentMsg h4

      A ver si así me deja -.-
      Hay que buscar eso, pero con los símbolos de < y > para cerrar y abrir

      Eliminar
    4. Auto-respuesta a la segunda duda, y la sub-duda

      Para aumentar el tamaño del formulario de comentarios en las entradas sin comentarios, habría que añadir un par de líneas CSS, tal que así:

      .comment-form {
      margin: 0pt auto;
      min-width: 100% !important;
      }

      Con ello lo que conseguimos es que esa caja de formularios abarque el 100% del tamaño que tiene delimitada cada entrada, ocupando todo el ancho disponible. Ya si se quiere poner menos, basta con modificar ese %


      Pues nada, salvo que algo explote de aquí a unas horas, ya lo he resuelto todo Oloman =)
      Espero que esto ayude en algo también a Valentin
      ¡Un saludo!

      Eliminar
    5. Svalin, casi me mareo leyendo todas tus autorespuestas... xD Oloman tenía razón, hablábamos por hilos separados de un mismo tema (a mi también me entró pereza leer tus comentarios, pero luego me di cuenta de que tenemos las mismas dudas) Por cierto, te quedó muy chulo al final el diseño, la verdad es que me ha encantado y espero conseguir yo mi propósito también....

      Oloman, gracias por aclarármelo, ahora me queda mas claro como funciona Blogger, y personalmente creo que se han hecho un lío con tanto rollo, desde luego podrían hacerlo mas simple.... Ahora me toca seguir peleándome con la plantilla... (seguiré dejando mis avances y dudas en el otro hilo para que esto no se vuelva lioso)

      Salu2

      Eliminar
    6. Svalin, para mostrar código en un comentario sólo has de pasarlo previamente por este conversor y Valentin ahora voy a tu hilo ;)

      Eliminar

  21. Saludos de nuevo Oloman

    Posteo aquí mismo porque la verdad que no sé dónde postear el problema
    He hecho unos cuantos cambios en la plantilla, y aparte del respaldo de siempre tengo un blog de pruebas para ir probando las cosas. La historia es que los cambios que he hecho son siempre menores, nada de toquetear cosas gordas del blog (al menos eso creo yo)

    Te paso las dos direcciones
    Blog bueno oficial del fansub: http://bk-201-fansub.blogspot.com.es/
    Blog de pruebas: http://tomaquetomatomatoma.blogspot.com.es/

    La cosa es que ambos blogs tienen la misma plantilla, personalizada, y los mismos cambios hechos uno por uno. Tanto en edición de HTML como en la parte de Diseño. Sin embargo el blog bueno me muestra 4 entradas en la página principal, aunque tenga configurado que muestre 6 (caben 3 por ancho, pues a múltiplos de 3)

    La historia es que el blog de pruebas sí muestra las 6, y son exactamente iguales. He probado a subir la plantilla del de pruebas al bueno, y nada. Incluso he subido la del bueno al de pruebas, a ver si se reproducía el error. Y tampoco. El blog bueno muestra sólo 4, y el de pruebas las 6 que debe mostrar..
    ¿Por qué está pasándome esto? >_<

    ResponderEliminar
    Respuestas
    1. Anónimo7/4/13, 9:42

      Oh, oh.. no me digas que es por esto: http://buzz-es.blogspot.com.es/2010/03/auto-paginacion-en-blogger.html

      ¡Pero si tengo poquita cosa, y hasta a mí con 2,5 MB de bajada (313 kbps máximo) me carga rápido! ¿Alguna idea para reducir el peso de la plantilla en KB? Lo de las imágenes ya estoy en ello..

      Eliminar
    2. Solucionado, bajando calidad de imágenes he conseguido que la auto-paginación me devuelva mis 6 entradas

      Una preguntilla. Si queremos compartir código contigo, de ese que encontramos en varios blogs/páginas y que hemos ido modificando, ¿dónde ha de enviarse?

      Eliminar
    3. La auto-paginación se soluciona también añadiendo a las entradas el corte (more) que lleva Blogger de serie en el editor de entradas. No sé qué criterio siguen porque a veces posts que no parecen muy pesados los cortan y otros que si lo parecen pues no.

      Y sobre compartir código, puedes usar los comentarios de la entrada más relacionada o si no encuentras ninguna, pues en el formulario de contacto que encontrarás en un enlace abajo del todo, en el pie del blog.

      Eliminar
  22. Hay que ver. Ahora que estaba cayendo en la cuenta de todas estas opciones sobre los comentarios, me doy cuenta de que ni mi mensaje de formulario para comentarios tiene utilidad alguna (porque sale abajo del todo y con un estilo tan anodino que repugna), ni me sale la opción de "Suscripción por correo electrónico", y esto sí que sería interesante.

    ResponderEliminar
    Respuestas
    1. Ya se me muestra el automensaje sobre la Box donde se escribe el comentario, pero por desgracia con un estilo simple que sigue repugnando tanto como antes.

      Eliminar
    2. Es cuestión de que uses CSS. Aquí sólo se dió un ejemplo. En los comentarios encontrarás algunos más.

      Eliminar
  23. Sólo te puedo decir que compruebes bien los cambios que hiciste, porque las pruebas que hice funcionaron correctamente y el resto de los lectores tampoco se quejaron ;)

    ResponderEliminar
  24. Hay en la entrada una actualización que precisamente explica cómo hacer eso.

    ResponderEliminar
  25. No me acordaba que el código del .comment-form p ya estaba actualizado. Si no te funciona es que quizás tienes otras clases (selectores) en tu plantilla y en ese caso va a ser difícil que te vaya.

    ResponderEliminar
  26. ¿Esto es 100% compatible con los comentarios anidados? He probado varios trucos similares, y si bien el mensaje queda arriba del formulario y no abajo, a la hora de añadir comentario anidado no se queda como tal, anidado, sino como uno más. Por eso pregunto antes de meterme con el código, no quiero que sea un truco más.

    ¿Es fiable y compatible? ¿Se pueden añadir comentarios anidados en verdad anidados?

    ResponderEliminar
    Respuestas
    1. Si no ha cambiado nada desde Abril aquí, sí, es compatible. Lo tenía puesto hasta esa fecha y funcionaba bien en este blog. No obstante marca con comentarios los trozos que añadas y así podrás volver a lo que tenías fácilmente si no te gusta/no funciona

      Eliminar
  27. Hola.

    En primer lugar, muchas gracias por toda la ayuda que nos das a todos.

    Respecto a este tutorial, tengo un problema que sólo me ocurre en las entradas que aún no tienen comentarios. Encima de la imagen que he puesto sobre el formulario de comentarios me aparece un pequeño recuadro, como una extensión del diseño que puse para el fondo. No sé cómo solucionarlo.

    El blog es éste:
    http://kabochastudio.blogspot.com.es/2014/02/prueba-05.html

    Un saludo.

    ResponderEliminar
    Respuestas
    1. Hay una actualización en el post para resolver un problema precisamente para las entradas sin comentarios, pero si con eso no se arregla el asunto, a ver si puedes quitar de tu plantilla esto que es lo que estorba:
      <h4 id='comment-post-message'></h4>

      Eliminar
    2. ¡Hey! ¡Era eso! Me estaba volviendo loco. He borrado esa línea y se ha solucionado.
      ¡Muchas gracias!

      Eliminar
    3. Otra cosa, ahora que me fijo en tu avatar, ¿cómo consigues que no se vea pixelado a 60x60?

      Eliminar
    4. Botón derecho sobre tu imagen y Abrir imagen en pestaña nueva. Luego haz lo mismo con la mía.

      No sé por qué, pero la que Blogger me incorpora es la original que subí. Es posible que tú subieras una pequeña y así se quedó... o quizás tenga que ver con que tengo perfil en G+ y me la tomé de allí. Sinceramente, no lo sé :)

      Eliminar
  28. No, yo subí una más grande (285x300). Y también tengo perfil en Google+ con la misma imagen. He eliminado la imagen del perfil de blogger y, como puedes ver no tengo avatar. El problema está en que si la vuelvo a subir me la vuelve a convertir a 45x45px.
    He visto que la dirección en la que está alojada tu imagen no es la de blogger, sino la de google+ (supongo, porque mi avatar en google+ tiene una dirección similar).
    En fin, voy a seguir investigando.
    Gracias.

    ResponderEliminar
  29. Bueno, al final lo que he hecho ha sido seguir este tutorial (www.oloblogger.com/2012/08/cambiar-avatar-anonimo-blogger.html) aplicado a mi propio avatar. No es que me convenza el modo, pero funciona. : )

    ResponderEliminar
    Respuestas
    1. Corrijo; funciona sólo en mi blog. xD

      Eliminar
    2. Sí, claro. Lo de sustituir el avatar con CSS es sólo para el propio blog. Aquí por ejemplo no existe ese código.
      Es curioso lo de los tamaños, pero seguro que hay una razón... un pequeño detalle que se nos escapa.

      Eliminar
  30. Muchas gracias, pero me costó un montón encontrado … En plantillas HTML y después de haber cambiado lo primero no sabia donde cambiar lo segundo, y estaba en la siguiente linea … muchas gracias ahora me funciona a la perfección y el ver los comentarios lo hace mucho más atractivo y fácil :)

    ResponderEliminar
  31. Hola Oloman,
    Yo tengo el problema que el cuadro de comentarios no me aparece en la version movil del blog. Alguna idea?
    el blog es appleialtres.com

    ResponderEliminar
    Respuestas
    1. En un principio no veo nada, pero repasa la parte de la plantilla que configura la versión móvil comparando con la "normal" en cuanto a los includables de los comentarios.

      Eliminar
  32. Hola Oloman, en mi blog sale el formulario de comentarios por duplicado, con su consecuente caja de comentarios, acontinuación te dejo una entrada de mi blog para que me ayudes a solucionarlo, allí verás como pasa lo que te digo en los comentarios:

    http://chitauri.blogspot.com/2014/02/el-culto-saturno.html

    ResponderEliminar
    Respuestas
    1. Hola Oloman, ya lo arreglé, resulta que no había seguido el segundo paso.

      Eliminar
    2. Hay que leer más despacio... :)

      Eliminar
  33. ¡Magnífico!, ya tengo el mensaje encima de la caja. Me queda un poco pegado con el último comentario, ¿sería posible aumentar la distancia?.

    ResponderEliminar
    Respuestas
    1. Ya ni me acuerdo cómo iba esto, pero prueba a añadir un par de <br/> tras el texto que incorporaste desde el escritorio Blogger. Son saltos de línea. Si funciona lo tendrás arreglado.

      Eliminar
  34. Lo probe y perfecto pero porque no me aparece en la página principal el formulario. Me aparece en las demás páginas, pero en la principal no. Esto me sucede en mis blogs. Gracias.

    ResponderEliminar
    Respuestas
    1. En los tuyos y en todos. No es natural ni práctico que los comentarios aparezcan en portada.

      Eliminar
  35. hola, lo probé y quedó perfecto, sólo que en las entradas donde ya hay comentarios, el cuadro para poner el comentario aparece muy abajo del mensaje, como si al mensaje le hubiera puesto renglones en blanco al final, siendo que no está así, no sé si me explico.
    Me puedes puedes ayudar con una solución?
    gracias n.n

    ResponderEliminar
    Respuestas
    1. Le podemos quitar un poco Mile, pero no sé si suficiente para tí. Añade este código CSS a tu plantilla:
      .comments .comments-content .loadmore.loaded {
      margin: 0 !important;
      }

      Eliminar
    2. vale, le voy a intentar a ver que tal :)

      Eliminar
  36. Hola, Oloman.
    Quería preguntarte si hay alguna forma de cambiarle el color al texto, pero sólo al de nuestro mensaje del formulario que ponemos para los comentarios, pero que el resto de los mensajes queden normales.
    Gracias.

    ResponderEliminar
    Respuestas
    1. o igual alguna forma de resaltarlo?
      Es que siento que se pierde con el resto de los mensajes.

      Eliminar
    2. Hola Mile. En el buscador de la izquierda escribe "comentario autor" y te saldrán tres formas de hacer lo que quieres ;)

      Eliminar
    3. Muchas gracias, ahora los reviso :)

      Eliminar
  37. Hola!!
    Muchas gracias por el tutorial, es muy bueno :D

    Me pasaba como a una chica, que no me funcionaba cuando le daba al botón de responder, pero repasando todo de nuevo, me he dado cuenta de que era porque me faltaba la coma antes del null, lo digo por si a alguien le pasa ^^
    Saludos y feliz finde!! <33

    ResponderEliminar
  38. Hola de nuevo.
    He puesto en practica esto en mis dos blogs y quedo perfecto excepto por algo:
    -En uno de mis blogs, en la versión para móvil la cajita de comentarios desapareció. Sí dice que puedes dejar un comentario y todo, pero cuando le picas, no hay ninguna cajita donde escribir. En mi otro blog funciona perfectamente tanto en la computadora como en el móvil. ¿Me puedes ayudar?

    ResponderEliminar
  39. Pues no Mile, no te puedo ayudar en esta ocasión, porque si dices que en un sitio funciona y en otro no, evidentemente es cuestión de la plantilla y no del código que propuse. Algo hay en ella (o algo le falta) que provoca ese fallo y desde este lado esa parte de la plantilla no se puede ver más que interpretada (no podemos ver el código).

    ResponderEliminar
  40. Yo creo que es más sencillo como lo tengo yo. Una imagen (< img src='URL' style='width: 100%; max-width: 464px;' title='XXX'/>) dentro del iframe del comment-form. Sin más modificaciones. Así consigues, además, que el tamaño de la imagen se adapte al dispositivo.

    Por cierto, tu comment-form aparece desplazado a la derecha en la versión móvil.

    Un saludo.

    ResponderEliminar
    Respuestas
    1. Si te refieres a mi plantilla, ni lo miro. Hace años que necesita un important re-styling, pero no tengo tiempo de arreglar lo propio :)

      Eliminar
  41. Estoy muy triste porque esto había funcionado perfecto en mi blog, pero lo abandoné por un tiempo y cuando volví, sin siquiera moverle nada, me di cuenta de que dejó de funcionar y no sé por qué y oloman ya no anda por aquí para ayudarnos T.T

    ResponderEliminar