Numerar los comentarios en Blogger

Para numerar los comentarios: 1. vamos a: Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ► 2. Localizamos el siguiente código poniendo, dentro del rectángulo de búsqueda (search), una línea del mismo: <div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>         <dl expr:class='data:post.avatarIndentClass' id='comments-block'>         <script type='text/javascript'>var CommentsCounter=0;</script>           <b:loop values='data:post.comments' var='comment'>             <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>               <b:if cond='data:comment.favicon'>                 <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>               </b:if> 3. Dentro del anterior código agregamos la línea resaltada. 4. Un poco más abajo del anterior código localizamos el siguiente: <b:if cond='data:comment.authorUrl'>                 <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>               <b:else/>                 <data:comment.author/>               </b:if> 5. A continuación pegamos éste: <span class='numberingcomments' style='float: right; font-size: 16px; color:#ffffff'> <a rel='nofollow' style='text-decoration:none' title='Comment Link'># <script type='text/javascript'> CommentsCounter=CommentsCounter+1; document.write(CommentsCounter); </script> </a> </span> Las partes resaltadas (tamaño de los caracteres, color y numeral), pueden ser cambiadas. 6. Guardar plantilla. Twittear

Responder comentarios, Comentarios anidados

Blogger implementó la opción para responder comentarios con el método de comentarios anidados. Lo único que debemos hacer para activarla es configurar la ubicación del formulario de comentarios con la opción Debajo de la entrada. Vamos a: Página principal ► Diseño ► Configuración ► Entradas y comentarios ► Ubicación de los comentarios ► Debajo de la entrada ..y activamos la opción Debajo de la entrada:   Plantillas modificadas Cuando hemos modificado la plantilla en la sección de los comentarios, lo explicado anteriormente no funcionará. En este caso haremos lo siguiente: Vamos a Editar HTML: Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ► Localizamos uno de estos códigos: 1.- <b:if cond='data:blog.pageType == &quot;item&quot;'> <b:include data='post' name='comments'/> </b:if> 2.- <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <b:include data='post' name='comments'/> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <b:include data='post' name='comments'/> </b:if> ...y el que encontremos de los dos lo reemplazamos por éste: <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if> </b:if> Nota Cualquier modificación que hayamos hecho en la plantilla, en la sección de los comentarios, como por ejemplo cambiar el color de fondo de los mismos, desaparecerá al activar la opción Responder comentarios. También puede ocurrir que, si nuestra plantilla está muy modificada, los comentarios aparecerán con una extraña configuración. Por lo anterior es conveniente guardar, en el bloc de notas por ejemplo, la sección original del segmento de código (y su ubicación) que hemos reemplazado para activar la opción Responder comentarios, para, en caso de que no sea de nuestro agrado la nueva configuración de los comentarios, reversar lo que hicimos y renunciar a esa opción. Así se verá un comentario, una vez activada la opción Responder comentarios: Para responder a un comentario hacemos click en Responder, y aparecerá el recuadro con la nota Introduce tu respuesta: Twittear

Habilitar la opción para responder comentarios

