Personalizar la caja de comentarios de blogger
En vista de que he tenido cientos de
emails, preguntándome como cambiar de estilos a los comentarios de su blog de Blogger, les traigo un sorprendente código CSS, con el cual solo tendrán que
insertarlo en su Editor HTML de Blogger y podrán obtener un magnifico estilo en
la caja de comentarios de su blog de Blogger. Lo que hará el código CSS es
mostrar un nuevo estilo de comentarios en su blog de Blogger, al responder como
autor de su blog lo marcara de color rojo, y los usuarios que comenten en su
blog lo dejara de forma normal en el color predeterminado de los estilos, además
al pasar el cursor por cualquier comentario se desprenderá la imagen del
usuario que hiso el comentario en su blog de Blogger. Los colores y los estilos
son únicos en su categoría, es un estilo hermoso, que a todo blogger les
encantara.
Anteriormente publique algunos trucos
para blogger de los cuales les dejo los enlaces
A continuación mire su demostración en
mi blog de demos, mire la caja de comentarios al final de la pagina de demos
Impresionante verdad
Vamos a trabajar
1 Ir a Blogger
2 Un clic en “Plantilla”
3 Un clic en “Editar HTML”
Ahora se le abrirá el Editor HTML de su plantilla
En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.
4 Busca este código
]]></b:skin>
|
Una vez que hayas encontrado el código, tendrás
que insertar las siguientes líneas de código arriba del código que encontraste.
.comments
{
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
padding: 5px;
}
.comments
.comments-content {
font-size: 13px;
background:#fff
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7NnFFOalljXQFh43oA9nJwhLxy3stdiL2UstXL2x4tlcFjAmd7-Go8qFwJFLZDbqb3Ow5NXSXlNd0FCUS89dwr1K8e-Sxz_1uDPwcSyKQbnS3IYmhdIi_wa-_s-H5_qgLUJq57wf91_KD/s45/ayudadeblogger.PNG);
margin-bottom: 16px;
margin-top: -8px;
margin-left: -10px;
padding-left: 1em;
zoom: 1.05;
background-size: 100px;
}
.comments
.comment .comment-actions a {
background:
#299DFF;
cursor:
pointer;
color:
white;
padding:
5px 10px;
margin-right:
-10px;
margin-left:
10px;
float:
right;
margin-top:
-13px;
}
.comments
.comment .comment-actions a:hover {
text-decoration: none;
background:
orange;
color:
white;
}
.comments
.comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: left;
}
.comments
.comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments
.comments-content .comment-thread {
margin: 8px 0px;
}
.comments
.comments-content .comment-thread:empty {
display: none;
}
.comments
.comments-content .comment-replies {
margin-top: 1em;
margin-left: 36px;
}
.comments
.comments-content .comment {
margin-bottom:16px;
padding-bottom:8px;
}
.comments
.comments-content .comment:first-child {
padding-top:16px;
}
.comments
.comments-content .comment:last-child {
border-bottom:0;
padding-bottom:0;
}
.comments
.comments-content .comment-body {
position:relative;
}
.comments
.comments-content .user {
font-style:normal;
font-weight:bold;
}
.comments
.comments-content .icon.blog-author {
width: 18px;
height: 18px;
display: none;
margin: 0 0 -4px 6px;
}
.user.blog-author
a {
background: red;
padding: 3px;
padding-bottom: 3px;
margin-left: -5px;
text-decoration: none;
}
.user.blog-author
a:hover {
background: #29f;
padding-left: 15px;
color:
white!important;
}
.comments
.comments-content .datetime {
margin-left:10px;
}
.comments
.comments-content .comment-header,
.comments
.comments-content .comment-content {
margin:px;
}
.comment-header
{
color: #fff;
background: #299DFF;
padding: 5px;
margin-left: -10px !important;
margin-top: -10px !important;
margin-right: -10px !important;
}
.comment-header
a {
color: #fff;
font-family:' Bree serif', arial;
font-size: 14px;
}
.comments
.comments-content .comment-content {
text-align:justify;
margin-bottom: 15px;
font: 15px magra, arial;
line-height: 18px;
}
.comments
.comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments
.comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments
.comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments
.comment-replybox-thread {
margin-top: 5px;
}
.comments
.comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments
.thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments
.continue {
cursor: pointer;
}
.comments
.continue a {
display: block;
padding: 0.5em;
font-weight: bold;
}
.comments
.comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments
.comments-content .loadmore.loaded {
max-height: 0px;
opacity: 0;
overflow: hidden;
}
.comments
.thread-chrome.thread-collapsed {
display: none;
}
.comments
.thread-toggle {
display: inline-block;
}
.comments
.thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.3em;
padding-right: 4px;
}
.comments
.thread-expanded .thread-arrow {
background:
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC")
no-repeat scroll 0 0 transparent;
}
.comments
.thread-collapsed .thread-arrow {
background:
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==")
no-repeat scroll 0 0 transparent;
}
.comments
.avatar-image-container {
float:
left;
width:
auto;
max-height:
56px;
visibility:
hidden;
opacity:
0;
left:
50px;
position:
relative;
-webkit-transition:
all .3s ease-in-out;
-moz-transition:
all .3s ease-in-out;
-ms-transition:
all .3s ease-in-out;
-o-transition:
all .3s ease-in-out;
transition:
all .3s ease-in-out;
}
.comment:hover
.avatar-image-container {
visibility:
visible;
opacity:
1;
left:
0;
}
.comments
.avatar-image-container img {
width: 36px;
background: #299DFF;
padding: 5px;
border: 1px solid #299DFF;
}
.comments
.comment-block {
background: none repeat scroll 0 0
#FFFFFF;
padding: 10px;
position: relative;
margin-left: 47px;
box-shadow: 5px 13px 30px #999;
}
#comments
a {
-webkit-transition:
all .3s ease-in-out;
-moz-transition:
all .3s ease-in-out;
-ms-transition:
all .3s ease-in-out;
-o-transition:
all .3s ease-in-out;
transition:
all .3s ease-in-out;
text-decoration:
none;
}
#comments
a:hover {
color:
black;
}
|
Eso es todo ahora da un clic en “Guardar
plantilla”
Mira tu nueva caja de comentario en
cualquier entrada de tu blog.
Facial verdad!
¿Necesitas ayuda?
Cualquier pregunta no duden en hacérmelo
saber y de inmediato les responderé
Saludos
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
Al parecer no funciona cuando tienes conectados los comentarios de Blogger y Google+
ResponderEliminarEse es el problema, pero estamos tratando de solucionarlo de algunas maneras, hasta el momento solo esta en proyecto, si lo logramos, lo publicare.
EliminarSaludos.
Buena noches, luis, muchas gracias por los aportes que ha hecho en para los blog, me gustaria saber si se le puede agregar comentarios para usuarios de face, twitter, g+, linkedin, pinterest, instagram, y otras redes sociales. Espero haya sido claro, quiero que cuando hagan algun comentario que lo hagan desde cualquier conexion que tengan, y que ese comentario al que lo hace lo publique autamaticamente en su muro y el mio. Gracias
EliminarHola es muy buena tu pregunta. lo tendre en mente...
EliminarSaludos.
Es genial,me ha quedado precioso.Muchisimas gracias y un saludo
ResponderEliminarHola! He puesto el código y dice que no existe, ¿que debo hacer?
ResponderEliminarSaludos.
Hola todas las plantillas para blogger tienen ese codigo, el cual sirve para poner los diferentes estilos de blogger.
EliminarSaludos.
Si funciona, yo lo probe
EliminarHola amigo, eh intentado de muchas maneras personalizar mi caja de comentarios pero nunca me funcionan, y tampoco se puede activar la opcion de responder mensajes,, alguien me dijoque era por mi plantilla,, te agradesco enormemente que me ayudes.. este es m blog me puedes encontrar alli http://graphicsonlinedg.blogspot.com/
ResponderEliminarme dejas un mensajje o algo, gracias de antemano..
Muy bonito pero no me funciona,tengo enlazado los comentarios de blooger y Google+, sera que ya tienen como solucionar este problema??
ResponderEliminar?
ya lo arregle gracias !!
ResponderEliminarMuchas gracias!!!!
ResponderEliminarImpresionante muchas gracias
ResponderEliminarHola, hemos podido personalizar, el problema ahora viene en la caja de respuestas, al nosotros responder una entrada la caja de respuestas es color blanco y la letra en color claro y por tanto no se ve bien. Como podemos cambiar el color de la caja de respuestas?
ResponderEliminarMe imagino que has cambiado el color o si no lo hiciste enviame la direccion URL de tu blog para verlo y asi poder ayudarte.
EliminarSaludos.
Si, lo conseguimos. Mil gracias
EliminarHola Luis, yo no tengo caja de comentarios en mi blog y la necesito por que nunca nadie de los que entra deja comentarios. Metí el código en la plantilla encima, debajo y en medio de
ResponderEliminar]]> pero no me sale.
Yo no tengo muy claro si tengo activados los comentarios de blogger y google+, creo que si, pero en todo caso que debo hacer? desactivarlos o dejarlos?
Muchas gracias solo llevo 2 meses en esto.
(Si necesitas ver ni blog, es igual que el nombre de comentario.)
Hola, me gustaría saber si en la caja de comentarios, podría poner una caja donde la gente pusiera su nombre, otra caja donde la gente pusiera su email y luego otra donde se pusiera el comentario. Es decir, que fuera como un formulario pero dentro de la caja de comentarios.
ResponderEliminarMuchísimas gracias.
Saludos.
Hola! Gracias! ya lo tengo cambiado a mi gusto :). Pero tengo un problema. Ya no me aparece la frase Añadir comentario y tengo un texto que me gustaría que se viese encima de la caja dónde se escribe y aparece abajo del todo..
ResponderEliminarA parte me gustaría cambiar solo el color del botón publicar ¿Sabes cómo?
Muchisimas gracias!!
Hola sobre tu pregunta ¡Ya no me aparecela frase Añadir comentario!, los estilos CSS que instalaste en tu plantilla no ocaciona ningun problema al tema de os comentarios. Lo único que esta haciendo es cambiar los estilos de los comentarios nada más. Saludos
EliminarEstimado amigo, agregue el codigo tal como lo mencionas pero veo que , la caja sigue igual, no cambia al estilo nuevo, verifique que google+ no este entrelazado con blogger. pero aunasi no se realiza el cambio de la caja de comentarios, ojala puedas ayudarme, saludos
ResponderEliminarSi no te funciona los estilos de la forma que está publicado en este tutorial, desase lo que hiciste anteriormente, ahora prueba insertando todo el código nuevamente después del siguiente código < b:skin > … Me indicas como te fue, saludos.
EliminarMuchas, pero que muchas gracias por este truco. Combinando parte del código que nos dejas en este post, con el que yo ya tenía implementado he logrado el efecto que estaba buscando. De verdad que te lo agradezco. Un abrazo.
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarHola Marga, por favor indiqueme cual es la dirección URL de su blog de Blogger, específicamente donde tenga cualquier entrada con comentarios.
EliminarSaludos.
Este comentario ha sido eliminado por el autor.
EliminarHola Marga, he visto su blog de Blogger, con respecto a su pregunta el texto de los comentarios salen algunos separados y otros normal, por que los usuarios que comentan ponen doble espacio al escribir y doble espacio hacia abajo, así que no es problema de sus sistema de comentarios. Ademas las palabras salen de acuerdo al texto que tiene por defecto en su blog de Blogger específicamente los estilos de su blog.
EliminarSaludos.
Este comentario ha sido eliminado por el autor.
EliminarEste comentario ha sido eliminado por el autor.
EliminarSí que había solución, y era añadir esto a CSS:
Eliminar.comments .comments-content .comment-content {
text-align:left;
}
De esa forma desaparece el texto justificado.
Hola Marga, es bueno saber que a dado solución a su inconveniente.
EliminarSaludos
Hola Luís! (Aunque veas que publico como José Luís, soy en realidad su hija). Estoy tratando de hacerle un blog bonito, dentro de mis limitadísimas posibilidades pues yo de programación cero patatero. De hecho llevo todo el fin de semana intentando cosas y me estoy deprimiendo mucho ya. Y encima, cada vez que busco algúnn tutorial en Google acabo viendo los tuyos jajaja! Quiero decir, que eres un crack y no sé si eso me deprime aún más. En fin, no sé si podrías ayudarme un poquito con algunas cosas. El blog de mi padre es http://comoburbujas.blogspot.com.es/ y como observarás, está hecho un desastre. He intentado crear el slideshow de entradas populares y a cada intento, peor funciona. Y a mí me pasa igual que a algún otro usuario que ha comentado por aquí...que no encuentro ese código en el buscador (]]>) Me da como resultado "0 de 0". Básicamente quiero incluir en la barra lateral algunas "pijaditas" que queden chulas en el blog, sin recargarlo demasiado tampoco, ya sabes, algo atractivo, funcional y elegante. He intentado mil cosas este fin de semana...probando plantillas muy guapas, para al final, acabar de nuevo en el editor de plantillas de Blogger, que aunque no está mal, ya sabes que es bastante limitado (otra cosa es saber modificar sus códigos pero claro, ahí yo ni me atrevo a entrar!) Por qué no habré nacido yo con una mente más matemática...argh, no me saques de lengua, arte y deporte :) A ver si puedes echarme un cablecillo hombre...Si alguna vez vienes por España, estás invitado a nuestra casa. No se me ocurre mejor manera de compensar tu ayuda! Un saludo desde la Costa Dorada de Tarragona. (Rosana)
EliminarHola, por favor puede dejarme un comentario en la siguiente direccion: ayudadeblogger@gmail.com
EliminarEn el cual le indicare que es lo que puede realizar y guiarle paso a paso sobre todo lo que usted necesite.
Y muchas gracias por la invitación
Espero su mensaje en mi cuenta de correo electrónico
Saludos
ESO ES TODO EL CODIGO
ResponderEliminarHola Angel, así es, es todo el código que debe de ingresar tal como lo muestro en el tutorial.
EliminarSaludos.
Hola Luis, ya no se que hacer para poner una caja de comentarios en mi blog, una caja normalilla, no pido más, lo he probado todo activar comentarios nada, añadir el código al css nada, poner tu ćodigo en la plantilla nada, por favor podrás ayudarme. Gracias, mi blog se llama lasherramientas de benita.
ResponderEliminarTe estaría agradecida eternamente.
Hola, espero no estar respondiendo muy tarde... Para incrustar la caja de comentarios sin salir del post debes ir a: Configuración >> Entradas, comentarios y uso compartido >> Ubicación de los comentarios "Incrustados".
EliminarEspero que sea lo que buscas, un saludo, cualquier inquietud no dudes en responder. http://pedazovirtual.blogspot.com
Muy bueno, si me sirvió muchísimas gracias. :D
ResponderEliminaraun funciona?, tengo en theme en mi blog, pero cuando añado ese codigo se rompe el theme :/
ResponderEliminarHola Grifus, con respecto a lo que indica, tal vez sea alguna configuracion de su plantilla
EliminarSaludos.
hola luis, mira llegue aca buscando el codigo de la caja de comentarios original, me baje una plantilla que trae disqus pero con publicidad, prefiero los comentarios de blogger. tendras ese codigo? un saludo
ResponderEliminarComo puedo cambiar el logo naranja de blogger? en esta caja de comentario veo muchos?
ResponderEliminarmuy buen post
ResponderEliminarhola como hago si solo quiero aplicar en una pagina nada mas no en todo el blogger ? y ademas agregar para que se pueda hacer envio de archivos (imagenes)
ResponderEliminarSi me sirvio, pero me gustaria si pudiras traer mejores diseños.
ResponderEliminar