Modelo para área dos comentários [007]

Hello! Como vão todos? Espero que bem. Venho trazer mais um modelinho para comentários, dessa vez Azul, ele é perfeito para modelos clean, [confira mais modelos aqui], os créditos vão para o blog The Moon Reverse!, ok? Ele é realmente muito gracioso. Abaixo explico como adicionar o modelo ao seu layout.

~~Modelo~

1. Vá até o HTML e procure pela área de comentários, geralmente ela é demarcada com /*comments, ao achar apague toda essa parte e substitua toda a área própria pelo código seguinte:

Códigos

/* Comments h4
----------------------------------------------- */
#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
color: transparent;
font-size:0px;
}
/* Modelo de ommentários por The Moon Reverse!
----------------------------------------------- */
@font-face {font-family: "handy"; src: url('http://static.tumblr.com/hy7mzgw/tusmw3v70/handy00.ttf');}
.comments{
clear:both;
margin-top:10px;
margin-bottom:0;
line-height:18px;
font-size:13px;
}
.comments .comments-content{
margin-bottom:11px;
font-style: normal;
font-weight: normal;
font-family:'Nunito', sans-serif;
text-align:left;
}
.comments .comment .comment-actions a {
display:inline-block;
margin-right: 4px;
padding: 4px;
text-decoration: none;
color:#d4d4d4 !important; /*--- cor da fonte do botão reply--- */
text-align:center;
background: #f0f0f0;  /*--- cor de fundo do botão reply--- */
box-shadow: 1px 1px 0 #e2e2e2;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
cursor:pointer;
font-family: "handy";
font-size: 8px;
}
.comments .comment .comment-actions a:hover {
text-decoration: none;
}
.comments .comment-thread.inline-thread {
background-color:transparent !important;
padding:0.5em 1em;
border-radius:5px;
border:0!important;
margin-right:-15px
}
.comments .comments-content .datetime a{
font-size:11px;
text-decoration:none;
color:#fff; /* -- cor do link da data do comentário -- */
text-shadow: 1px 0 2px #9dbdd0;
font-weight: normal;
font-style: normal;
text-align:right;
float: right;
}
.comment-content{
margin:0 0 8px;padding:0 5px;
}
.comments .comment-block {
margin-left: 70px;
}
.comments .comments-content .comment-content{
margin-top: -6px;
background: #f4f4f4;
border: 1px solid #e4e2e2;
padding:5px;
color: #d4d4d4;
text-shadow: 0 0 0 transparent;
}
.comment-header {
background: #d5e4ed;
border: 1px solid #c0d8e5;
padding: 4px;
font-size:15px;
font-style: normal;
font-weight: normal;
font-family:'Nunito', sans-serif;
text-transform:uppercase;
color: #a3c5d8;
}
.comment-header a{
color: #fff; /*--- cor do link nome do autor do comentario --- */
text-shadow: 1px 0 2px #9dbdd0;
font-weight: normal;
font-style: normal;
}
.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 .comment-block { margin-left: 52px; margin-top: 2px; /*Espaço entre o avatar e o corpo do comentário*/
}
.avatar-image-container{
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:1px;
border:1px solid #e3e3e3;
width:45px !important;
height:45px !important
;max-width:45px !important;
max-height:45px !important;
-moz-opacity: 0.79;
-khtml-opacity: 0.79;
opacity: 0.79;
}
.comments .avatar-image-container img:hover{
-moz-opacity: 0.90;
-khtml-opacity: 0.90;
opacity: 0.90;
}

Agora é só salvar.