Comentários personalizados

                    

Oi povo lindo, como estão? Eu tou bem .. Hoje eu vim trazer um tutorial bem legal que eu achei nesse site >> (www), achei bacana.. Usei no Layout que fiz pra esse blog >> (www), falando em layout, eu estava aqui pensando em fazer layout's  pra vocês.. 

O que acham? Ai eu faço e disponibilizo aqui no blog a vocês.. Mas isso so vou resolver depois!

Vamos ao tuto?

Os comentários ficará bem assim:

Eu testei no modelo Viagem, fucionou.. Aconselho a vocês usarem antes em um blog teste, ou ter uma cópia salva da layout em seu pc

Procure por  /*Comments e você vai encontrar algo assim:

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

Quando encontrar apague tudo isso e substitua por esse código abaixo:

/*Blogger Threaded Comments Styles From http://www.dicasblogger.org*/

#comments{overflow:hidden} #comments h4{display:inline;padding:10px;line-height:40px} #comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative} #comments h4,.comments .continue a{background:#d80556} #comments h4,.comments .user a,.comments .continue a{font-size:16px} #comments h4,.comments .continue a{font-weight:normal;color:#fff} #comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #d80556;border-right:20px solid transparent;width:0;height:0;line-height:0} #comments .avatar-image-container img{border:0} .comment-thread{color:#111} .comment-thread a{color:#777} .comment-thread ol{margin:0 0 20px} .comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#d80556} .comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px} .comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px} .comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px} .comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em} .comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid9G7vh0fuK6wD0zWs7hUeOO06dG1EH41q-4J9LTB0_D4w81_1_38yFYVCb1vTQRr2gM86YCSIkBMkK3uDOXtke7ae19ulk6Mt-9AS6nXraSdpoHP0qam8dGxJ0gUXi0ivEhPe17BnlLw/);width:36px;height:36px} .comments .comments-content .inline-thread{padding:0 0 0 20px} .comments .comments-content .comment-replies{margin-top:0} .comments .comment-content{padding:5px 0;line-height:1.4em} .comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent} .comments .comment-thread.inline-thread .comment{width:auto} .comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px} .comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0} .comments .comment-thread.inline-thread .comment-block{margin-left:48px} .comments .comment-thread.inline-thread .user a{font-size:13px} .comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px} .comments .continue{border-top:0;width:100%} .comments .continue a{padding:10px 0;text-align:center} .comment .continue{display:none} #comment-editor{width:103%!important} .comment-form{width:100%;max-width:100%}
/*Blogger Threaded Comments Styles From http://www.dicasblogger.org*/

Pra tirar o fundo cinza dos comentários procure por #comments { e logo você vai encontrar alguma coisa parecida com isso:

#comments {
padding: 15px;
}

Então dentro das chaves cole o seguinte código:

background: url(LINK DA IMAGEM DE FUNDO) repeat;