27/07/2015

Modelo de caixa de Comentários para Blogger!



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:

modelo estilo masculino para personalizar os comentários do blog

- 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!

2 comentários:

  1. Opa, valeu pela dica. Adorei.
    Beijos e ótimo final de semana
    http://mhilkadiniz.blogspot.com.br/

    ResponderExcluir

LEIA ANTES DE COMENTAR

• Você pode comentar usando apenas seu Nome e Url. Não aceitamos anônimos, selecione a opção no menu suspenso "comentar como".

• Alguns comentários podem não ser aceitos, dependendo do cunho da mensagem. Seja gentil na blogosfera.

Obrigado por comentar. Sua visita e opinião são importantes. Volte sempre!

DESIGN E PROGRAMAÇÃO POR JOÃO VITOR M.A. • ALL RIGHTS RESERVED TO DESIGN MANIA • TECNOLOGIA BLOGGER