Hoje procurando algo na internet encontrei um modelo de caixa de comentário, bem elegante e organizado para Blogger. Os créditos deste tutorial vão para o site Elaine Gaspareto, vamos lá!
Os comentários ficaram no seguinte modelo:
- Se a área de comentários já foi modificada sera preciso apagar todo o antigo código.
- Faça um teste antes de adiciona-lo em seu blog original (para não haver erros).
Vá em Modelo ▸ Editar HTML ▸ e dentro da caixa de código-fonte tecle Ctrl+F. Dentro da busca procure por ]]></b:skin>, quando encontrar acima dela cole o seguinte código:
[code]/*Início do código de comentários personalizados by Elaine Gaspareto*/
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #3c4042; /*Cor da fonte*/
text-align: center;
font-family: Oswald; /*Fonte do texto*/
font-size: 18px; /*Tamanho da fonte*/}
#comments {
background:transparent; /*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: #3c4042; /*Cor de fundo do nome do autor do comentário*/
border: 1px solid #E9F0FC; /*Borda de 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: Oswald; /*Fonte do nome do autor do comentário*/
font-size: 16px; /*Tamanho da fonte do nome do autor do comentário*/
font-weight: normal; /*Troque normal por bold para deixar o texto em negrito*/}
.comment-header a:hover {
color: #eee !important; /*Cor do nome do autor do comentário quando passa o mouse*/
text-decoration: none;
}
.comments .comments-content .datetime a{
font-family: Arial; /*Fonte da data do comentário*/
font-size: 9px !important; /*Tamanho da fonte da hora e data do comentário*/
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. Só mexa se souber o que está fazendo*/
position: relative;
background: #eee; /*Fundo do bloco de texto do comentário*/
border: 1px solid #eee; /*Borda do bloco de texto do comentário*/
padding: 10px;
color: #000; /*Cor da fonte do bloco de texto do comentário*/
font-size: 14px; /*Tamanho da fonte do texto*/}
.comments .avatar-image-container {
/*Tamanho do avatar. Troque todos os 50 pelo tamanho desejado*/
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
background: #3c4042; /*Cor da borda do avatar*/
padding: 3px; /*Espessura da borda do avatar*/}
.comments .avatar-image-container img{
/*Tamanho do avatar. Troque todos os 50 pelo tamanho desejado*/
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;}
.comments .comments-content .comment {
padding:20px 10px !important;
margin-bottom:15px !important}
.comments .comment .comment-actions a {
padding: 5px;
background: #3c4042; /*Fundo dos botões responder e excluir*/
border: 1px solid #3c4042; /*Borda dos botões responder e exluir*/
color: #fff !important; /*Cor do texto dos botões responder e excluir*/
font-family: Oswald; /*Fonte dos botões responder e excluir*/
font-weight: normal; /*Troque normal por bold para colocar o negrito*/
margin-right: 10px;}
.comments .comment .comment-actions a:hover {
background: #073763; /*Fundo dos botões responder e excluir quando passa o mouse*/
border: 1px solid #073763 /*Borda dos botões responder e exluir quando passa o mouse*/
color: #fff; !important; /*Cor do texto dos botões responder e excluir quando passa o mouse*/
text-decoration: none;
}
.comments .comment-thread.inline-thread {
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 {
content: counter(contarcomentarios);
counter-increment: contarcomentarios;
float: right;
font-size: 24px;
color: #666666;
}
/* Contador comentários
------------------------------------------------- */
.comment-thread ol {
counter-reset: contarcomentarios;
}
.comment-thread li:before {
content: counter(contarcomentarios,decimal);
counter-increment: contarcomentarios;
float: right;
font-size: 16px;
color: #eee;
padding:10px;
padding-top: 5px;
position:relative;
z-index:2;
}
.comment-thread ol ol {
counter-reset: contarbis;
}
.comment-thread li li:before {
content: counter(contarcomentarios,decimal) "." counter(contarbis,lower-latin);
counter-increment: contarbis;
float: right;
font-size: 13px;
color:#eee;
padding:10px;
position:relative;
z-index:2;
}
/*Final do código de comentários personalizados*[/code]
Se quiser retirar a contagem de comentários e só apagar esta parte:
[code]/* Contador comentários
------------------------------------------------- */
.comment-thread ol {
counter-reset: contarcomentarios;
}
.comment-thread li:before {
content: counter(contarcomentarios,decimal);
counter-increment: contarcomentarios;
float: right;
font-size: 16px;
color: #eee;
padding:10px;
padding-top: 5px;
position:relative;
z-index:2;
}
.comment-thread ol ol {
counter-reset: contarbis;
}
.comment-thread li li:before {
content: counter(contarcomentarios,decimal) "." counter(contarbis,lower-latin);
counter-increment: contarbis;
float: right;
font-size: 13px;
color:#eee;
padding:10px;
position:relative;
z-index:2;
}[/code]
Ele por si ja se explica não e mesmo? Você poderá edita-lo da forma que mais combine com seu blog, altere cores, fontes, como preferir. Depois que estiver a seu gosto click em Salvar Modelo. Se tiver alguma dúvida comente, que o reponderei o mas rápido possível!
Opa, valeu pela dica. Adorei.
ResponderExcluirBeijos e ótimo final de semana
http://mhilkadiniz.blogspot.com.br/
:) Para você também!
Excluir