~ Personalize seus Comments !


Hello, pandas ~
Adorei o novo layout do RT, ficou muito fofo *--* Adoro pandas =P
Então gente, hoje eu trouxe um tuto muito legal que é de personalizar a área dos comments ^^
Encontrei este tuto no KW, ok?
Vamos conferir?

1. Antes tenha certeza de que não editou ainda a área dos comentários, se você já editou será mais difícil encontrar o código a ser trocado.

Procure por:

 Comments----------------------------------------------- */.comments .comments-content .icon.blog-author {  background-repeat: no-repeat;  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);}.comments .comments-content .loadmore a {  border-top: 1px solid $(widget.alternate.text.color);  border-bottom: 1px solid $(widget.alternate.text.color);}.comments .comment-thread.inline-thread {  background-color: $(post.footer.background.color);}.comments .continue {  border-top: 2px solid $(widget.alternate.text.color);}

Recomendo que procure pelas partes, será mais fácil. Apague esse código inteiro e no lugar dele, cole:

/* Comments----------------------------------------------- */.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; /*--- cor da fonte do botão reply--- */text-align:center;text-decoration:none;background: #ccc;  /*--- cor de fundo do botão reply--- */background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) ); /*--- cor de fundo gradiente--- */background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );/*--- cor de fundo gradiente--- */border:1px solid #C0C0C0;  /*--- cor da borda do botão reply--- */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; /*--- cor de fundo do botão reply houver--- */border:1px solid #999; /*--- cor da borda do botão reply 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(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px;float:right;}.comments .comments-content .datetime a{font-size:11px;text-decoration:none; color:#666; /* -- cor do link da data do comentário -- */}.comment-content{margin:0 0 8px;padding:0 5px;}.comments .comment-block{margin-left:65px;position:relative;background:#fff; /* -- cor de fundo do comentário -- */border:3px solid #C0C0C0; /* --- cor da borda do comentário ---*/border-radius:8px;-moz-border-radius:8px;}.comment-header{ /*--- linha onde fica o nome do autor do comentário --- */background-color:#f1f1f1;   /*--- cor de fundo--- */font-size:18px;border-bottom:1px solid #C0C0C0;  /*--- cor da borda --- */padding:5px;}.comment-header a{color: $(link.color); /*--- cor do link nome do autor do comentario --- */}.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(http://3.bp.blogspot.com/-uyq6qUMgZY4/T9hNk34hREI/AAAAAAAAAK0/l7bMt9LUPTE/s1600/imagem-arrow.png) top right no-repeat; /*--- imagem arrow---*/float:leftvertical-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 solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important;}

Utilize a tabela de cores para trocar as cores ^^
Salve e pronto !
Kisses

21 comentários:

  1. Respostas
    1. Eu também, sempre uso ele =P
      Que bom que gostou =)
      Kisses ~

      Excluir
  2. Código enooooooorme, mas o resultado é lindo :3

    ~xoxo
    pequena-julieta.blogspot.com

    ResponderExcluir
    Respostas
    1. É sim, grande mesmo rsrs .
      Ah é, fica muito lindo ^^
      Kisses ~

      Excluir
  3. Adorei o tutorial! Me ajudou bastante *-* O legal é que ele dá ao blog um toque bonitinho, então ele contribui para não ficarem criticando o blog de feio, ele é bem forte quando se trata de estética. Valeu!

    ResponderExcluir
    Respostas
    1. Que bom ! Fico feliz por ter ajudado =) Ah é, dá sim ^^ Verdade, estas pessoas adoram criticar :/ Uhum ! Ah, eu que agradeço pelo seu comment, fofa :)
      Kisses ~

      Excluir
  4. Que lindinho que fica *uuu* Adorei ~ O código é muito grande hahaha

    ResponderExcluir
    Respostas
    1. Fica muito fofo o resultado °w°
      Que bom que gostou ^.^
      Ah é ! kkk'
      Kisses ~

      Excluir
  5. Eu estava mesmo precisando personalizar a área dos comentários do meu blog... vou ver se consigo :D O tutorial é muito útil e o código é bem grande, haha.

    Beijos, I'm Fucking a Zombie.
    Tem postagem nova lá no blog :p

    ResponderExcluir
    Respostas
    1. Tomara que você consiga ;) É sim, eu sempre uso ele ^^ Ah é, super grande ! kkk'
      Kisses ~

      Excluir
  6. Este tutorial é ótimo ,foca lindo no blog né.
    Beijos :3

    blogs-sempre-teen.blogspot.com

    ResponderExcluir
    Respostas
    1. É sim, e muito útil :3 Ah é, fica lindo °w°
      Kisses ~

      Excluir
  7. Bem legal, vou tentar fazer, então, pode seguir meu blog?
    http://cupcakevirtual2012.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom que gostou ^.^ Tenta sim, vai ficar lindo ><'
      Claro, vou dar uma olhada ;)
      Kisses ~

      Excluir
  8. Belo tutorial,código grande...mas vale a pena
    ser trabalhado.
    Abraços♥

    ResponderExcluir
  9. É um ótimo tuto, deixa super fofa a área dos comentários

    ResponderExcluir
  10. n achei o negocin, em q parte fica?

    ResponderExcluir