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 {Para el enlace de "Respuestas" sería así:
... Aquí los estilos ...
}
.comments .thread-toggle a {Para el enlace de "Añadir comentario" sería así:
... Aquí los estilos ...
}
.comments .continue a {Y para el enlace "Cargar más" así:
... Aquí los estilos ...
}
.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.
muchas gracias , muy bueno...
ResponderEliminarMuy bueno !
ResponderEliminarHola 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.
ResponderEliminarDe hecho lo explica mejor que yo, te dejo un enlace al tutorial que te decía:
Eliminarhttp://www.oloblogger.com/2012/01/numerar-los-nuevos-comentarios-blogger.html
Saludos, y no pienses cosas malas, que puedo leerte la mente :P
Sigo pensando que tu lo explicas mejor...Lo de la mente es un chiste :P
EliminarGracias igualmente!
al FIN !! POTRO LO QUE ESTABA BUSCANDO, muchas gracias.
ResponderEliminarpotro tengo una pregunta, como puedo activar la opción para responder comentarios ya que no me aparece, gracias.
ResponderEliminarHola ElRosz Zapien, para habilitar los comentarios anidados busca este código de tu plantilla:
Eliminar<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
Y cámbialo por este:
<b:if cond='data:blog.pageType == "static_page"'>
<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 == "item"'>
<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>
Sigue sin aparecer potro, ya investigue tambien, ya tengo activado lo del comentarios debajo del de las entradas. :(
Eliminargracias 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
EliminarMuy buena idea, Potro, y muy variadas, para todos los estilos. Thaaaanks ;)
ResponderEliminarUn beso enorme.
Gracias Sofía, otro beso enorme para ti :*
EliminarMe 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
ResponderEliminarAqui esta la imagen : http://1.bp.blogspot.com/-RM2hwrn0DUI/U6Cv4z34iAI/AAAAAAAAAGU/X4agBUzDJzM/s1600/PAGINA.jpg
Hola kasper, ¿te refieres a poner un fondo en esa área? ¿cuál plantilla usas?
EliminarLa 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
EliminarAñade esto antes de </head>
Eliminar<b:if cond='data:blog.pageType == "item"'>
#content-wrapper {
background: #eee;
}
</b:if>
No me funciono T.T quieres que te pase el link de mi blog? no tiene nada relacionado con derechos de autor
Eliminarhttp://www.iconos-gta-sa.tk/2014/06/prueba-1.html
EliminarDiscúlpame, no te di bien el código, es así:
Eliminar<b:if cond='data:blog.pageType == "item"'>
<style>
#content-wrapper {
background: #eee;
}
</style>
</b:if>
:O Me funciono gracias por tomarte el tiempo de responder mis comentarios y gracias por solucionar mi problema
EliminarHola 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.
ResponderEliminarGracias por tu comentario Dante, sólo agrega estos estilos:
Eliminar.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.
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.
EliminarAgrego 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.
Muchas gracias por tu comentario Dante. Este es el tabview que yo uso actualmente:
Eliminarhttp://www.compartidisimo.com/2011/10/crear-una-seccion-con-pestanas-para.html
Saludos.
Excelente amigo, gracias por la ayuda, que tengas una excelente tarde.
Eliminarpotro xq ya no me respondes :( Me Funciono Y todo , Pero NO Se xq No Se Me Enmarcan Los Comentarios? sabes?
ResponderEliminarHola Tutoriales By Neto, no he visto otra pregunta tuya, ¿dónde la has dejado?
Eliminar¿Qué quieres enmarcar de los comentarios? porque en tu blog el contenedor general de los comentarios ya está enmarcado.
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 :/
EliminarNo he visto que hayas dejado un comentario allá, pero puede ser porque arriba de esos estilos tienes una llave de cierre dos veces:
Eliminar.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.
Aaaa Gracias Potro Como Siempre Salvandome :D, Funciono Gracias
EliminarEste comentario ha sido eliminado por un administrador del blog.
EliminarNo sé decirte, nunca he hecho algo así aunque ya lo he visto en varias plantillas.
EliminarPd. Elimino el comentario por el aviso que está arriba del formulario.
Saludos.
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.
ResponderEliminarHola 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.
EliminarHola Potro!
ResponderEliminarQue 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! :)
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.
EliminarGracias, Potro, cada que publicas algo quiero agregárselo a mi blog. Puse el de botones rojos, pero con otro ícono...
ResponderEliminarEs 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ú.
Al contrario jessie, me da gusto que comenten y que sobre todo no se queden con alguna duda.
EliminarCon 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 :)
¡Hola de nuevo!
EliminarOtra 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.
Hola jessie, el código hay que agregarlo antes de ]]></b:skin>
EliminarIntenta de nuevo, si no ves los cambios me dices en cuál blog lo has puesto para echarle una mirada.
Saludos.
¡Hola!
EliminarNo 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.
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:
Eliminar.status-msg-wrap {
display: none;
}
¡Qué tal!
EliminarYa 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.
Hola de nuevo jessie, en el blog de jipeblo sigo viendo este código:
Eliminar.status-msg-wrap {
display: none;
}
Mientras eso esté ahí no se podrá visualizar el mensaje de Blogger.
Saludos.
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.
EliminarEn 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.
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.
EliminarPotro, 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 . ?
ResponderEliminarSon problemas de compatibilidad, por ejemplo aquí:
Eliminar.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á.
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 ?
EliminarTal vez esta te pueda servir para lo que deseas:
Eliminarhttp://ciudadblogger.com/2010/11/barra-de-herramientas-flotante-con.html
Hola Potro!!! Antes que nada, gracias por todos tus tutos. Me sirvieron de maravilla, sos la razón de mis blogs.
ResponderEliminarAhora 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.
Gracias por tu comentario Lucas, ¿te refieres a usar un Leer más sólo en la primera entrada?
EliminarSi 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.
Que buen post otro, sos el amo de blogger y vengo hacerte una consulta, como cambio el nombre de las etiquetas por imagen. ¡gracias!
ResponderEliminarHola, te dejo un enlace a un post de Oloblogger donde explican cómo hacerlo:
Eliminarhttp://www.oloblogger.com/2008/09/iconos-por-categoria-en-cada-post.html
¡Saludos!
Hola Potro, se puede ocultar de algún modo el texto: "No hay comentarios" o "3 comentarios" que aparece???
ResponderEliminarPuedes ocultarlo con CSS:
Eliminar#comments h4 {
display:none;
}
Muchas gracias Potro!!! Y cómo se puede ocultar también de la página principal???
EliminarEs decir, sale en pequeño "2 comentarios"
¿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.
EliminarHola 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?
EliminarEscóndelo entonces con CSS:
Eliminar.comment-link {
display: none;
}
Hola Potro !!!
ResponderEliminarDe 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 !!!
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.
EliminarGracias Potro !!!
EliminarHe 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.
EliminarNo, 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.
EliminarHola. 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 :).
ResponderEliminarSaludos.
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
ResponderEliminarPonla antes de </body>
EliminarSi Esta Todo Antes De < / body > Pero Siempre Aparece Arriba Del Footer que Trae Blogger
EliminarSegún el código fuente de tu plantilla está dentro del <footer> no antes de </body>
EliminarHola Potro, vengo a ver si me podrías solucionar una duda bastante importante, y me agradaría mucho que me respondieras :D
ResponderEliminarEl 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 ;)
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 ;)
EliminarMe podrían ayudar a publicar artículos de la red en facebook gracias
ResponderEliminarHola 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.
EliminarHola 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
ResponderEliminarHola. 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.
EliminarPara 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;
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
ResponderEliminarEso lo cambias aquí:
Eliminar#blog-pager {padding:6px;font-size:11px;}
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
ResponderEliminarUsa las teclas CTRL + F, el código está en tu plantilla.
Eliminarmil 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
Eliminarsolo por curiosidad de que pais eres yo de mexico y gracias por tu enorme apoyo
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
EliminarSupongo que eso se cambia en el "color" que aparece en .showpageArea y .showpageArea a
EliminarPd. De México también ;)
Este comentario ha sido eliminado por el autor.
ResponderEliminarHuuu Potro, empecé a leer los comentarios y solucioné lo de los textos de "No hay comentarios". Gracias :3.
ResponderEliminarAhora, 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.
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:
Eliminarhttp://www.oloblogger.com/2013/01/mensaje-del-formulario-para-comentarios.html
Sí, es justo ese, no me expliqué muy bien jajajaja. Muchas gracias de nuevo Potro, me sirvió mucho.
EliminarHola Potro, funciona bien en la PC, pero, en los móviles no se ven los botones ni los números. Gracias!
ResponderEliminarHola 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.
EliminarUsar la plantilla Personalizada ¿Afecta en algo más la visualización?
EliminarGracias por seguirme solucionando la vida.
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¿Cuál recomiendas?
EliminarMe abstengo de recomendar ya que todo depende de las necesidades de cada blog y del gusto del autor ;)
EliminarMuy 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.
ResponderEliminarSe 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.
EliminarMuchas gracias! Añadido a mi blog de prueba, que luego irá a otro obvio xD, pero tengo una pregunta.
ResponderEliminarYo 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!
Hola, elimina el background que está dentro de .blog-pager { con eso se irán los puntos de la paginación.
EliminarPara lo de los espacios agrega estos estilos:
h2.date-header {
margin: 0 0 -1em 0;
}
.post-header {
margin: 0 0 -0.5em;
}
Hola Potro!!
ResponderEliminarTengo 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
Hola Aztlan, si no aparecen los códigos quizá debas añadirlos manualmente a tu plantilla:
Eliminarhttp://www.ciudadblogger.com/2010/07/cambiar-de-lugar-datos-del-post-footer.html
Gracias Potro!!
EliminarMe 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!
Gracias a ti por tu visita, me alegro que te haya podido servir esa entrada.
EliminarPotro, 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.
ResponderEliminarMira, 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
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 ;)
EliminarJajaj, 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.
EliminarTambien 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
Hola de nuevo :)
EliminarBusca esta parte en tu plantilla y elimínalo:
.comments .comment-thread.inline-thread {
background-color: #bd4439;
}
ESPECTACULAR Potro, listo, problema solucionado, ya esta todo como queria.
EliminarUn abrazo grande y siempre atento a tu blog, saludooos gracias
Un abrazo!
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarHola 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.
EliminarDe 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.
Hola Potro
ResponderEliminarTe 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!
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.
EliminarPotro:
ResponderEliminarMi 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.
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.
ResponderEliminarYa 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{
ResponderEliminarbackground: #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
Gracias nuevamente Potro, siempre aprendo algo nuevo con tu blog, eres el puto amo, saludos
ResponderEliminar