Modelo para área dos comentários [001]

Boa tarde meus amores, como vão? Venho trazer uma péssima noticia...eu irei me mudar em breve... e por esta razão irei fazer algumas postagens programadas, então terá um aviso sempre avisando quando for uma, mas mudando de assunto hoje venho postar um modelo para área de comentários de vocês. Os créditos vão para o blog Six Teen, eu realmente não sei se é o que criou o modelo, mas como só achei lá coloquei os créditos, caso saibam deixe um recadinho me avisando. Bom eu coloquei no final do título (2), por já ter postado outro modelinho aqui de comentários então caso queira dar uma olhada nele, visite esta pagina. Então pronto para o tutorial? É bem fácil.

 Modelo da área

1. Primeiro procure por #comments {, então apague todos os códigos que se refere as comentários, esse aqui abaixo:

Códigos

#comments {
  background: $(comments.background);
  padding: 15px;
}

#comments .comment-author {
  padding-top: 1.5em;
}

#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
  color: $(post.title.text.color);
}

#comments .comment-author:first-child {
  padding-top: 0;
  border-top: none;
}

.avatar-image-container {
  margin: .2em 0 0;
}

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

2. Apague todo ele é cole este no lugar:

Códigos

#comments {

  background: $(comments.background);

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvvR7SbiELb6hlomlf0M2J7WoBHmUqvBnif_mudugtG7FtqmUs1VhP5CEEXg57LH83hSKm76mtofDLVAP_bF49rrr1J8FanO22QK1gLpKyhl-jmZva90NotTNXZz-xnigjvbqPteiRdRQ/s1600/gray-with-pink-flowers.gif) repeat;

  padding: 15px;

}

#comments .comment-author {

  padding-top: 1.5em;

}

#comments h4,

#comments .comment-author a,

#comments .comment-timestamp a {

  color: $(post.title.text.color);

}

#comments .comment-author:first-child {

  padding-top: 0;

  border-top: none;

}

.avatar-image-container {

  margin: .2em 0 0;

}

/* 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:#444444 !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 #68439e; /*--- cor da borda do botão reply--- */

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 #c496cb; /*--- 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: #f3f3f3;

height:18px;

display:inline-block;

margin:0 0 -4px 6px;

float:right;

}

.comments .comments-content .datetime a{

font-size:11px;

text-decoration:none; color:#666666; /* -- 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 #68439e; /* --- cor da borda do comentário ---*/

}

.comment-header{ /*--- linha onde fica o nome do autor do comentário --- */

background-color:#cecece; /*--- cor de fundo--- */

font-size:18px;

border-bottom:1px solid #99969d; /*--- cor da borda --- */

padding:5px;

}

.comment-header a{

color: #f3f3f3; /*--- 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg05gvsEKntpefTGkOFn5d-gUdzB3xrJNZ3V-twJYwv6ZzYGFXKr7rRfig6t5eGMr8gX2L7GCpI1VKmaYh5HvLUi8r7xQ3of2gHuvsqPb7DThZ_DAFpChq6BvwVFPanRn3QSgDPI23Ys7c/s1600/autorprofile.png") no-repeat scroll 0 0 transparent;

}

.comments .thread-collapsed .thread-arrow{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg05gvsEKntpefTGkOFn5d-gUdzB3xrJNZ3V-twJYwv6ZzYGFXKr7rRfig6t5eGMr8gX2L7GCpI1VKmaYh5HvLUi8r7xQ3of2gHuvsqPb7DThZ_DAFpChq6BvwVFPanRn3QSgDPI23Ys7c/s1600/autorprofile.png") no-repeat scroll 0 0 transparent;

}

.avatar-image-container{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Fjy7BVRWx_0cK-iUq5kzerq-rPO6BZ_LbVGoR0eGMf12ypBjA8GBIxGrvwua-0w7Vr5s9IMDP71QtP7qDXZ-P2E7V9H3X-7h0tbKcYoitM4KJ5I4lMQnnnh6jnkFtZ9qWqGwVCgqWkg/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;

}

Então gostaram? Espero que sim!!!!