Tutorial-Personalizando os comentários

Oiie :3

Ontem não postei pois estava fazendo o novo layout do blog,esse lay está aqui a 3 dias e eu já tô querendo trocar -q,eu meio que enjoei dele :P,deve ser porque ele é muito claro e tals,então estou fazendo um escuro *u*,mas uma das duas cores que usei nele, usei nesse layout.

Mudando de assunto,eu estava no Sweet Girl(créditos no final),e vi um tutorial de como personalizar os comentários,eu achei muito lindinho,tanto é que irei usar no próximo lay -q

Vamos ao tutorial?

mas como sempre,leia mais ^-^

O modelo ficará assim:

Para aplicá-lo em seu blog:

1-Abra o HTML

2-clique em ctrl + F e procure por:

/* Comments

E irá aparecer isso:

/* Comments
----------------------------------------------- */
#comments a {
  color: $(post.title.text.color);
}

.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 $(post.title.text.color);
  border-bottom: 1px solid $(post.title.text.color);
}

.comments .comment-thread.inline-thread {
  background: $(post.background.color);
}

.comments .continue {
  border-top: 2px solid $(post.title.text.color);

}


Apague Todo  esse código e substitua por:
/* Comments
----------------------------------------------- */
.comments{clear:both;margin-top:10px;margin-bottom:0;line-height:20px;font-size:12px}
.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:#ffffff !important; /*--- cor da fonte do botão reply--- */
text-shadow:0 1px 5px #8a8889;
text-align:center;
text-decoration:none;
background: #e9e6e8;  /*--- cor de fundo do botão reply--- */
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #f5e7bc), color-stop(1, #ebd091) ); /*--- cor de fundo gradiente--- */
background: -moz-linear-gradient( center top, #f5e7bc 20%, #ebd091 100% );/*--- cor de fundo gradiente--- */
border-radius:5px;
-moz-border-radius:5px;
height:27px;
line-height:28px;
font-weight:normal;
cursor:pointer;
}
.comments .comment .comment-actions a:hover,.comments .comment .continue a:hover {
text-decoration: none;
background:#d9d9d9; /*--- cor de fundo do botão reply houver--- */
}
.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{
position:absolute;
top: -2px;
right: 160px;
margin:0;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwBVFIs-wuxRhjazGQCsBaMz3Q8aIjnk6nJnivGXoqFvzbZn1kDzK90QP49W9oQanhUr_7pgICMVIHc5FY81fTQhquh_brMn_oT4EBxiuylo83DgYrrm0Y91k7Pb-AVQ4EUUrj-l9s490/s1600/09.png);width:32px;height:36px
}
background-repeat: no-repeat;
width:20px;
height:20px;
display:inline-block;
margin:0 0 -4px 6px;
float:right;
}
.comments .comments-content .datetime a{
font-size:12px;
float: right;
text-decoration:none; color:#e0c686; /* -- 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 #f4b9d0; /* --- cor da borda do comentário ---*/
border-radius:5px;
-moz-border-radius:5px;
}
.comment-header{ /*--- linha onde fica o nome do autor do comentário --- */
background-color:#f6f6f6;   /*--- cor de fundo--- */
font-size:18px;
border-bottom:1px solid #d8d5d5;  /*--- cor da borda --- */
padding:5px;
}
.comment-header a{
color: #f086ae; /*--- 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{
width:65px !important;
height:65px !important;
max-width:65px !important;
max-height:65px !important}
.comments .avatar-image-container img{
padding:2px;
border:2px solid #eccc5b;
width:45px !important;
height:45px !important
;max-width:45px !important;
max-height:45px !important;
-webkit-border-radius: 3px;
-webkit-transition-duration: .50s;
}
.comments .avatar-image-container img:hover{
padding:2px;
border:2px solid #f5c520;
width:45px !important;
height:45px !important
;max-width:45px !important;
max-height:45px !important;
-webkit-border-radius: 3px;
-webkit-transition-duration: .50s;
}

Depois é só personalizar e salvar ^-^

Créditos:Sweet Girl

Foi só isso..

Beips :3