Este tutorial fue actualizado. Ver actualización. En los blogs de Blogger no contamos con una opción para responder comentarios a cada comentarista en particular. En este tutorial vamos a explicar la forma de habilitar la opción "Responder a este comentario". 1.- Vamos a Edición de HTML: Página principal ► Diseño ► Edición de HTML ► Expandir plantillas de artilugios 2.- Una vez expandidas las plantillas de artilugios localizamos el siguiente segmento de código:             <dd class='comment-footer'>               <span class='comment-timestamp'>                 <a expr:href='data:comment.url' title='comment permalink'>                   <data:comment.timestamp/>                 </a>                 Sitio para el código                 <b:include data='comment' name='commentDeleteIcon'/>               </span>             </dd>           </b:loop>         </dl>       </div> 3.- En la línea indicada (sitio para el código), pegamos el siguiente código: <span class='blrespondrcmnt'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=xxxxxxxxxxxxxxxxxx&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;' title='Responder a este comentario'><img src='http://i56.tinypic.com/2vxod29_th.jpg'/>Responder a este comentario</a></span> En ID=xxxxxxxxxxxxxxxxxx reemplazamos las xxxxxxxxxxxxxxxxxx por el número de identificación de nuestro blog (ID) que lo encontramos así: En la barra de direcciones, estando en la ventana en la que tenemos la plantilla de nuestro blog, podremos ver esta dirección: http://www.blogger.com/html?blogID=xxxxxxxxxxxxxxxxxx Los números que ocupan el lugar de las xxxxxxxxxxxxxxxxxx son la ID (Identificación) de nuestro blog. La URL http://i56.tinypic.com/2vxod29_th.jpg corresponde al ícono que aparecerá al lado izquierdo de la opción "Responder a este comentario". Este ícono lo podemos cambiar por otro de nuestro gusto. 4.- Hasta aquí habremos logrado que la opción "Responder a este comentario" aparezca después de cada comentario, al lado derecho de la fecha de los mismos. Para lograr una mejor estética sería conveniente que no apareciera la fecha; si queremos que así sea, la eliminamos borrando del código del punto dos (2) la línea resaltada en azul. 5.- Vista previa y Guardar plantilla 6.- Cuando alguien quiera responder un comentario y haga click en la opción Responder a este comentario aparecerá la ventana emergente, con un enlace: Este enlace permite que en la respuesta se haga referencia al nombre del comentarista a quien se responde y que, al hacer click sobre el nombre, la página se desplace, quedando en primer témino el comentario respondido: En la Demo podemos ver la respuesta a comentarios en funcionamiento: Nota Se recomienda habilitar, en Configuración de comentarios ► Ubicación del formulario de comentarios, la opción Entrada incrustada a continuación, así: Página principal ► Diseño ► Configuración ► Comentarios ► Ubicación del formulario de comentarios De esta menera lograremos que, cuando haya comentarios en una entrada, éstos aparezcan todos a continuación, con la opción Responder a este comentario, y el box para un nuevo comentario, al final, accediendo a Comentarios desde la página principal. Lo que no ocurriría al acceder a Comentarios de una entrada, estando en la página principal, si tenemos habilitada la opción Página completa o la opción Ventana emergente, ya que en éstas aparecerán los comentarios sin la opción para responder a cada uno, sino el box para un nuevo comentario. De todas maneras la ventana emergente sí aparecerá siempre que se quiera responder un comentario. Twittear

Cambiar el color del fondo de los comentarios de Blogger

Con la siguiente modificación en el CSS de nuestra plantilla (tomamos como referencia: Mínima) podemos cambiar el color de fondo de los comentarios: Vamos a Editar HTML... Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ► ...y localizamos el siguiente código, poniendo dentro del rectángulo de búsqueda (Search) una línea del mismo: /* Comments ----------------------------------------------- */ #comments h4 {   margin:1em 0;   font-weight: bold;   line-height: 1.4em;   text-transform:uppercase;   letter-spacing:.2em;   color: $sidebarcolor;   } #comments-block {   margin:1em 0 1.5em;   line-height:1.6em;   } #comments-block .comment-author {   margin:.5em 0;   } #comments-block .comment-body {   margin:.25em 0 0;   } #comments-block .comment-footer {   margin:-.25em 0 2em;   line-height: 1.4em;   text-transform:uppercase;   letter-spacing:.1em;   } #comments-block .comment-body p {   margin:0 0 .75em;   } .deleted-comment {   font-style:italic;   color:gray;   } 2.- Una vez localizado lo eliminamos y lo reemplazamos por el siguiente: /* Comments ----------------------------------------------- */ #comments {   margin:0;   }   #comments h4 {   margin:0 0 10px;   padding-top:.5em;   line-height: 1.4em;   font: bold 110% Georgia,Serif;   color:#333;   } #comments-block {   line-height:1.6em;   }   .comment-author {   background: #194155;   margin:.5em 0 0;   padding:0 0 0 20px;   font-weight:bold;   } .comment-body {   background: #194155;   margin:0;   padding:7px 7px 7px 7px;   } .comment-body p {   margin:0 0 .5em;   } .comment-body-author{   background:#C0C0C0;   margin:0;   padding:7px 7px 7px 10px;   } .comment-body-author p {   font-size:105%;   margin:0 0 .2em 0;   color:#ffffff;   text-decoration:bold;   } .comment-footer {   background:#194155 ; margin:0 0 .5em;   padding:0 0 .75em 20px;   color:#996;   } .comment-footer a:link {   color:#ffffff;   }   .deleted-comment {   font-style:italic; color:gray;   } 3.- con este código podemos poner los colores que deseemos para el fondo de los comentarios, así: .comment-author { background: #194155; En el anterior segmento ponemos el código hexadecimal del color para el fondo del nombre del autor del comentario (Xxxxxxxxx dijo:). .comment-body { background: #194155; En este segmento ponemos el código hexadecimal del color para el fondo del comentario. .comment-footer { background:#194155; margin:0 0 .5em; Aquí ponemos el código hexadecimal del color para el fondo de la fecha y de Publicar un comentario en la entrada.

Twittear