Tutorial- Como personalizar a área dos comentários

Oiee amores da minha life. Vou ensinar vocês á personalizarem a área dos comentários blog. Espero que gostem, vamos lá:

Vá no seu blog > Em Modelo > Prosseguir > Dê um Ctrl + F e procure por /* Comments. Abaixo disso vai estar escrito mais ou menos 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);}

Abaixo disso, cole esse código:

/**======================================================================

AREA GERAL DOS COMMENTS========================================================================**/@font-face {font-family:'Fugaz One';font-style:normal;font-weight:400;src:local('Fugaz One'),local('FugazOne-Regular'), url('http://themes.googleusercontent.com/static/fonts/fugazone/v3/foh--NswBHNPbRHy7yEyyD8E0i7KZn-EPnyo3HZu7kw.woff') format('woff')} .comments{width:99% !important; /* TAMANHO DA AREA DOS COMMENTS - se passar da coluna diminua */margin:0 auto;font-style:normal !important;font-size:12px !important; /* TAMANHO DO TEXTO - se ficar pequeno, aumente os pixels */font-family:verdana !important; /* FONT DO TEXTO - se preferir troque */background:#fff url(https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcRH32JrBue783v9_ivzFvoenOigRer_6lnVV6O5BwolQxvq-N8eWw) /* IMAGEN DO FUNDO */}  /**=======================================================================HEADING DOS COMMENTS (1 comentario, 2 comentários...)========================================================================**/ .comments h4{width:98%;padding:7px;margin-bottom:10px;background:#FF69B4; /* COR DO FUNDO - se preferir troque */
color: #FFFFFF; /* COR DO TEXTO - se preferir troque */
font-family:'Fugaz One' !important;/* FONT-FAMILY - se preferir troque */font-size:20px ; /* TAMANHO DO TEXTO - se preferir troque */text-shadow:0 1px #fff;box-shadow:0 2px 3px #000000/* EFEITO SOMBRA */
} /** ==================================================================BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone ...)====================================================================**/ 
.comments .comment-block {position:static !important; /* MANTÉM O AVATAR NA FRENTE DO BLOCO - NÃO MUDE */background: #FF1493 !important; /* COR DO FUNDO */
padding:0.5em 1em;border-radius:5px !important;box-shadow:inset 0 1px 4px #aaa !important /* EFEITO FUNDO REBAIXADO*/} .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{font-style:normal;border:0;margin-left:10px;color: #00FFFF !important;
text-shadow:0 1px #fff;font-family:'Fugaz One';background:none;padding-left:0} /* estilo da data */.comments .comments-content .datetime a{background:none;float:right;font-size:9px;color:#fff;} /* estilo do avatar */.avatar-image-container {min-width:60px; /* determina um minimo de largura */min-height:60px; /* determina um minimo de altura */border:5px #f7b solid; /* borda */border-radius:35px/10px; /* arredondamento */padding:0 !important;box-shadow:0 0 3px #ccc; /* sombra */margin-left:6px !important;margin-top:-1px !important;background:#fff;overflow:hidden /* hack para evitar serrilhado na imagem */} .avatar-image-container img {opacity:1.0; /* opacidade */margin:0;display:block;max-height:60px;min-height:60px;max-width:60px;min-width:60px;padding:0 !important;border-radius:35px/10px; /* arredondamento */overflow:hidden;border:0 !important;overflow:hidden /* hack para evitar serrilhado na imagem */}   /** ==================================================================TEXTO DO COMENTÁRIO====================================================================**/ 
.comments blockquote{background:transparent !important;border:0 !important;font-style:normal !important;font-size:12px !important;font-family:arial!important;text-shadow:0 0 !important;padding-left:20px !important;color:#777} /** ==================================================================BOTÕES - RESPONDER, EXCLUIR====================================================================**/ 
/* botao responder do segundo nível */.comments .continue a {float:right;padding:2px 4px!important;height:23px;line-height:23px !important;margin-top:-45px !important;text-shadow:0 0 none !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-size:11px !important;color: #FFD700 !important;
padding:3px 6px;border:0 !important;line-height:30px;margin:5px;margin-left:10px;font-family:trebuchet;text-shadow: 0 1px #fff !important;border-radius: .5em;box-shadow: 0 1px 2px rgba(0,0,0,.2);background: #ffe;background: -webkit-gradient(linear, left top, left bottom, from(#ffe), to(#ff1))!important;background: -moz-linear-gradient(top, #ffe, #ff1)!important;} /* botao hover*/.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover {text-decoration:none !important;padding:6px} /* botao excluir */.comments .comment .item-control a{color:#fff !important;background: #48D1CC;
background: -webkit-gradient(linear, left top, left bottom, from(#f7a), to(#f9e)) !important;background: -moz-linear-gradient(top,#f7a,#f9e) !important;} /* estilos para bloco de respostas */.comments .comment-thread.inline-thread {background-color:transparent !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} /** ==================================================================BONUS - estilos para formatação do texto dos comments====================================================================**/ 
.comments .comments-content a{background:#fee url(http://i4.photobucket.com/albums/y121/carolzits/dandara/free/mini_gifs/page4/PAGE4_34.gif)no-repeat left;color:#DF6699;padding-left:15px;padding-right:3px;border:1px #fff dashed;font-weight:400}.comments .comments-content em{background:#fee;font:normal 12px 'segoe script';color:#ff1490}.comments .comments-content strong{background:#fff;font:normal 12px 'consolas';color:#000;display:block; border:1px #eee dashed}.comments .comments-content b{font-weight:800;color:#DF6699;text-shadow:0 1px #ccc}  /** ==================================================================Fim [by Gabriela// http://depoimentoseperfis-prontos.com]====================================================================**/

Personalize como quiser ou deixe assim, salve. Pronto, agora seus comentários estão liindos!

By: Bia Leal