Personalizar los enlaces de los comentarios de Blogger (Responder, Eliminar, Respuestas, Añadir comentario, y Cargar más)

16 de junio de 2014 116 comentarios ,
En esta entrada vamos a ver cómo personalizar los enlaces de los comentarios anidados, es decir, los enlaces de Responder, Eliminar, Respuestas, Añadir comentario, y Cargar más.
Muchas plantillas pasan desapercibidos esos enlaces y algunas veces pueden ser poco visibles, así que quien quiera resaltarlos o decorarlos en esta entrada verá cómo hacerlo.
He preparado 5 estilos distintos para copiar y pegar, pero por supuesto se pueden modificar y personalizar al gusto de cada quien.

Para poner cualquiera de estos 5 diseños sólo entra en Plantilla | Edición de HTML y antes de ]]></b:skin> pega el código de los estilos que prefieras.


/* Enlaces de los Comentarios
----------------------------------------------- */
.comments .comment .comment-actions a, .comments .thread-toggle a, .comments .continue a, .comments .comments-content .loadmore a {
width: 100%;
display: inline;
color: #666; /* Color del enlace */
background: #f5f5f5; /* Color de fondo */
border-left: 2px solid #009ecf; /* Color del borde izquierdo */
border-radius: 10px; /* Borde redondeado */
text-decoration: none;
padding: 4px 8px;
margin-right: 5px;
white-space: nowrap;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
font-family: Arial;
}
.comments .continue {border-top:none}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {
text-decoration:none;
position: relative;
top: 1px;
left: 1px;
}
.comments .comments-content .loadmore a {
display:block;
text-align: center;
font-size: 26px;
font-weight: normal;
font-family: Arial;
margin-right:auto;
margin-left:auto;
margin-top:0px;
max-width:180px;
}




/* Enlaces de los Comentarios
----------------------------------------------- */
.comments .comment .comment-actions a, .comments .thread-toggle a, .comments .continue a, .comments .comments-content .loadmore a {
width: 100%;
display: inline;
color: #fff; /* Color del enlace */
background: #009ecf; /* Color de fondo */
border-radius: 2px; /* Borde redondeado */
text-decoration: none;
padding: 3px 6px;
margin-right: 5px;
white-space: nowrap;
vertical-align: middle;
font-size: 11px;
font-weight: normal;
font-family: Arial;
}
.comments .continue {border-top:none}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {
text-decoration:none;
position: relative;
top: 1px;
left: 1px;
}
.comments .comments-content .loadmore a {
display:block;
text-align: center;
font-size: 22px;
font-weight: bold;
font-family: Arial;
margin-right:auto;
margin-left:auto;
margin-top:0px;
max-width:180px;
}




