Comentários do Blogger personalizados - Modelo 3

Como vocês podem perceber, eu troquei de layout e decidi disponibilizar algumas coisinhas que usava no antigo layout pra vocês, começando pelos comentários.



Meu layout antigo era rosa bem forte, mas dá pra trocar as cores pra qualquer outra de sua preferência, as cores usadas foram:

Rosa: #E74B7A
Azul: #33cccc

Como aplicar no seu blog

1- Vá em Modelo> Editar HTML

2- Clique em CTRL+F e pesquisa por essa tag: ]]></b:skin>

3- Cole esse código acima da tag encontrada e salve

/************COMENTARIOS PERSONALIZADOS POR BLOG DA ROCKY**************/
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #454545; /*Cor da fonte do numero total de comentarios*/
font-family: Josefin Sans; /*Fonte do texto*/
font-size: 20px; /*Tamanho da fonte*/}
#comments {
background: #fff; /*Fundo da área geral dos comentários*/
padding: 15px;
}
.comments .comment-block { margin-left: 70px; /*Espaço entre o avatar e o corpo do comentário*/}
.comment-header {
background: #E74B7A; /*Cor de fundo do nome do autor do comentário*/
border: 4px solid #E74B7A; /*Borda  onde fica o nome do autor do comentário*/
padding: 3px;}
.comment-header a {
color: #fff !important; /*Cor do nome do autor do comentário*/
font-family: Verdana; /*Fonte do nome do autor do comentário*/
font-size: 16px; /*Tamanho da fonte do nome do autor do comentário*/
font-weight: bold; /*Troque bold por normal para tirar o negrito*/}
.comment-header a:hover { color: #E74B7A !important; /*Cor do nome do autor do comentário quando passa o mouse*/
text-decoration: none;}
.comments .comments-content .datetime a{
font-size: 10px !important; /*Tamanho da fonte da hora e data do comentário*/
float: right; /*Data alinhada a direita*/
line-height: 16px; /*Altura da linha da data e hora*/}
.comments .comments-content .comment-content{ /*Bloco de texto do comentário*/
margin-top: -10px; /*Espaço entre o bloco de texto do comentário e o nome do autor*/
position: relative;
background: #fff; /*Fundo do bloco de texto do comentário*/
border: 1px dashed #E74B7A; /*Borda do bloco de texto do comentário*/
padding: 10px;
color: #3f3f3f; /*Cor da fonte do bloco de texto do comentário*/
font-size: 11px; /*Tamanho da fonte*/}
.comments .avatar-image-container {
/*Tamanho do avatar */
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
border-radius: 25px 25px 25px 25px;
background: #E74B7A; /*Cor da borda do avatar*/
padding: 3px; /*Espessura da borda do avatar*/}
.comments .avatar-image-container img{
/*Tamanho do avatar */
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
border-radius: 25px 25px 25px 25px;
}
.comments .comments-content .comment {
padding:20px 10px !important;
margin-bottom:15px !important}
.comments .comment .comment-actions a {
padding: 5px;
background: #fff; /*Fundo dos botões responder e excluir*/
border: 1px solid #33cccc; /*Borda dos botões responder e exluir*/
color: #333 !important; /*Cor do texto dos botões responder e excluir*/
font-family: verdana; /*Fonte dos botões responder e excluir*/
font-weight: bold; /*Troque bold por normal para tirar o negrito*/
margin-right: 10px;}
.comments .comment .comment-actions a:hover {
background: #E74B7A; /*Fundo dos botões responder e excluir quando passa o mouse*/
border: 1px solid #E74B7A; /*Borda dos botões responder e excluir quando passa o mouse*/
color: #333333 !important; /*Cor do texto dos botões responder e excluir quando passa o mouse*/
text-decoration: none;}
.comments .continue { border-top: none;}
.comments .continue a {display: none;}

Ama o mundo das cacheadas? Então me acompanhe no Instagram, clique aqui >> _raquelcduarte

Gostou? Deixe seu comentário e compartilhe para seus amigos.

• Precisa de uma layout Blogger responsivo, capa pra canal/fanpage, mídia kit, vinhetas, entre outros serviços para seu blog e canal? Entre em contato com a Lusa Agência Digital: CLIQUE AQUI

• Layouts Blogger responsivo á pronta entrega: CLIQUE AQUI

Beijos e fiquem com Deus, até logo!