Este tutorial me lo ha pedido bastante y es como tener la cajita de los comentarios asi como lo tengo yo ^^
Es super sencillo yo aun no lo tengo personalizada al 100% le faltan muchos detalles, por falta de tiempo aun no se los pongo >.< en vista de que me lo han pedido bastante les voy a dar el codigo y ustedes ya lo personalizan a su gusto oki ^^ empezemos:
Buscamos este codigo /* Comments
----------------------------------------------- */
borramos todo lo que esta abajo de el... hasta donde cierre la ultima llavecita "}" y pegamos este codigo:
.comments{clear:both;margin-top:10px;margin-bottom:0;line-height:18px;font-size:13px}
.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}
.comments .comment .comment-actions a,.comments .comment .continue a{
display:inline-block;
margin:0 0 10px 10px;
padding:0 15px;
color:#999 !important; /*--- Color de la fuente del boton de Responder--- */
text-align:center;
text-decoration:none;
background: #FFD3EF; /*--- color del fondo del boton de responder--- */
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) ); /*--- color del fondo del gradiente--- */
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );/*--- color del fondo del gradiente--- */
border:1px solid #6AD5FF; /*---color borde boton responder--- */
border-radius:5px;
-moz-border-radius:5px;
height:26px;
line-height:28px;
font-weight:normal;
cursor:pointer;
}
.comments .comment .comment-actions a:hover,.comments .comment .continue a:hover {
text-decoration: none;
background:#fff; /*--- Color fondo boton responder hover--- */
border:1px solid #E781FF; /*--- color borde boton responder hover--- */
}
.comments .comments-content .comment-thread ol{
list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:40px;}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.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:normal}
.comments .comments-content .user a{font-weight:normal;text-decoration:none;}
.comments .comments-content .icon.blog-author{
background-repeat: no-repeat;
background-image: url(http://i1190.photobucket.com/albums/z449/_KawaiiCherryCupCake_/Annyz_Blog/minigifsbyannyzblog218.gif);
width:20px;
height:20px;
display:inline-block;
margin:0 0 -4px 6px;
float:right;
}
.comments .comments-content .datetime a{
font-size:11px;
float:right;
text-decoration:none; color:#B2E2FF; /* -- color del link de la fecha de comentario-- */
}
.comment-content{margin:0 0 8px;padding:0 5px;
}
.comments .comment-block{
margin-left:65px;
position:relative;
background:#fff; /* -- color de fondo de la caja de comentario-- */
border:3px solid #FFD6EC; /* --- color de borde de la caja de comentario---*/
border-radius:8px;
-moz-border-radius:8px;
}
.comment-header{ /*--- Link o nombre del autor de los comentarios--- */
background-color:#ffffff; /*--- color de fondo--- */
font-size:18px;
border-bottom:1px solid #FFD6EC; /*--- color de borde --- */
padding:5px;
}
.comment-header a{
color: $(link.color); /*--- color de link de nombre del autor comentarios--- */
}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-left:48px}
.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle{cursor:pointer;display:inline-block}
.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded{max-height:0;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,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.avatar-image-container{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkA89f7dI0GbTpr7-O2BK_2ojGdj2mYSPLQOid5a3POFxxzhc8r6wa3LoFrXywlCaY69CCl8I9bLyKdcTLWxt9D-E_16CGOrnCKtrR9OZPwXox1r_PPSOQgxAdJSI_XUrcAopQ06qIESM/s1600/imagem-arrow.png) top right no-repeat; /*--- imagen flechita---*/
float:left
vertical-align:middle;
overflow:hidden;
width:65px !important;
height:51px !important;
max-width:65px !important;
max-height:51px !important}
.comments .avatar-image-container img{
padding:2px;
border:1px double #FFB3E6;
width:45px !important;
height:45px !important
;max-width:45px !important;
max-height:45px !important;
}
ejemplo:
luego dan guardar y es todo solo falta que ustedes personalizen las cajitas a su gusto :)
Gracias Annyz!! Ahorita la pondré en mi blog!! n.n
ResponderEliminarmuchas gracias Annyz!! Ahora lo pongo en mi blog ;)
ResponderEliminarHola Annyz!
ResponderEliminarLo e puesto en mi blog :)
Y me preguntava si podias poner en el blog o decirme por favor como se pone una imagen de subir en un blog.
Grax
claro te paso en link de mi primer blog ahi encotraras el tuto
Eliminarhttp://annyzkawaiiworld.blogspot.mx/2011/08/imagen-estatica-en-el-blog-modo-facil.html
saludos
hola annyz como siempre tu blog esta lindo quiero que visites el mio y puse lo de Personalizacion comentarios en mi blog quiero que visites mi blog : http://blogtrucosstardollgratis.blogspot.com.ar/
EliminarGENIAL *_*
ResponderEliminarencerio GENIAL ahora mis comentarios lucen muy bellos
gracias me ha fasinado :$ enverdad gracias annyz :3 eres una gran chica Bss!
muchisimas gracias annyz
ResponderEliminarHola Annyz: Está re-cool! Quedan muy lindos tal vez pronto lo haga. Gracias por enseñarnos. Besitos =)
ResponderEliminarooh annyz como te quierrooo
ResponderEliminardiria te amo pero no seria algo raro .__. XD
no en serio
eres genial y no lo olvides
gracias lo probare linda ^^
kisess :*
Gracias Anny >w<
ResponderEliminarYa lo puse en mi blog x3
muchas gracias
ResponderEliminarLo puse ya nwn! Queda muy mono ^^
ResponderEliminarTe ha quedado muy bien, espero ver más tutos pronto ^^
Wao! que sencillo O.o
ResponderEliminarGracias! lo probare en mi blog a ver que tal queda :D
Ah! por cierto te gustan los animes?
sii me encantan >.<
Eliminarte paso en link de un post en los que puse los animes que he mirado
http://annyzkawaiiworld.blogspot.mx/2012/07/lista-de-animes-que-he-visto.html
es del mes de julio.. hasta ahora ya han pasado 3 meses y subido mi lista a mas hahah n.n besos
Wou! Haz Visto muchos animes >.<
EliminarA mi me encantaron
-Inuyasha
-Koko ni iru yu! (manga)
-Sakura card captor
-Ouran host club, aunque el final no me dejo satisfecha =(
-Kamichama Karin
-Karin Chibi Vampire
-Special a
-Hyouka, Aun sigo esperando segunda temporada >.<
-Vampire Knight
-Death note
-Mirai Nikki
-Kaichou wa maid sama *--------*
-Peach Girl xD
-Inu x boku SS
-Lovely Complex
Ahorita mismo estoy emocionada con Tonari no kaibutsu-kun es nueva hoy acaba de estrenas el capitulo 7 >.<
Te la recomiendo ensero! :O
Este comentario ha sido eliminado por el autor.
ResponderEliminarHola me encanta tu blog felicitaciones :D
ResponderEliminarmira yo tengo un subir como el tuyo pero con una imagen distinta yo le puse el cod y siempre me funciono y ahora no, pero no se por que :(((
y yo fui a tu antiguo blog le puse el cod de ese tuto y no me funciono nunca + podrías hacer ese tuto de vuelta para ver si me funciona??
gracias :DDDDD
ah y muy lindo el tuto me sirvio y me encanto felicitaciones eres GENIAAAAAAAAL!!
Eliminarcual codigo probaste del blog anterior?? si gustas ponme el link para ver a cual te refieres sip? saludos
Eliminarok te pongo el link:
Eliminarhttp://annyzkawaiiworld.blogspot.mx/2011/08/imagen-estatica-en-el-blog-modo-facil.html
bye bye n.n
hola annyz no quiero ser pesada pero te pido algo más tenes un tuto de poner esa cosita muy cute que dice (seguir leyendo...)??
ResponderEliminarsi no lo tenes por ningun lado lo podrías hacer por favor
Bueno bye Annyz sos la mejor sos lo + y sos una genia ¿los inventas vos a los tutos???
oka meeri mas adelantito hare el tuto.. ^^ y si algunos si los hago yo otros no.. son de plantillas simples que cambio codigos.. los edito hasta obtener estos resultados :) gracias por todos tus comentarios nena y beso
Eliminargrax >.< annyz
EliminarYa lo puse en mi blog. Muchísimas gracias :D
ResponderEliminarEste tutorial es genial. Gracias por tomarte el tiempo.
Saludos!
Hola Annyz, a mi no me funciona ¿tiene que ver con el tema de la plantilla?
ResponderEliminar¡Que alguien me responda! XD
Hola bata,probaste con buscar solamente /*Comments?
EliminarPor si acaso...tal vez buscaste con los puntitos y todo y no aparece :S
Besos hermosa!
Si hice con los puntos y sin los puntos hago todo lo que dice ahí y no aparece el decorado, y me doy cuenta porque pongo vista previa :(
EliminarMe encanto este tuto! para este Fin de semana lo pondre en mi blog
ResponderEliminarel tutorial está genial el detalle es que no puedo usar el boton para copiar el codigo v.v creo has puerto la parte en esa la que dice evitar que usen el boton izquierdo, espero pueda regresar y ponerlo ene mi blog ^^
ResponderEliminarMe encanta todo annyz, visita nuestro blo(si quieres) muchos besoos
ResponderEliminarhOLA!!
ResponderEliminarYo también lo puse ya en mi blog y me encanta!!
Gracias!
Llevaba ya varias semanas queriendolo hacer.
Gracias!!
Hola, muchas gracias por el tuto!! Realmente esta hermosicimo tu blog!! Dentro de poco probaré la cajita de comentarios!
ResponderEliminarAhh, por cierto, me preguntaba si me puedo afiliar contigo *O*
http://darkangelnagatsuka.blogspot.com/
Allí esta mi blog.
intentare de probarlo para la plantilla de diciembre *w*
ResponderEliminarLo acabo de poner ^^ queda hermoso, gracias annyz :D
ResponderEliminare___e
EliminarU
Hola Annyz! Hermoso diseño..! ^3^
ResponderEliminarMe gustaria saber..como colocaste el diseño de cartelito cuando pones el cursor en algun elemento??
Nose si me entiendes...em,viste cuando colocas el cursor en la muñequita SUBIR y te aparece un cartelito 'subir? bueno lo colocaste con una forma Muy linda y bordecito verde...Quiero saber eso ^^ Gracias y me gustaria que te pases por mi blog..le hice un nuevo diseño *~*
HOLA ANNIZ, ME ENCANTAN TUS TUTOS, TENGO UN PROBLEMITA CON MI BLOG QUISE IMPLEMENTAR ESTE PERO NO MAS NO PUDE, NO ME DEJA BORRAR NADA DE LA PLANTILLA. ME PODRIAS DECIR COMO LE HAGO . DE ANTEMANO GRACIAS.
ResponderEliminarAnnyz, soy muy torpe y un desastre, y no he entendido nada -.-, bueno, nada a partir dec aquí xD
ResponderEliminarBuscamos este codigo /* Comments
----------------------------------------------- */
borramos todo lo que esta abajo de el... hasta donde cierre la ultima llavecita "}" y pegamos este codigo:
Donde pego esto, en un gatget httml, ¿no?
y lo demás no tengo ni idea -.- ¿me podrías ayudar? :)
Que lastima a mi no me funcionó, no sé si es por la plantilla que uso o que pero no se aplicó... Gracias de todos modos
ResponderEliminarLo voy a intentar. Gracias.
ResponderEliminarOye, Annyz, la foto de los peluches que tiene la bienvenida de tu blog ¿Me podrías regalar la URL?
Espero tu respuesta.
Nop, no me salió n.n Igual, gracias por compartirlo.
EliminarY lo de la foto de los peluches, no te preocupes, ya encontré una similar x3.
Que tengas un lindo diciembre.
aww nena sorry aqui te pongo la imagen
Eliminarhttp://i50.tinypic.com/2mnri2d.png
disculpame por la tardaza >.<
Este comentario ha sido eliminado por el autor.
Eliminarmuchas gracias annyz !!!!!
ResponderEliminarme gusto el tutorial *^*
ResponderEliminargracias es fantástico aunque sinceramente me gusta como ta el tuyo
lo pondré así okis?
y bueno como estoy con mi nuevo blog aun tengo como mirar haver como te doy créditos :s
pero te los daré prometido n,n
A mi tampoco me sale, ya no se que hacer para que me quede como aqui :(
ResponderEliminarYa pude arreglarlo y se me ve genial. Este tuto no se ve si tienes puesto lo de los comentarios en una ventana emergente (Pop Up).
EliminarSe ve genial. Gracias por el tuto me encanta tu pagina.
Hola!!p ¿como haces para ponerle un fonditoo]?
ResponderEliminarMuchas gracias... x acer estos tutoriales... ^-^ ♥ vales mucho nena... gracias a ti puedo diseñar mas lindo mi blog ^-^ muchas muchas gracias ♥
ResponderEliminarNena soy paqui me pillo el tuto y lo tuneo a mi forma bss
ResponderEliminarEste mu bueno el totu pero tengo una duda:/, como me voy a expandir artilugios?
ResponderEliminar¡Hola Annyz!tengo una duda;¿Como pongo un boton de ''Seguir leyendo''?
ResponderEliminarUn beso.
annyz mi plantilla no tiene ese caracter por cual otro puedo buscarlo?
ResponderEliminarAnnyz Nuevamente Muchas Gracias tu Tuto nuevamente me funciono al 100% :)
ResponderEliminarwiiii alfin pude ponerlo muchas gracias por el aporte!
ResponderEliminarmil gracias queda super chuli
ResponderEliminarMil graciaas adoro tu blog nunca lo cierres es lo mejor!
ResponderEliminargracias! *-* aunq no puedo copiar el codigo Dx porq podria ser?
ResponderEliminarya lo logre xD muchas gracias! se ve adorabloso!!! *w*
ResponderEliminarAnnyz ¿Dónde, exactamente, puedo cambiar el tipo de borde? He comprendido como hacer el cambio de color en el borde, pero quisiera saber si también se podría cambiar el tipo de borde (a veces no me explico bien, pero, hacerlo, quizás, algo más... cuadrado, sin curvas en las esquinas). Agradezco todos los tutoriales que subes, en mis inicios me han ayudado bastante. Si lograses aclararme esa duda estaría el 4x de agradecida.
ResponderEliminarMuchas gracias, tenga usted buen día.
claro dibu mira para que este totalmente cuadrado el contenido busca en el codigo esta parte
Eliminar.comments .comment-block{
mas abajito encontraras esto que dice asi
border-radius:8px;
-moz-border-radius:8px;
solo borralo y guardas.. asi el borde estara totalmente cuadrado.
Oh, realmente, muchas gracias Annyz. Tengo un blog "personal" donde subo lo que observo todos los días y como es un blog algo "diferente", necesitaba comentario personalizado cuadrado.
EliminarMuchas gracias, ahora el blog lucirá más formal.
Gracias, gracias y gracias totales.
Hola Annyz!!
ResponderEliminarHe usado el código, la verdad es que soy pesima con estas cosas, y andaba con miedo en modificarlo y que me quede mal :S
Muchas gracias!!
como puedo copiar el codigo n_n juro dar creditos
ResponderEliminarsolo selecciona el codigo y con la tecla Ctrl+C copias el codigo y para pegarlo solo Ctrl+V y listo.... ese mensaje lo puse abajito de mi cabecera en el mensaje que se mueve..saludos
EliminarPIDO PERMISO PARA PONERLO EN MI BLOg
ResponderEliminaradelante..
EliminarAcaso soy la unica a la que no le sale hacer esto, porque no puedo copiar el codigo .___. ¡Ayuda!
ResponderEliminarhola Cami solo selecciona el codigo y con la tecla Ctrl+C copias el codigo y para pegarlo solo Ctrl+V y listo.... ese mensaje lo puse abajito de mi cabecera en el mensaje que se mueve..saludos
EliminarSin duda un gran detalle. Muchas gracias.
ResponderEliminarno me deja copiar el cursor de tu blog :(
ResponderEliminarmuy cool
ResponderEliminarMuchas gracias.. me encanta tu blog
ResponderEliminarDios, me salvas la vida con este tutorial. ¡Estaba desesperada por personalizar los comentarios de mi blog! Solo tengo un par de problemillas :C El primero es que los avatares de la gente que comenta en mi blog sigue de color rosa y no sé dónde cambiarlo. El segundo es que debajo de los comentarios me aparece un recuadro gris muy feo y no sé cómo quitarlo :C
ResponderEliminarGracias por todo. Un beso :)
Z.
Me encanta tu blog!! Gracias por los tutoriales, me ayudan mucho a comenzar!
ResponderEliminarVisita el mío ;)
http://nanamidreams.blogspot.com.es/
Gracias por el tuto me ha servido, aunque justo ahora lo hago a las apuradas.
ResponderEliminarY si pudieras podrias visitar mi blog?
Http://quozette.blogspot.mx
Soy nueva en esto hace un par de dias lo abri.
Aun asi mil gracias *-*
no puedo copiarlo no me da la obcion :(
ResponderEliminarHola lorreyn solo selecciona el codigo y con la tecla Ctrl+C copias el codigo y para pegarlo solo Ctrl+V y listo...:D!!
Eliminarno lo entendi :(
ResponderEliminarPrimeramente tienes que ir a plantilla y luego a donde dice editar... despues ahi buscas el codigo que menciono arriba y solo queda seguir el tuto. Al principio no es sencillo entender la plantilla pero poco a poco veras que lo haras ^^!
EliminarHoliii!! Tu tuto esta genial, ya lo probé. Me gustaría que me ayudaras, es que quiero poner el color de el nombre del que comenta más oscuro, pero no se donde!! Te dejo el link de una entrada con comentarios.
Eliminarhttp://milhistoriasporcontar-ninfa.blogspot.com.es/2014/07/conociendo-bloggeros-2.html?showComment=1404505129639#c8984919599151582159
Besos ^^!
No me estaba funcionando ningún código hasta que llegue a tu blog. Muchas gracias por el post :)
ResponderEliminarGracias por todo, he puesto mi blog muy kawaii gracias :)
ResponderEliminarGracias eres la mejor :'3
ResponderEliminarGracias por el tutorial...lo voy a usar
ResponderEliminarBesos
Oh Annyz!! Disculpa por ser tan tonta pero.. mi blog no tiene esos códigos >.{no se como se escribe xD} no me salen. ¿Me podrías ayudar? Te lo agradecería muuucho :) Leo tus blogs desde que tenía 6 años!! Besos!!
ResponderEliminarwoooow en serio????? eso es genial :D :D :D!!! me da un gusto enorme saber eso >.<!!!! bueno cual de todos tus blogs es en el que tienes problemas??? quiza sea la plantilla.
Eliminar