/* Enlaces de los Comentarios
----------------------------------------------- */
.comments .comment .comment-actions a, .comments .thread-toggle a, .comments .continue a, .comments .comments-content .loadmore a {
width: 100%;
display: inline;
color: #777; /* Color del enlace */
/* Fondo gradiente */
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #d6d6d6) );
background:-moz-linear-gradient( center top, #ededed 5%, #d6d6d6 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#d6d6d6');
background-color:#ededed; /* Color de fondo */
border:1px solid #d6d6d6; /* Color del borde */
border-radius: 4px; /* Borde redondeado */
box-shadow:inset 0px 0px 3px 0px #fff;
text-shadow:1px 1px 0px #fff;
text-decoration: none;
padding: 3px 7px;
margin-right: 5px;
white-space: nowrap;
vertical-align: middle;
font-size: 11px;
font-weight: normal;
font-family: Arial;
}
.comments .continue {border-top:none}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {
text-decoration:none;
position: relative;
top: 1px;
left: 1px;
}
.comments .comments-content .loadmore a {
display:block;
text-align: center;
font-size: 24px;
font-weight: bold;
font-family: Arial;
margin-right:auto;
margin-left:auto;
margin-top:0px;
max-width:180px;
}




/* Enlaces de los Comentarios
----------------------------------------------- */
.comments .comment .comment-actions a, .comments .thread-toggle a, .comments .continue a, .comments .comments-content .loadmore a {
width: 100%;
display: inline;
color: #fff; /* Color del enlace */
background-color:#ff5bb0; /* Color de fondo */
border:1px solid #ee1eb5; /* Color del borde */
border-top-left-radius:37px; /* Borde redondeado */
border-top-right-radius:0px;
border-bottom-right-radius:37px; /* Borde redondeado */
border-bottom-left-radius:0px;
text-decoration: none;
padding: 3px 12px;
margin-right: 5px;
white-space: nowrap;
vertical-align: middle;
font-family:Times New Roman;
font-size:13px;
font-weight:bold;
font-style:italic;
}
.comments .continue {border-top:none}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {
text-decoration:none;
position: relative;
top: 1px;
left: 1px;
}
.comments .comments-content .loadmore a {
display:block;
text-align: center;
font-family:Times New Roman;
font-size:24px;
font-weight:bold;
font-style:italic;
margin-right:auto;
margin-left:auto;
margin-top:0px;
max-width:180px;
}




/* Enlaces de los Comentarios
----------------------------------------------- */
.comments .comment .comment-actions a, .comments .thread-toggle a, .comments .continue a, .comments .comments-content .loadmore a {
width: 100%;
display: inline;
color: #fff; /* Color del enlace */
/* Color del enlace */
background:linear-gradient(to bottom, #fe1a00 5%, #ce0100 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100',GradientType=0);
background-color:#fe1a00; /* Color de fondo */
border:1px solid #d83526; /* Color del borde */
border-radius:4px; /* Borde redondeado */
box-shadow: 0px 10px 14px -7px #f29c93;
text-decoration: none;
text-shadow:0px 1px 0px #b23e35;
padding: 5px 9px;
margin-right: 5px;
white-space: nowrap;
vertical-align: middle;
font-family:Times New Roman;
font-size:13px;
font-weight:bold;
font-style:italic;
}
.comments .continue {border-top:none}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {
text-decoration:none;
position: relative;
top: 1px;
left: 1px;
}
.comments .comments-content .loadmore a {
display:block;
text-align: center;
font-size: 24px;
font-weight: bold;
font-family: Arial;
margin-right:auto;
margin-left:auto;
margin-top:0px;
max-width:180px;
}


Dentro de los códigos verás en color verde dónde puedes modificar los estilos principales.
En todos los casos los botones tendrán un efecto "push" al pasar el cursor sobre ellos, si quieres añadir más estilos al pasar el cursor puedes hacerlo agregando los estilos debajo de:
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {
Ahí puedes cambiar lo que quieras, ya sea el color de fondo, de texto, etc.

Si quisieras personalizar cada enlace de forma individual también puedes hacerlo. Por ejemplo, si quisieras sólo el enlace de "Responder" y "Eliminar" (recuerda que el enlace "Eliminar" sólo es visible para los administradores del blog) entonces puedes hacerlo de esta forma:
.comments .comment .comment-actions a {
... Aquí los estilos ...
}
Para el enlace de "Respuestas" sería así:
.comments .thread-toggle a {
... Aquí los estilos ...
}
Para el enlace de "Añadir comentario" sería así:
.comments .continue a {
... Aquí los estilos ...
}
Y para el enlace "Cargar más" así:
.comments .comments-content .loadmore a {
... Aquí los estilos ...
}

De esta forma tan simple podemos personalizar esos pequeños detalles de la plantilla a los que muchas veces no le ponemos toda la atención pero que son parte importante para los que buscan atraer comentaristas a su blog.


116 comentarios en:

" Personalizar los enlaces de los comentarios de Blogger (Responder, Eliminar, Respuestas, Añadir comentario, y Cargar más) "

  1. Hola Potro, deja de leerme la mente...Te iba a preguntar sobre este tema, me encantó y funciona a la perfección, respecto a los comentarios ¿Cómo los numeras? lo busqué en Oloblogger, pero no lo explica como tu. Mil Gracias, saludos cordiales.

    ResponderEliminar
    Respuestas
    1. De hecho lo explica mejor que yo, te dejo un enlace al tutorial que te decía:
      http://www.oloblogger.com/2012/01/numerar-los-nuevos-comentarios-blogger.html

      Saludos, y no pienses cosas malas, que puedo leerte la mente :P

      Eliminar
    2. Sigo pensando que tu lo explicas mejor...Lo de la mente es un chiste :P
      Gracias igualmente!

      Eliminar
  2. al FIN !! POTRO LO QUE ESTABA BUSCANDO, muchas gracias.

    ResponderEliminar
  3. potro tengo una pregunta, como puedo activar la opción para responder comentarios ya que no me aparece, gracias.

    ResponderEliminar
    Respuestas
    1. Hola ElRosz Zapien, para habilitar los comentarios anidados busca este código de tu plantilla:
      <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 cámbialo por este:
      <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>

      Eliminar
    2. Sigue sin aparecer potro, ya investigue tambien, ya tengo activado lo del comentarios debajo del de las entradas. :(

      Eliminar
    3. gracias potro ya pude solucionarlo, no encontraba exactamente el codigo que tenia que sustituir, habia varios parecidos y intente 1 por 1 hasta que funciono muchas gracias :3

      Eliminar
  4. Muy buena idea, Potro, y muy variadas, para todos los estilos. Thaaaanks ;)
    Un beso enorme.

    ResponderEliminar
  5. Me podrias decir como puedo poner algo asi como una hoja para los post ahi donde esta marcado con rojo? esque ya intente de todo y no e podido espero y me puedas ayudar gracias

    Aqui esta la imagen : http://1.bp.blogspot.com/-RM2hwrn0DUI/U6Cv4z34iAI/AAAAAAAAAGU/X4agBUzDJzM/s1600/PAGINA.jpg

    ResponderEliminar
    Respuestas
    1. Hola kasper, ¿te refieres a poner un fondo en esa área? ¿cuál plantilla usas?

      Eliminar
    2. La plantilla se llama RedHood-Portfolio-Framework y si eso es lo que quiero poner un fondo en esa area por que el post se confunde con el fondo y no quiero eso

      Eliminar
    3. Añade esto antes de </head>

      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      #content-wrapper {
      background: #eee;
      }
      </b:if>

      Eliminar
    4. No me funciono T.T quieres que te pase el link de mi blog? no tiene nada relacionado con derechos de autor

      Eliminar
    5. http://www.iconos-gta-sa.tk/2014/06/prueba-1.html

      Eliminar
    6. Discúlpame, no te di bien el código, es así:

      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <style>
      #content-wrapper {
      background: #eee;
      }
      </style>
      </b:if>

      Eliminar
    7. :O Me funciono gracias por tomarte el tiempo de responder mis comentarios y gracias por solucionar mi problema

      Eliminar
  6. Hola Potro, muy buenas noches, este articulo te quedó excelente; los botones me gustaron mucho, pero quiero que me ayudes en algo, ¿Cómo hago para cambiar la fuente, o tipo de letra de los comentarios de mi blog?. Quiero ponerlos en Georgia y tamaño 15, pero quiero que el cambio no afecte el tamaño de fuente de las entradas. El enlace de mi blog te lo adjunto en tu página de Facebook, vía mensaje. Espero que puedas ayudarme con esto nuevamente, por cierto, el diseño de tu blog está buenísimo.

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario Dante, sólo agrega estos estilos:

      .post-outer .comments {
      font-size: 15px;
      font-family: Georgia;
      }

      Por cierto, ahora mismo la fuente de tus entradas es Georgia así que quizá no notes diferencia entre uno y otro.
      Saludos.

      Eliminar
    2. Hola, Potro, muy buenas tardes. Muchas gracias por tu ayuda, quedó muy bien, el problema no era el tipo de fuente, el problema era el tamaño, ya que los comentarios adoptaban el tamaño de las entradas, pero ahora con tu ayuda quedó perfecto. Nuevamente te agradezco por tu ayuda, las descripciones que nos brindas son claras y precisas, se entienden perfectamente; contigo he aprendido el lenguaje de blogger. Te deseo una espléndida tarde.

      Agrego algo más: me gustaría mucho que explicaras como se pone el famoso tabview porque lo estoy buscando para adaptarlo en mi blog, pero la mayoría de explicaciones que encuentro son ambiguas y carecen de detalles. Sería bueno que pudieras explicarme por favor, como hacer un tabwiew como el que tú tienes en este blog, para ponerlo en la sección de los gatgets, y poder agregarle imágenes en los botones del tab con esos efectos dinámicos, en pocas palabras, un tabview similar al tuyo que contenga todo tipo de cosas que nosotros queramos agregarle, gracias amigo.

      Eliminar
    3. Muchas gracias por tu comentario Dante. Este es el tabview que yo uso actualmente:
      http://www.compartidisimo.com/2011/10/crear-una-seccion-con-pestanas-para.html

      Saludos.

      Eliminar
    4. Excelente amigo, gracias por la ayuda, que tengas una excelente tarde.

      Eliminar
  7. potro xq ya no me respondes :( Me Funciono Y todo , Pero NO Se xq No Se Me Enmarcan Los Comentarios? sabes?

    ResponderEliminar
    Respuestas
    1. Hola Tutoriales By Neto, no he visto otra pregunta tuya, ¿dónde la has dejado?
      ¿Qué quieres enmarcar de los comentarios? porque en tu blog el contenedor general de los comentarios ya está enmarcado.

      Eliminar
    2. Bueno me equivoque no Es Enmarcar Separarlos Con Una Linea O Bordearlos ., Enmarcar Y Separar comentarios Utilize ese y agregue el 2 Codigo De La Primera Opcion Que Te Que Pone Un Borde Abajo Pero No funciona :/

      Eliminar
    3. No he visto que hayas dejado un comentario allá, pero puede ser porque arriba de esos estilos tienes una llave de cierre dos veces:

      .header {
      background: -webkit-radial-gradient(50% 50%, rgb(50, 57, 70), rgb(46, 50, 58)) rgb(44, 47, 53);
      border: 7px outset rgb(37, 128, 162);
      border-radius:10px; /* Bordes redondeados */ }
      }

      Elimina la que está repetida y mira si eso lo resuelve. Cualquier otra duda respecto a eso deja el comentario en esa entrada para que podamos darle el seguimiento adecuado. Saludos.

      Eliminar
    4. Aaaa Gracias Potro Como Siempre Salvandome :D, Funciono Gracias

      Eliminar
    5. Este comentario ha sido eliminado por un administrador del blog.

      Eliminar
    6. No sé decirte, nunca he hecho algo así aunque ya lo he visto en varias plantillas.

      Pd. Elimino el comentario por el aviso que está arriba del formulario.
      Saludos.

      Eliminar
  8. Gracias El potro por tu ayuda en todo.Mi pregunta es,yo utilizo una plantilla simple para blogger y activo los comentarios debajo de la entrada pero no salen.

    ResponderEliminar
    Respuestas
    1. Hola El zeta-, revisa si en cada entrada tienes habilitados los comentarios, eso puedes hacerlo editando una entrada y del lado derecho en las opciones de entrada mira si están habilitados o no.

      Eliminar
  9. Hola Potro!
    Que alegría verte de nuevo por aquí, se te echaba de menos. Me ha encantado esta entrada y también la de los botones de redes sociales, estoy segura de que me será muy útil :)

    Por cierto, estoy configurando una plantilla para mi blog pero tengo un problema. Tiene puesto el leer más, pero no recorta las imágenes. Por ejemplo, si un post tiene una imagen con bastante altura, no la recorta para que sea vea más estrecha y "horizontal". Quería preguntarte si hay algún modo de solucionarlo. Este es mi blog de pruebas, puedes verlo aquí: http://winxpruebas.blogspot.com.es/

    Muchas gracias! :)

    ResponderEliminar
    Respuestas
    1. Muchas gracias por tu comentario WinxLovely -Lovix. Aparentemente esa plantilla no tiene el Leer más, o al menos no el tradicional, ya que según veo la imagen no tiene aplicado ningún sumario sino que toma la imagen original y la muestra. Saludos.

      Eliminar
  10. Gracias, Potro, cada que publicas algo quiero agregárselo a mi blog. Puse el de botones rojos, pero con otro ícono...

    Es la segunda vez que pregunto algo fuera del tema, espero no te moleste. ¿Sabes cómo cambiar el color de los mensajes por omisión de Blogger? Por ejemplo, "compartir en Pinterest", "entradas antiguas", "página principal", etc.; no me refiero a los enlaces como tal, sino al mensaje que muestra Blogger en una caja blanca y con sombra. Recién lo vi en un blog y me surgió la duda.

    Pongo la dirección del blog como referencia, aunque sé que debes borrarlo. ;-)

    http://www.jipeblo.com


    Muchas gracias.

    Un saludo.

    P.D. No lo digo por mis preguntas, pero en verdad admiro mucho tu trabajo, eres un blogger absolutamente profesional y amable. Muy pocos como tú.

    ResponderEliminar
    Respuestas
    1. Al contrario jessie, me da gusto que comenten y que sobre todo no se queden con alguna duda.
      Con estos estilos podrías personalizar ese mensaje:

      .status-msg-bg {
      background: #eee;
      border-radius:4px;
      }
      .status-msg-border {
      border: 1px solid #ebebeb;
      }

      Saludos y muchas gracias por tu comentario :)

      Eliminar
    2. ¡Hola de nuevo!

      Otra vez molestándote. Creo que no lo hice bien, no encontré el código en mi plantilla (no sé si debería estar), también intenté agregarlo como CSS, antes de b:skin, antes de /head (no pongo el código completo porque dice que mi HTML no es aceptable al escribir mi comentario, pero ambos llevan <>) y lo agregué antes de cada elemento, pero no me funcionó.

      ¿Sabes qué estoy haciendo mal?

      Saludos y gracias de antemano.

      Eliminar
    3. Hola jessie, el código hay que agregarlo antes de ]]></b:skin>
      Intenta de nuevo, si no ves los cambios me dices en cuál blog lo has puesto para echarle una mirada.
      Saludos.

      Eliminar
    4. ¡Hola!

      No me funcionó, quizás haya otra cosa en la plantilla que no permite hacer el cambio. Éste es mi blog de pruebas: inter124.blogspot.com

      De nuevo, muchísimas gracias por la ayuda.

      Eliminar
    5. Hola de nuevo jessie, veo que tu plantilla no incluye ese mensaje, o mejor dicho, parece que está oculto. Para mostrarlo de nuevo busca y elimina este código de tu plantilla:

      .status-msg-wrap {
      display: none;
      }

      Eliminar
    6. ¡Qué tal!

      Ya eliminé el mensaje y agregué el código, pero no me resulta... Aunque, de hecho, noté que en el blog que te mostré tampoco funciona ya. ¿Será actualización de Blogger o simplemente no lo he hecho bien? =(

      En verdad, agradezco muchísimo tu ayuda... Ahora mismo intentaré (de nuevo) cambiar esto, pero si no lo logro, no pasa nada... aplicaré otros de tus trucos para que la plantilla quede más a mi gusto.

      Un saludo.

      Eliminar
    7. Hola de nuevo jessie, en el blog de jipeblo sigo viendo este código:
      .status-msg-wrap {
      display: none;
      }

      Mientras eso esté ahí no se podrá visualizar el mensaje de Blogger.
      Saludos.

      Eliminar
    8. La plantilla no es mía, Potro, sólo que le ayudo a una amiga a dejarla a su gusto, ya probamos varios métodos, pero no funcionaron (sólo cambia el color de la caja "mostrando entradas con la etiqueta..."), así que decidió poner numeración en vez de leyendas para "entradas antiguas" y "entradas recientes" y utilizar AddToAny en vez de los botones de compartir.

      En verdad una disculpa por las molestias y gracias por la ayuda. Además de este blog, estoy ayudando a otra amiga a hacer el suyo, y el mío lo hice desde cero y el 90% de las respuestas a todas las cosas que no sabía las encontré aquí. Prácticamente tú hiciste los blogs, Potro. =)

      Muchísimas gracias por la ayuda no sólo a mí sino a todos. Ya casi quedo al 100% satisfecha con los blogs que hice/modifiqué, sólo me falta hacerlos adaptables a pantallas móviles.

      Un saludo y, de nuevo, gracias.

      Eliminar
    9. Qué gusto jessie que ayudes a tus amigas con su blog, y que Ciudad Blogger les esté sirviendo para la modificación de sus blogs. Siento que no hayan conseguido lo otro. Saludos.

      Eliminar
  11. Potro, mi web, si te das cuenta tiene bastante css3 y pues en navegadores como IE y Firefox no se visualiza bien :( se mira todo transparente sabes algun codigo o script que arregle eso o lo convierta , o como en modo de compatibilidad . ?

    ResponderEliminar
    Respuestas
    1. Son problemas de compatibilidad, por ejemplo aquí:

      .header {
      background: -webkit-radial-gradient(50% 50%, rgb(50, 57, 70), rgb(46, 50, 58)) rgb(44, 47, 53);
      border: 7px outset rgb(37, 128, 162);
      border-radius:10px; /* Bordes redondeados */
      }

      Para el fondo de la cabecera estás usando -webkit-radial-gradient un estilo que se aplica sólo para Chrome y Safari. Lo correcto sería:

      .header {
      background: -webkit-radial-gradient(50% 50%, rgb(50, 57, 70), rgb(46, 50, 58)) rgb(44, 47, 53); /* Safari 5.1 a 6.0 */
      background: -o-radial-gradient(50% 50%, rgb(50, 57, 70), rgb(46, 50, 58)) rgb(44, 47, 53); /* Opera 11.6 a 12.0 */
      background: -moz-radial-gradient(50% 50%, rgb(50, 57, 70), rgb(46, 50, 58)) rgb(44, 47, 53); /* Firefox 3.6 a 15 */
      background: radial-gradient(50% 50%, rgb(50, 57, 70), rgb(46, 50, 58)) rgb(44, 47, 53); /* Standard */
      border: 7px outset rgb(37, 128, 162);
      border-radius:10px; /* Bordes redondeados */
      }

      Toma en cuenta que esos estilos en versiones antiguas de IE no se verá.

      Eliminar
    2. Gracias potro, tu siempre salvandome :D , no sabes como puedo poner una barra fija abajo, pero que tenga opcion de cerrarse? y Esq quiero Poner Eso, Que - Para Visualizar Todo Bien, Recomendamos Usar Google Chrome Y Safari ? , me puedes ayudar ?

      Eliminar
    3. Tal vez esta te pueda servir para lo que deseas:
      http://ciudadblogger.com/2010/11/barra-de-herramientas-flotante-con.html

      Eliminar
  12. Hola Potro!!! Antes que nada, gracias por todos tus tutos. Me sirvieron de maravilla, sos la razón de mis blogs.

    Ahora si, vamos directo al grano. Potro, ¿hay un código para acortar una SOLA entrada?. No quiero utilizar el acortador que te viene por defecto en blogger, quiero manejarme de forma manual.

    Espero que me hayas entendido, saludos.

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario Lucas, ¿te refieres a usar un Leer más sólo en la primera entrada?
      Si es así entonces sí, es posible aplicar el leer más sólo al primer post. Mira esta entrada y omite el primer paso, ve directo con el segundo:
      http://ciudadblogger.com/2010/08/entradas-resumidas-estilo-magazine-2.html

      El último paso (el de los estilos) es opcional en tu caso.

      Eliminar
  13. Que buen post otro, sos el amo de blogger y vengo hacerte una consulta, como cambio el nombre de las etiquetas por imagen. ¡gracias!

    ResponderEliminar
    Respuestas
    1. Hola, te dejo un enlace a un post de Oloblogger donde explican cómo hacerlo:
      http://www.oloblogger.com/2008/09/iconos-por-categoria-en-cada-post.html

      ¡Saludos!

      Eliminar
  14. Hola Potro, se puede ocultar de algún modo el texto: "No hay comentarios" o "3 comentarios" que aparece???

    ResponderEliminar
    Respuestas
    1. Puedes ocultarlo con CSS:

      #comments h4 {
      display:none;
      }

      Eliminar
    2. Muchas gracias Potro!!! Y cómo se puede ocultar también de la página principal???
      Es decir, sale en pequeño "2 comentarios"

      Eliminar
    3. ¿Te refieres al link de comentarios? Ese puedes ocultarlo desde Diseño y click en Editar en Entradas del blog, ahí verás todas las opciones.

      Eliminar
    4. Hola Potro de nuevo, lo que me pasa es que cuando le quito la opción de comentarios desde Diseño, automáticamente en " Ubicación de los comentarios" de "Entradas y comentarios" de "Configuración" me aparece ocultar. ¿que puedo hacer?

      Eliminar
    5. Escóndelo entonces con CSS:

      .comment-link {
      display: none;
      }

      Eliminar
  15. Hola Potro !!!
    De nuevo estoy por aquí. Una entrada estupenda y muy interesante, como siempre. Mi pregunta no va con el tema de esta entrada pero si de los comentarios. Mira, te quiero preguntar si hay alguna forma de poner en vez de la caja de comentarios en blogger algo tipo formulario para los comentarios. Gracias, espero tu respuesta. Saludos !!!

    ResponderEliminar
    Respuestas
    1. Hola Biljana, puedes instalar Disqus, o IntenseDetabe, el más usado es Disqus, en la red encontrarás tutoriales sobre su instalación en Blogger.

      Eliminar
    2. He visto estos dos sistemas pero no es lo que busco. Lo que quiero es insertar un formulario tipo formulario de contacto, con el nombre, la pagina web de la persona si la tiene, el email y el recuadro del mensaje, con la opción de enviar y que el comentario se publique en el blog. Yo ya he creado un formulario de estos, lo tengo puesto en la zona de las paginas, en la pestaña contacto, pero no se como insertarlo en los comentarios. No se si tienes algo sobre esto por aquí, lo estaba buscando y no lo veo. Gracias.

      Eliminar
    3. No, eso no se puede en Blogger, la única forma de usar otro tipo de comentarios es utilizando servicios externos como los que te mencioné. Saludos.

      Eliminar
  16. Hola. Porfa ignora el comentario que te deje primero que este, el que el blog me redireccionaba a otro, el problema era el cache de mi navegador, borre el historial y se soluciono. Gracias de todos modo :).

    Saludos.

    ResponderEliminar
  17. Hola potro, Mira Puse una Barra Footer igual A La Tuya pero no Se como Ponerla Exactamente Abajo De MI Footer Original pero queda arriba y no se como ponerla aBajo podrias ver porfa :D

    ResponderEliminar
    Respuestas
    1. Si Esta Todo Antes De < / body > Pero Siempre Aparece Arriba Del Footer que Trae Blogger

      Eliminar
    2. Según el código fuente de tu plantilla está dentro del <footer> no antes de </body>

      Eliminar
  18. Hola Potro, vengo a ver si me podrías solucionar una duda bastante importante, y me agradaría mucho que me respondieras :D
    El caso es que siguiendo un tutorial para enumerar los comentarios (que es este: http://www.oloblogger.com/2012/01/numerar-los-nuevos-comentarios-blogger.html), he visto que en las respuestas en vez de enumerarse con números decimales (1.1, 1.2, 1.3...), se me enumera con letras (1.a, 1.b, 1.c...), y quisiera saber cómo hago para que me salga igual que a ti, con números decimales.

    Gracias por leerlo ;)

    ResponderEliminar
    Respuestas
    1. Hola Charlie, ahí mismo lo menciona Oloman sobre las posibles variantes. Cualquier duda al respecto déjasela a él, yo por respeto no puedo meterme en su entrada ;)

      Eliminar
  19. Me podrían ayudar a publicar artículos de la red en facebook gracias

    ResponderEliminar
    Respuestas
    1. Hola Lia, hay una aplicación que se llama RSS Graffiti, pero por experiencia es mejor que manualmente publiques los artículos en tu página de Facebook, así puedes elegir la imagen y la descripción exacta que quieras.

      Eliminar
  20. Hola amigo me podrias ayudar con este codigo de paginacion, lo que pasa que quiero cambiarle el tamaño y los colores de los botones de 1,2,3 etc y el de siguiente y anterior pero al poner un codigo de color no pasa nada, quisiera que me ayudaras y gracias quisiera que le pusieras los colores del segundo codigo de perzonalizar los enlazes de comentarios de ese color azul gracias ya que ami nunca que me cambio el color aqui te dejo el enlace para que veas el codigo: https://docs.google.com/file/d/0B-Yl3LErsOeoelJiZVN5TldNUVk/edit

    ResponderEliminar
    Respuestas
    1. Hola. Debes quitar las URLs de las imágenes que ves ahí, esas impiden que se muestre el cambio de color que pones pues el color de lo botones actuales son una imagen.
      Para el tamaño sólo debes aumentar los valores del padding, por ejemplo, en el caso de .showpagePoint { que su padding quede así:
      padding: 6px 16px;

      Eliminar
  21. gracias amigo ya logre cambiarle el color y eltamaño pero lo que no logro acer es cambiar el tamaño del texto podrias ayudare gracias

    ResponderEliminar
    Respuestas
    1. Eso lo cambias aquí:
      #blog-pager {padding:6px;font-size:11px;}

      Eliminar
  22. amigo disculpa pero no encontre ese codigo y aparte intente con uno similar y otros que decian tex etc. pero no pude cambiar el tamaño del texto ayudame porfavor no soy tan experto en esto mil gracias por responder

    ResponderEliminar
    Respuestas
    1. Usa las teclas CTRL + F, el código está en tu plantilla.

      Eliminar
    2. mil gracias potro ya lo pude hacer con razon no encontraba el codigo que me dijiste es que yo lo buscaba en el mismo que te di xd pero mil gracias ya lo logre hacer :D
      solo por curiosidad de que pais eres yo de mexico y gracias por tu enorme apoyo

      Eliminar
    3. gracias amigo solo esta ultima pregunta y ya ahora como le cambio el color al texto gracias por tu amable atencion en verdad esa es mi ultima duda y listo te dejo de molestar por un rato xd gracias por responder amigo :D

      Eliminar
    4. Supongo que eso se cambia en el "color" que aparece en .showpageArea y .showpageArea a

      Pd. De México también ;)

      Eliminar
  23. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  24. Huuu Potro, empecé a leer los comentarios y solucioné lo de los textos de "No hay comentarios". Gracias :3.

    Ahora, con el otro problema de lo del formulario de comentarios: cuando no hay comentarios sí me aparece como quiero (Primero el formulario y después la casilla de publicar un comentario), pero cuando ya hay comentarios me aparece al revés. ¿Será algún problema de mi plantilla?

    Agradecerte es poco comparado a cuanto nos ayudas, en serio.

    ResponderEliminar
    Respuestas
    1. Muchas gracias por tu comentario Ruthmad. No sé si he comprendido bien, cuando te refieres al formulario y a la casilla, ¿te refieres al mensaje que va arriba del formulario de los comentarios? Si es así, es normal, de hecho así es como viene por defecto pero se puede modificar. Oloman explica en esta entrada cómo hacerlo:
      http://www.oloblogger.com/2013/01/mensaje-del-formulario-para-comentarios.html

      Eliminar
    2. Sí, es justo ese, no me expliqué muy bien jajajaja. Muchas gracias de nuevo Potro, me sirvió mucho.

      Eliminar
  25. Hola Potro, funciona bien en la PC, pero, en los móviles no se ven los botones ni los números. Gracias!

    ResponderEliminar
    Respuestas
    1. Hola Facu, para que estas personalizaciones se vean igual en el móvil debes usar la plantilla "Personalizada" en la versión móvil, o bien, no mostrar una plantilla para la versión móvil. Saludos.

      Eliminar
    2. Usar la plantilla Personalizada ¿Afecta en algo más la visualización?
      Gracias por seguirme solucionando la vida.

      Eliminar
    3. Afecta en todo realmente, la plantilla personalizada lo que hará es mostrar tu plantilla actual tal cual, sin ninguna variación como las plantillas móviles predeterminadas. Esta opción es ideal cuando se usa una plantilla "responsive", es decir, adaptable a cualquier dispositivo.

      Eliminar
    4. Me abstengo de recomendar ya que todo depende de las necesidades de cada blog y del gusto del autor ;)

      Eliminar
  26. Muy buena explicación, pero yo tengo un problema. Mi plantilla que es de madeinspain no permite los comentarios debajo de la entrada. Eso quiere decir que no puedo poner los comentarios anidados? Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Se supone que en todas las plantillas se debe permitir mostrar los comentarios debajo de la entrada si así lo ajustas desde la configuración del blog, pero desconozco cómo sean esas plantillas que dices. Tendrías que preguntar al autor de la plantilla.

      Eliminar
  27. Muchas gracias! Añadido a mi blog de prueba, que luego irá a otro obvio xD, pero tengo una pregunta.
    Yo uso la plantilla simple de blogger y en donde pone Inicio, entradas antiguas.. hay unos puntos grises que no se donde están. Donde se puede quitar eso? y otra cosa..,ya puestos, como hago para que entre Fecha titulo y texto de entrada esté todo mas junto? he conseguido encontrar el padding de el final de la entrada para que la imagen quede perfecta pero lo demas no :( ayuda pls y gracias!

    ResponderEliminar
    Respuestas
    1. Hola, elimina el background que está dentro de .blog-pager { con eso se irán los puntos de la paginación.
      Para lo de los espacios agrega estos estilos:
      h2.date-header {
      margin: 0 0 -1em 0;
      }
      .post-header {
      margin: 0 0 -0.5em;
      }

      Eliminar
  28. Hola Potro!!
    Tengo un problema, no es relacionado a este tema bueno un poco, veras, las entradas de mi blog solo muestra, el numero de comentarios que hay y las etiquetas. Por mas que intento editar en "Configurar entradas del blog" para que aparescan otras opciones, no cambia nada. Creo que hay algun codigo que interfiere en eso pero quisiera estar seguro con usted, espero me puedas ayudar, Saludos..
    Nombre de mi blog: Aztlan
    Blog: transformenelpapel.blogspot

    ResponderEliminar
    Respuestas
    1. Hola Aztlan, si no aparecen los códigos quizá debas añadirlos manualmente a tu plantilla:
      http://www.ciudadblogger.com/2010/07/cambiar-de-lugar-datos-del-post-footer.html

      Eliminar
    2. Gracias Potro!!
      Me funciono muy bien, con eso pude aprender que codigos se ocupan para editar eso, compare el codigo de mi otro blog de ejemplo y descubri el codigo que me faltaba para ativar "share-buttons".
      Saludos!

      Eliminar
    3. Gracias a ti por tu visita, me alegro que te haya podido servir esa entrada.

      Eliminar
  29. Potro, despues de años de seguirte y haberme ayudado a editar TODOS mis blogs y salvarme mil veces, esta es la primera ves que te escribo y que no puedo solucinar yo solo un problema o buscando.

    Mira, la plantilla la toque un MONTON, pero nada anda mal. El PROBLEMA que tengo es que no figura como por ejemplo tenes vos aca el comentario y la respuesta abajo, queda todo como si fuera un comentario, ademas de que no figura la opcion para responder.

    Ayer toque y modifique para que cuando comenta un anonimo tenga un avatar personalizado, andaba perfecto. Tambien personalice los enlaces del comentario como mostras en este post, y tambien se veia todo bien (exceptuando que mi respuesta se veia con el mismo fondo colorado que tengo en el footer de los post, y queria que eso quede blanco y no pude modificarlo, mas que nada porque segui haciendo otra cosa), luego segui tocando cosas pero no mucho y entre a mirar y ya tenia el problema que te comento que no figura ni los avatar en anonimo ni tampoco la personalizacion que realice tal cual como explicaste, te repito, anduve tocando y no se PORQUE AHORA NO ME FIGURA EL AVATAR EN LOS ANONIMOS, LOS COMENTARIOS FIGURAN TODOS IGUALES Y NO ESTA LA OPCION PARA RESPONDER, A PESAR QUE TENGO PERSONALIZADO COMO EXPLICAS ACA.

    TE DEJO EL ENLACE DE UNA ENTRADA PARA QUE VEAS http://www.lobosalmundo.com/2015/03/cuerpo-sin-vida-lobos.html

    ResponderEliminar
    Respuestas
    1. Hola lobosalmundo, muchas gracias por tu comentario aunque parece que llegué tarde, pues entré al post que indicas y he podido ver la opción de Responder (con los estilos correspondientes), así como el avatar personalizado de los comentaristas anónimos. Imagino que has encontrado a tiempo el error ;)

      Eliminar
    2. Jajaj, hola potro, no hay problema hasta hoy estaba esperando tu respuesta porque todavia no lo habia solucionado, se ve que se arreglo solo no se cual seria el error.

      Tambien fijate que te comente que me gustaria que mi respuesta quede con el fondo blanco tambien y que no quede como esta actualmente con ese color, aca en esta imagen te muestro lo que me gustaria cambiar http://www.subeimagenes.com/img/potro-1258895.png

      Saludos y ojala me puedas ayudar

      Eliminar
    3. Hola de nuevo :)
      Busca esta parte en tu plantilla y elimínalo:

      .comments .comment-thread.inline-thread {
      background-color: #bd4439;
      }

      Eliminar
    4. ESPECTACULAR Potro, listo, problema solucionado, ya esta todo como queria.

      Un abrazo grande y siempre atento a tu blog, saludooos gracias

      Eliminar
  30. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Hola Berta, esos tutoriales deben funcionar lo que sucede es que ahora ese código aparece dos veces (uno para la versión móvil y otro para la versión web) de manera que si aplicas el cambio en el incorrecto no verás resultados.
      De cualquier manera, si únicamente quieres cambiar la palabra "comentarios" eso puedes hacerlo entrando en la sección Diseño, ahí da click en Entradas del blog y verás la opción de cambiar esa palabra.

      Eliminar
  31. Hola Potro
    Te cuento que instale el codigo (en un blog de pruebas) tal cual tus instrucciones y quedo perfecto. El unico problema es que se repiten las respuestas a los comentarios. Podrias ayudarme con eso?
    Muchas gracias de antemano!

    ResponderEliminar
    Respuestas
    1. No debería suceder ya que con estos métodos no tocamos la estructura de los comentarios, sólo lo estilos. Si puedes reinstala la plantilla y aplica los cambios desde cero pero sin tocar nada de la estructura HTML de los mismos.

      Eliminar
  32. Potro:

    Mi necesidad no satisfecha como administrador, supongo que compartida con muchos otros blogueros, es la edición de los comentarios, al menos de los que uno mismo hace para enmendar alguna palabra inapropiada, solecismos, etc. En Wordpress puede hacerse sin problemas y al parecer, antes de la gran remodelación de plantillas por parte de Google, existía un método que parecía funcionar. Consistía en editar el código relativo a los comentarios con el fin de que apareciese, junto al icono de la papelera, el botón con el lápiz de edición. Hace la friolera de diez años lo explicaban así:

    http://vinilosriptuto.blogspot.com.es/2005/11/como-editar-comentarios-en-blogger.html

    ¿Conoces algún sistema que en la actualidad sirva para poder activar esta función adicional?

    Gracias.

    ResponderEliminar
  33. Un truco estupendo, pero yo quisiera ir más lejos, ¿se puede aplicar una imagen de fondo para la caja entera de los comentarios? Un abrazo.

    ResponderEliminar
  34. Ya lo he solucionado incorporando alguna línea más al código de partida, en mi caso el modelo 4 que nos propones. Dejo aquí el código extra que he añadido, por si a alguien le pudiera interesar: .comments .comments-content{
    background: #ffffff url(url de la imagen que se quiere colocar como fondo de la caja);
    zoom: 1.05;
    background-size: 100px;
    }
    La idea ha surgido a partir de otro blog que he visitado: http://www.ayudadeblogger.com/2013/07/personalizar-la-caja-de-comentarios-de-blogger.html

    ResponderEliminar
  35. Gracias nuevamente Potro, siempre aprendo algo nuevo con tu blog, eres el puto amo, saludos

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger