Reino Kawaii

Olá! Hoje trouxe um tutorial muito útil sobre como personalizar a área de comentários no Blogger, deixando uma aparência agradável ao leitor no espaço em que se comunica conosco. Testei o código nos modelos Travel e Simple. E para montar o primeiro código minha fonte foi o Papo Garota. Os demais são resultados da minha curiosidade

 #comments {
background: #fff;
padding: 10px;
width: 95%;
}
.comments h4 {
background: #fff;
color:#fcc !important;
text-align: center !important;
font-size:22px;
font-family: 'Petit Formal Script', cursive;
text-shadow: 1px 2px 3px #fcc;
border-bottom: 2px dashed #eee;
}
.comments .comment-block {
margin-left: 60px;
}
.comments .comments-content .comment-content{
margin-top: -8px;
position: relative;
background: #fff;
padding: 5px;
color: #ccc;
font-size: 12px;
}
.comments .avatar-image-container {
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
background: #eeffff;
padding: 5px;
margin-top: -15px;
}

.comments .avatar-image-container img{
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
margin-top: 0px;
}
.comment-header {
background: #eeffff;
border-bottom: 5px solid #fee;
padding: 5px;
}
.comment-header a {
color: #81E6FF !important;
text-shadow: 1px 2px 3px #fff;
font-size: 15px;
}
.comment-header a:hover {
color: #fff !important;
text-decoration: none;
border-bottom: 1px dashed #fff;
}
.comments .comments-content .datetime a{
font-size: 11px !important;
float: right;
}

.comments .comment .comment-actions a {
padding: 5px;
background: #eeffff;
color: #fcc !important;
margin-right: 10px;
}

.comments .comment .comment-actions a:hover {
background: #eeffff;
color: #ccc !important;
text-decoration: none;
border-bottom: 1px dashed #fff;
} 

 

 /* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
  background-repeat: no-repeat;
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEjTNhf58KdEa7rYgRCg-W44MO2eIhw-RUaWOshsPvPEgg6cQwbH5bJazEtgX0TcP7TgTsnMw4gwMXyW9GD_EBc80RtQYeOIMJUItVmQPchGK1JgeIXdPlNRrYZlxqfypD_atJpHh7LOs/s1600/tumblr_lw99pbqLZL1qcfn0j.gif");
}

.comments .comments-content .loadmore a {
border: none;
}

.comments .comment-thread.inline-thread {
  background: #transparent;
}

.comments .continue {
  border: none;
} 

 /* Comments
----------------------------------------------- */
#comments a {
  color: #fcc;
}

.comments .comments-content .icon.blog-author {
  background-repeat: no-repeat;
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIZh6qC9qzQXywijpxfR2Bk-I6C34SnGwO-y0kUiqBXJYugvwUBh9ohxLfmt74uio4g_VR9FOtskRjHY6d-N2bCbbbfsYK3hY3XAtjNmhZWuDN2dNtJ9scQFob6tb0n8rCGIofz_IVH2I/s1600/tumblr_lnlbid3urQ1qcfn0j.gif");
}

.comments .comments-content .loadmore a {
  border: none;
}

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

.comments .continue {
  border: none;
} 

 .comments .thread-expanded .thread-arrow {
    background: url('URL-DA-IMAGEM') no-repeat scroll 0px 0px transparent;
    -moz-animation: alternate;
}
.comments .thread-collapsed .thread-arrow {
    background: url('URL-DA-IMAGEM') no-repeat scroll 0px 0px transparent;
}