Meu modelo de comentários

Okaeri, minnas! 

Desta vez eu trouxe um novo modelo para comentários inventado por mim. Admito, estou muito orgulhosa dele. Tudo porque, apesar de me basear num modelo normal, fiz tantas alterações que ele ficou irreconhecível. Por exemplo? Bem abaixo deixo o gif com os hovers e uma lista de personalizações de que me orgulho. Este modelo é o que eu uso aqui no blog, então alegrem-se, porque nem todas as blogueiras disponibilizam os seus próprios truques!

Acho que estou apaixonada para inventar modelos. Este é o primeiro de 3 que já inventei, e se eu conseguir criar alguns modelos que desenhei em papel, ficariam perfeitos :3

Meus amados:

• O título do autor ficou numa ribbon com hover, além do letter spacing
• A data está fora da ribbon, e da caixa de comentários - e tem hover
• O fundo dos comentários muda, sendo coberto por 5 tonalidades rosa de direções diferentes.
• Tem contagem de comentários ao lado de cada um deles, com bordas, sombras e arredondamentos
• Permite o acréscimo de um fundo numa sequência de comentários, ou só numa sequência de respostas.
• Os botões "eliminar" e "responder" têm hover, sombra, borda, cantos arredondados, e partem de baixo da caixinha
• O avatar tem a forma de uma flor, e ficou atrás da ribbon
• A única coisa que não tem hover é a caixa de comentários.

Mas como ninguém quer saber disso, vamos lá ao tuto?

