Personalizar comentários no novo blogger

Desde o lançamento do novo sistema de comentários no Blogger, com a opção Responder Comentários, que algumas personalizações, simplesmente deixaram de funcionar.
Alguns usuários perderem todas as mudanças realizadas anteriormente, e isso ocorreu porque com a implementação do novo sistema, houve alterações na codificação da área de comentários.

Neste tutorial, veremos como aplicar um estilo diferente aos novo sistema de comentários do Blogger.

No painel do blogger, acesse o menu “modelo“, clique em “editar html” e 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);
}

e SUBSTITUA todo o trecho que você localizou por este a seguir:

/* 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: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;
}

P.s: Dependendo do modelo do seu template, pode ser que o código acima esteja um pouco diferente. O importante é que você localize todo o código css referente aos comentários, para poder fazer a substituição.

No código acima, os trechos personalizáveis estão destacados.
A "setinha" que eu usei no box de comentário é esta abaixo.

Sugiro que você salve a imagem no seu pc e depois hospede em seu blog.
Lembre-se que: Se quiser alterar a cor da borda em volta do box de comentários, você deverá seguir a mesma cor da "setinha", ou seja, terá que fazer outra imagem.