tutorial de comentarios personalizados

Olá amigos tudo bem com vocês?

Hoje trago para vocês um tutorial (tirado do blog em que eu escrevo ,nao quero anunciar mas como regraeu tenho que fazer issohttp://alinewdesigner.blogspot.com.br)

como personalizar a área de comentários:

É um pouco complicadinho caso você queira fazer modificações, mas caso queira igual é fácil pois é só copiar todo o código e clique em Editar HTML, procure por ]]> cole o código copiado acima dele e pronto. Então vamos ao código?

/* AREA GERAL DOS COMENTÁRIOS*/
.comments{ width:90% !important;/* tamanho da área do comentários, pode diminuir ou aumentar*/ margin:0 auto; font: 1em normal  "verdana"!important; background:#fff !important/* cor de fundo */; color:#fff; border-radius:50px; }
/*HEADING(1 comentario, 2 comentários...)*/
.comments h3,.comments h4{ width:98%; padding:7px; margin-bottom:10px; color:#8B8B83; /* Cor do texto*/ font: 33px "verdana" !important; }
/*BLOCO*/
.comments .comment-block { position:static !important; /* Mantém o Avatar na Frente */ background:#fff; /* Cor de fundo */ margin-left:28px; padding:0 15px 5px 23px; border-top:5px #febdc4 solid; border-bottom-left-radius:30px; border-bottom-right-radius:5px; box-shadow:0 0 3px #aaa }
.comments .comments-content .comment { padding:20px 10px !important; margin-bottom:15px !important }
/* estilos para o nome do autor do comentário */
.comments .comments-content .user a,.comments .comments-content .user{ font-style:normal; border:0; color:#fff !important; font: 22px "verdana"; background:#febdc4; padding:4px 36px; margin-left:-8px; border-bottom-right-radius:10px;margin-top:-2px }
/* estilo da data */
.comments .comments-content .datetime a{ background: transparent !important; font: 9px bold  courier new; float:right; color:#aaa; border:0 !important }
/* estilo do avatar */
.avatar-image-container {position:absolute !important; min-width:60px; min-height:60px; border:5px #febdc4 solid; border-radius:60px; padding:0 !important; box-shadow:0 0 3px #febdc4; margin-left:-9px !important; margin-top:0 !important; background:#fff; overflow:hidden }
.avatar-image-container img { margin:0; display:block; max-height:60px; min-height:60px; max-width:60px; min-width:60px; padding:0 !important; border-radius:60px; border:0 !important; overflow:hidden /* hack para evitar serrilhado na imagem */ }
/*TEXTO DO COMENTÁRIO*/
.comments p{ font:1em "courier new" !important; text-shadow:0 0 !important; padding-left:20px !important; color:#9C9C9C !important }
/* botao responder do segundo nível */
.comments .continue a { background:#fff !important; color:#777 !important; float:right; padding:2px 4px!important; height:23px;line-height:23px !important; margin-top:-45px !important; text-shadow:0 0 !important }
/* botao responder do primeiro nível, mais estilos para o botao do segundo nível */
.comments .comment .comment-actions a,.comments .continue a { font:1em "helvetica" !important; color:#fff; padding:3px 6px; border:0 !important; line-height:30px; margin:5px; margin-left:10px; text-shadow: 0 1px #999; border-radius: .5em; background: #ff82ab; font-weight:800; box-shadow:inset 0 1px 2px #666 }
/* botao hover*/
.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover { text-decoration:none !important; padding-bottom:4px }
/* estilos para bloco de respostas */
.comments .comment-thread.inline-thread { background-color:transparent !important; padding:0.5em 1em; border-radius:5px; border:1px #ddd dashed !important }
.comments .comments-content .comment-replies { margin-top:1em; margin-left:56px !important }
.comments .continue { border-top:0 !important }
.comments .thread-toggle,.icon.blog-author {display:none !important}
/*estilos para formatação do texto dos comments*/
.comments .comments-content a{background:#999 url(http://lh3.ggpht.com/_NZJzdRm10Y0/TTSFb1rPnWI/AAAAAAAAAFM/1kbIuCoul8A/s800/th_minisetas.gif)no-repeat left;color:#000;padding-left:15px;font-weight:400} .comments .comments-content em{font:normal 12px 'segoe script';color:#fff} .comments .comments-content b{font:bold 11px 'arial';color:#999;text-shadow:0 0} .comments .comments-content strong {margin:10px 0;border:1px #fff solid;background:url(http://2.bp.blogspot.com/-rRFTCvBi0A4/TwXcVciZO0I/AAAAAAAAWzM/K2dXpNdjcaw/s1600/code.jpg);overflow:auto;width:98%;position:relative;border-radius:10px;box-shadow:0 0 5px rgb(199,198,166);color:#000;display:block;padding:5px 12px;text-shadow:0 1px #fff;line-heigth:18px;font-size:12px}
/*Fim*/

Grandinho né amigos? Mas fazer o que é assim mesmo, tudo que é bonito demora um pouco pra terminar.
Bom amigos é só isso , espero que tenham gostado, beijos e tenham um dia maravilhoso.