Dê Ctrl + F e procure por /* comments

Achou? Pule essa linha e a que está abaixo, e apague tudo o que está a seguir até /* Widgets - que corresponde à personalização dos comentátios.

Substitua o que apagou pelo código seguinte:

/*Início do código de comentários personalizados*/
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #fcb6c5; /*Cor da fonte*/
font-family: Colonna MT; /*Fonte do texto*/
font-size: 30px; /*Tamanho da fonte*/
text-align: center;
-webkit-transition-duration: .60s;
}
#comments h4:hover, #comments .comment-author a:hover, #comments .comment-timestamp a:hover {
letter-spacing: 2px;
-webkit-transition-duration: .60s;
}
#comments { /*Área geral dos comentários*/
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigDco5N5ve-2aQBSKB7pyNjnSea3Tg60-N6nIXyROxSjKgqYYgM6fEwEXBA0F9c49A5IK4rAhrO8C45xyiIiZa_UiP5fxuxEmO88k7Ir8nwMmBCccZrKXFoYLPW8MlaPgPpep-puBuKVs/s1600/miku2.png) repeat;
padding: 5px;
margin: 19px 0px 0px 0px;
border-radius: 0px 0px 5px 5px;
-webkit-transition-duration: .60s;
}
#comments:hover {
box-shadow: inset 0 0 10px 5px #fcb6c5, inset 0 0 10px 15px #ffc7d4, inset 0 0 15px 25px #ffcfd9, inset 0 0 20px 40px #ffdee4, inset -900px 0 0 0 #ffedf1;
-webkit-transition-duration: 3s;
}
.comments .comment-block {
margin: 40px 5px 15px -5px; /*Espaço entre o avatar e o corpo do comentário*/
}
.comment-header { /*enquadramento do nome do autor do comentário*/
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9EYtbD4aS1WcESECcVXZBq4YvbTpxDGRMru44S20_2jWzDgnT8LWAmHiLWALM06358bZy8PEAZH6wXNeCc6ffoyWvnjpDXeapRy3Rhyphenhyphenm1fZ06-y8F4s-Esoh_8-8I59zaiZ0Xr4ZHlx4/s1600/miku2.png) no-repeat;
widht: 590px;
height: 40px;
margin: 20px 100px -30px -100px;
padding: 1px;
-webkit-transition-duration: .60s;
}
.comment-header:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj792OtXUOTWysAU6pChMavs5zC22AhyQuPUWh5PAWeJt0ngU2fIHMobsg1mGJev_jXXeK5lvpV7v3AbVf1Q4iTwJCNaAPBL6dv1dXQkREfStWPZRLMJv_iSNy2o2bZMsKeMsxAjlpfeTg/s1600/miku1.png) no-repeat;
-webkit-transition-duration: .60s;
}
.comment-header a { /*autor do comentário - letras*/
color: #6da9c9 !important;
font-family: Colonna MT;
font-size: 20px;
font-weight: normal;
-webkit-transition-duration: .60s;
}
.comment-header a:hover {
color: #fa8c9c !important;
letter-spacing: 2px;
-webkit-transition-duration: .60s;
text-decoration: none;
}
.comments .comments-content .datetime { /*enquadramento da data e hora*/
background: #a8d5ed;
border-radius: 5px;
box-shadow: 2px 2px 3px 6d7f87;
margin: 50px -320px -30px 320px;
padding: 0px 2px 0px 2px;
-webkit-transition-duration: .60s;
}
.comments .comments-content .datetime:hover {
background: #ffc2cc;
-webkit-transition-duration: .60s;
}
.comments .comments-content .datetime a { /* Data e hora - letras */
font-size: 8px !important;
font-family: silkscreen;
-webkit-transition-duration: .60s;
}
.comments .comments-content .datetime a:hover {
color: #fa8c9c !important;
letter-spacing: 0px;
-webkit-transition-duration: .60s;
}
.comments .comments-content .comment-content { /*Bloco de texto do comentário*/
margin: -22px 0px 10px 33px; /*Espaço entre o bloco de texto do comentário e o nome do autor*/
position: relative;
background: #F1F6FE;
border: 1px solid #DCE7F9;
padding: 10px 6px 6px 6px;
color: #6a4675;
text-shadow: 1px 1px 1px #ffffff;
font-size: 10px;
font-family: silkscreen;
-webkit-transition-duration: .60s;
}
.comments:hover .comments-content:hover .comment-content:hover {
border-radius: 0px 10px 10px 10px
-webkit-transition-duration: .60s;
}
.comments .avatar-image-container { /*avatar*/
-webkit-mask-image: url(http://i36.tinypic.com/254vbpj.png);
mask-image: url(http://i36.tinypic.com/254vbpj.png); /*forma do avatar em base*/
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px; /*Tamanho do avatar. Troque todos os 50 pelo tamanho desejado*/
padding: 3px;
}
.comments .avatar-image-container img { /*avatar também*/
opacity: 0.70;
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px; /*Tamanho do avatar. Troque todos os 50 pelo tamanho desejado*/
-webkit-transition-duration: .60s;
}
.comments .avatar-image-container img:hover {
opacity: 1.0;
-webkit-transition-duration: .60s;
}
.comments .comments-content .comment { /*espaçamento entre os comentários e as bordas*/
padding: 3px 2px 5px 2px !important;
}
.comments .comment .comment-actions a { /*botões responder e excluir*/
margin: 5px 0px -25px 35px !important;
padding: 15px 2px 5px 2px !important;
font-size: 9px;
color: #fff !important;
font-family: silkscreen;
font-weight: normal;
background: #cfdbe3;
box-shadow: inset 0 0 15px #b5bec4, 0 0 3px #b5bec4;
border-radius: 0px 0px 10px 10px;
border: 2px solid #8bc1e0;
border-top: 0px solid #cccccc;
-webkit-transition-duration: .60s;
}
.comments .comment .comment-actions a:hover {
color: #ffffff; !important;
text-decoration: none;
background: #fcccd6;
box-shadow: inset 0 0 15px #ebbcc5, 0 0 3px #ebbcc5;
border-radius: 0px 0px 5px 5px;
border: 2px solid #f291a5;
border-top: 0px solid #cccccc;
-webkit-transition-duration: .60s;
}
.comments .comment-thread.inline-thread { /*fundo dos comentários de resposta*/
background-color: transparent !important;
padding: 0.5em 1em;
border-radius: 5px;
border: 0!important;
margin-right: -15px
}
.comments .continue { border-top: none;}
.comments .continue a {display: none;}
.comments-content {  counter-reset: contarcomentarios;  }
.comment-thread li:before {  /*contagem de comentários*/
content: counter(contarcomentarios);
counter-increment: contarcomentarios;
float: right;
padding: 5px 10px 5px 15px !important;
font-size: 9px;
color: #ffffff !important;
font-family: silkscreen;
font-weight: bold;
background: #cfdbe3;
box-shadow: inset 0 0 15px #b5bec4, 0 0 3px #b5bec4;
border-radius: 15px 0px 0px 15px;
border: 2px solid #8bc1e0;
border-right: 0px solid #cccccc;
margin: 0px -15px 0px 25px;
-webkit-transition-duration: .60s;
}
.comment-thread li { /*enquadramento de uma sequência de comentários*/
background: transparent;
}

/*Final do código de comentários personalizados*/

Prontinho ^^ Parece muito complicado, é extenso e dá um trabalhão a trocar as cores, mas se fizer tudo direito, vai ficar bem e muito original. Pode tirar os hovers, se o souber fazer. Ah, se você quiser mudar a cor da ribbon, tem primeiro de alterar a imagem com algum programa - eu deixo o png em baixo - e trocar a URL nas áreas .comment-header { e .comment-header:hover { ,  onde diz background, entre ().

Ja nee ;)