Annyz-BlOg : Personalizar comentarios
para COPIAR los codigos usa la tecla Ctrl + C y para PEGAR usa la tecla Ctrl + V gracias :) El Blog Se visualiza mejor con Google Chrome..

13 noviembre 2012

Personalizar comentarios




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 :)


87 comentarios:

  1. Gracias Annyz!! Ahorita la pondré en mi blog!! n.n

    ResponderEliminar
  2. muchas gracias Annyz!! Ahora lo pongo en mi blog ;)

    ResponderEliminar
  3. Hola Annyz!
    Lo 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

    ResponderEliminar
    Respuestas
    1. claro te paso en link de mi primer blog ahi encotraras el tuto

      http://annyzkawaiiworld.blogspot.mx/2011/08/imagen-estatica-en-el-blog-modo-facil.html

      saludos

      Eliminar
    2. 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/

      Eliminar
  4. GENIAL *_*
    encerio GENIAL ahora mis comentarios lucen muy bellos
    gracias me ha fasinado :$ enverdad gracias annyz :3 eres una gran chica Bss!

    ResponderEliminar
  5. Hola Annyz: Está re-cool! Quedan muy lindos tal vez pronto lo haga. Gracias por enseñarnos. Besitos =)

    ResponderEliminar
  6. ooh annyz como te quierrooo
    diria te amo pero no seria algo raro .__. XD
    no en serio
    eres genial y no lo olvides
    gracias lo probare linda ^^
    kisess :*

    ResponderEliminar
  7. Gracias Anny >w<
    Ya lo puse en mi blog x3

    ResponderEliminar
  8. Lo puse ya nwn! Queda muy mono ^^
    Te ha quedado muy bien, espero ver más tutos pronto ^^

    ResponderEliminar
  9. Wao! que sencillo O.o
    Gracias! lo probare en mi blog a ver que tal queda :D
    Ah! por cierto te gustan los animes?

    ResponderEliminar
    Respuestas
    1. sii me encantan >.<
      te 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

      Eliminar
    2. Wou! Haz Visto muchos animes >.<
      A 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

      Eliminar
  10. Hola me encanta tu blog felicitaciones :D

    mira 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

    ResponderEliminar
    Respuestas
    1. ah y muy lindo el tuto me sirvio y me encanto felicitaciones eres GENIAAAAAAAAL!!

      Eliminar
    2. cual codigo probaste del blog anterior?? si gustas ponme el link para ver a cual te refieres sip? saludos

      Eliminar
    3. ok te pongo el link:
      http://annyzkawaiiworld.blogspot.mx/2011/08/imagen-estatica-en-el-blog-modo-facil.html

      bye bye n.n

      Eliminar
  11. 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...)??
    si 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???

    ResponderEliminar
    Respuestas
    1. 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

      Eliminar
  12. Ya lo puse en mi blog. Muchísimas gracias :D
    Este tutorial es genial. Gracias por tomarte el tiempo.

    Saludos!

    ResponderEliminar
  13. Hola Annyz, a mi no me funciona ¿tiene que ver con el tema de la plantilla?
    ¡Que alguien me responda! XD

    ResponderEliminar
    Respuestas
    1. Hola bata,probaste con buscar solamente /*Comments?
      Por si acaso...tal vez buscaste con los puntitos y todo y no aparece :S
      Besos hermosa!

      Eliminar
    2. 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 :(

      Eliminar
  14. Me encanto este tuto! para este Fin de semana lo pondre en mi blog

    ResponderEliminar
  15. el 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 ^^

    ResponderEliminar
  16. Me encanta todo annyz, visita nuestro blo(si quieres) muchos besoos

    ResponderEliminar
  17. hOLA!!
    Yo también lo puse ya en mi blog y me encanta!!
    Gracias!
    Llevaba ya varias semanas queriendolo hacer.

    Gracias!!

    ResponderEliminar
  18. Hola, muchas gracias por el tuto!! Realmente esta hermosicimo tu blog!! Dentro de poco probaré la cajita de comentarios!
    Ahh, por cierto, me preguntaba si me puedo afiliar contigo *O*
    http://darkangelnagatsuka.blogspot.com/
    Allí esta mi blog.

    ResponderEliminar
  19. intentare de probarlo para la plantilla de diciembre *w*

    ResponderEliminar
  20. Lo acabo de poner ^^ queda hermoso, gracias annyz :D

    ResponderEliminar
  21. Hola Annyz! Hermoso diseño..! ^3^
    Me 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 *~*

    ResponderEliminar
  22. 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.

    ResponderEliminar
  23. Annyz, soy muy torpe y un desastre, y no he entendido nada -.-, bueno, nada a partir dec aquí xD

    Buscamos 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? :)

    ResponderEliminar
  24. 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

    ResponderEliminar
  25. Lo voy a intentar. Gracias.

    Oye, Annyz, la foto de los peluches que tiene la bienvenida de tu blog ¿Me podrías regalar la URL?

    Espero tu respuesta.

    ResponderEliminar
    Respuestas
    1. Nop, no me salió n.n Igual, gracias por compartirlo.

      Y lo de la foto de los peluches, no te preocupes, ya encontré una similar x3.

      Que tengas un lindo diciembre.

      Eliminar
    2. aww nena sorry aqui te pongo la imagen

      http://i50.tinypic.com/2mnri2d.png

      disculpame por la tardaza >.<

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

      Eliminar
  26. me gusto el tutorial *^*
    gracias 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

    ResponderEliminar
  27. A mi tampoco me sale, ya no se que hacer para que me quede como aqui :(

    ResponderEliminar
    Respuestas
    1. Ya 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).

      Se ve genial. Gracias por el tuto me encanta tu pagina.

      Eliminar
  28. Hola!!p ¿como haces para ponerle un fonditoo]?

    ResponderEliminar
  29. Muchas gracias... x acer estos tutoriales... ^-^ ♥ vales mucho nena... gracias a ti puedo diseñar mas lindo mi blog ^-^ muchas muchas gracias ♥

    ResponderEliminar
  30. Nena soy paqui me pillo el tuto y lo tuneo a mi forma bss

    ResponderEliminar
  31. Este mu bueno el totu pero tengo una duda:/, como me voy a expandir artilugios?

    ResponderEliminar
  32. ¡Hola Annyz!tengo una duda;¿Como pongo un boton de ''Seguir leyendo''?
    Un beso.

    ResponderEliminar
  33. annyz mi plantilla no tiene ese caracter por cual otro puedo buscarlo?

    ResponderEliminar
  34. Annyz Nuevamente Muchas Gracias tu Tuto nuevamente me funciono al 100% :)

    ResponderEliminar
  35. wiiii alfin pude ponerlo muchas gracias por el aporte!

    ResponderEliminar
  36. mil gracias queda super chuli

    ResponderEliminar
  37. Mil graciaas adoro tu blog nunca lo cierres es lo mejor!

    ResponderEliminar
  38. gracias! *-* aunq no puedo copiar el codigo Dx porq podria ser?

    ResponderEliminar
  39. ya lo logre xD muchas gracias! se ve adorabloso!!! *w*

    ResponderEliminar
  40. Annyz ¿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.

    Muchas gracias, tenga usted buen día.

    ResponderEliminar
    Respuestas
    1. claro dibu mira para que este totalmente cuadrado el contenido busca en el codigo esta parte

      .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.

      Eliminar
    2. 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.

      Muchas gracias, ahora el blog lucirá más formal.

      Gracias, gracias y gracias totales.

      Eliminar
  41. Hola Annyz!!
    He 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!!

    ResponderEliminar
  42. como puedo copiar el codigo n_n juro dar creditos

    ResponderEliminar
    Respuestas
    1. 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

      Eliminar
  43. PIDO PERMISO PARA PONERLO EN MI BLOg

    ResponderEliminar
  44. Acaso soy la unica a la que no le sale hacer esto, porque no puedo copiar el codigo .___. ¡Ayuda!

    ResponderEliminar
    Respuestas
    1. hola 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

      Eliminar
  45. Sin duda un gran detalle. Muchas gracias.

    ResponderEliminar
  46. no me deja copiar el cursor de tu blog :(

    ResponderEliminar
  47. Muchas gracias.. me encanta tu blog

    ResponderEliminar
  48. Dios, 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
    Gracias por todo. Un beso :)

    Z.

    ResponderEliminar
  49. Me encanta tu blog!! Gracias por los tutoriales, me ayudan mucho a comenzar!

    Visita el mío ;)

    http://nanamidreams.blogspot.com.es/

    ResponderEliminar
  50. Gracias por el tuto me ha servido, aunque justo ahora lo hago a las apuradas.
    Y 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 *-*

    ResponderEliminar
  51. no puedo copiarlo no me da la obcion :(

    ResponderEliminar
    Respuestas
    1. Hola lorreyn solo selecciona el codigo y con la tecla Ctrl+C copias el codigo y para pegarlo solo Ctrl+V y listo...:D!!

      Eliminar
  52. Respuestas
    1. Primeramente 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 ^^!

      Eliminar
    2. Holiii!! 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.

      http://milhistoriasporcontar-ninfa.blogspot.com.es/2014/07/conociendo-bloggeros-2.html?showComment=1404505129639#c8984919599151582159

      Besos ^^!

      Eliminar
  53. No me estaba funcionando ningún código hasta que llegue a tu blog. Muchas gracias por el post :)

    ResponderEliminar
  54. Gracias por todo, he puesto mi blog muy kawaii gracias :)

    ResponderEliminar
  55. Gracias por el tutorial...lo voy a usar
    Besos

    ResponderEliminar
  56. 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!!

    ResponderEliminar
    Respuestas
    1. woooow 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