Personalização para Área dos Comentários


Me pediram um tutorial de como personalizar a área dos comentários, igual à do blog. Eu aprendi esse tuto lá no Kawaii World, mas eu fiz algumas edições, coloquei borda quadrada e tudo mais. Ah, e como o KW está fechado, peguei o código do meu HTML. Não se esqueça de creditar aos dois blogs. Vamos aprender?

O resultado é esse:

Vá no seu HTML e procure por:
/* Comments
----------------------------------------------- */

Apague tudo que estiver abaixo dessa tag e, no lugar, cole o seguinte código:

.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--- */
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 #ffa9b3; /* --- cor da borda do comentário ---*/
}
.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 #4ac7c1;  /*--- cor da borda --- */
padding:5px;
}
.comment-header a{
color: #4ac7c1; /*--- 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: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 solid #ccc;
width:45px !important;
height:45px !important
;max-width:45px !important;
max-height:45px !important;
}

Sim, o código é um pouco extenso, mas é muito fácil de editar. Está tudo explicado no próprio código. 
Bom, é isso, se usar credite os dois blogs.

Espero ajudar quem pediu.
Beijos

28 comentários:

  1. oiii adorei o tuto, vou fazer no meu blog... mas flor, eu queria saber como que faz para escrever algo acima do comentario, tendeu?! é assim... como faço para escreve
    "Deixe um comentário! Sua opinião é muito importante ;)
    E não se esqueça de deixar o link do seu blog para que eu possa retribuir hein?! *-*

    Um beijo ♥"
    isso ai no meu blog...rsrs...bjusss
    Tainara
    domeujeito100.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Para personalizar essa frase, basta você ir em: Configurações > Postagens e Comentários > Mensagem do formulário de comentário > Escrever o que quiser e pronto.

      Excluir
  2. Muito bom esse tutorial!
    Visita meu blog!De-sakura-blog.blogspot.com

    ResponderExcluir
  3. Adorei o tutorial, já tinha visto no Kawaii World.
    Obrigada pela visitinha (inesperada)no meu blog, estou muito grata ^^ E sigo aqui também.
    Beijos ♥, the-kawaii-smile

    ResponderExcluir
  4. Amei Amei Amei ^^

    Anjo,obg pela visita la no blog,Seguindo aqui tbm
    Beijoo ♥

    patydeallstar.blogspot.com

    ResponderExcluir
  5. Fica muito lindo! *o*



    http://amillapontop.blogspot.com.br

    ResponderExcluir
  6. Ai que lindo!! Adorei demais! #Indo colocar u-u

    chovendodiamantes.blogspot.com

    ResponderExcluir
  7. Fico lindo ! *-*
    Beijos
    nobodyslistenvei (blogspot)

    ResponderExcluir
  8. Usei ele lá no wonderland ><

    E muito lindo mesmo. SAUHHUSA'

    - Wonderland Cherry.

    ResponderExcluir
  9. OMG, estava louca por esse tutorial, mas pediram antes de mim (u-u) O resultado fica muito lindo e é diferente dos outros porque você precisa configurar os comentários para o modo Pop-up, esse o comentário pode ficar incorporado, o que economiza bastante tempo. Bezzo, sarah
    http://svt-pistache.blogspot.com.br/

    ResponderExcluir
  10. Que perfeito, tava doida para personalizar a área dos meus comentários, e esse é perfeito, vou usar algum dia !

    ResponderExcluir
  11. Adorooo a área dos comentários personalizado, eu tipo piro. Infelizmente nem vou tentar. Nada pega naquela bosta, por isso não modifico para botar a opção responder. Já pedi ajuda para as mais experientes e ninguém responde, tanto que já desisti. '-'

    ResponderExcluir
    Respostas
    1. Para os códigos realmente funcionarem você terá que zerar o designer , ai pegará todos os códigos inclusive esse daqui :P Eu sei porque isso já aconteceu comigo

      Já tinha visto lá no Kw mais aqui sei la parece que ta mais explicado heh

      http://praia234.blogspot.com/

      Excluir
  12. Lindo! Mas não editei. Não sou boa com essas coisas.

    ResponderExcluir
  13. Usando já no meu novo layout, brigadinha!!
    #May-Sun

    layrakauana.blogspot.com

    ResponderExcluir
  14. Adorei apesar de ser bem dificil beijos :*
    minhas-confissoes-2012.blogspot.com

    ResponderExcluir
    Respostas
    1. Não é difiiiiiiicil! É só complicado, por que é grande.
      ^^
      Ótimo tuto.
      Beijos
      Minha Vida Fora de Série -perfil

      Excluir
  15. Usandooo :D Amei

    Garota original
    Acesse peloo perfio <<<<<<

    ResponderExcluir
  16. Deu certo, amei.
    mais como faço para mudar o fundo cinza?
    http://vestindo-sorrisos.blogspot.com.br/2013/04/unha-de-vaquinha.html#comment-form

    ResponderExcluir
  17. Usei no layout que estou criando ok?

    ResponderExcluir
  18. Adorei o tuto, fiz no meu novo blog :3
    parabens!

    ResponderExcluir
  19. Amei esse tuto e já estou usando,bjs...
    http://ateliecasaepresentes.blogspot.com.br/

    ResponderExcluir
  20. Gostei do modelo de comentário, to usando.
    bjs http://blog-patriciamachado.blogspot.com.br/

    ResponderExcluir

Obrigada pelo seu comentário, sua opinião é muito importante!
Se seu perfil for trancado, não se esqueça de deixar o link do seu blog ou pelo menos o nome, para que eu possa retribuir. ♥

« » +