Personalizando os comentários do Blog #1
Olá pessoal tudo joinha com vocês?
Bom, estou trazendo um tutorial bem simples e bacana... Que é um modelo para comentários,esse é o primeiro dos modelos que irei postar...
É bem simples e você mesmo pode modificar a cor do fundo e das fontes de acordo com seu gosto!!!
Então, vamos lá??
Antes de mais nada, não esqueçam de:
- Fazer um backup do seu modelo antes de testar qualquer tutorial. Assim se algo der errado, você pode reverter as alterações facilmente fazendo upload do modelo sem as alterações.
- Outra coisa importante, quando editamos os comentários não tem como visualizar antes de salvar. Então é melhor você editar o código primeiro no bloco de notas, depois passar para o blog e então salvar.
o modelo é mais ou menos assim:
Abra o Modelo HTML do blog, e cole o código a seguir acima de ]]></b:skin>
Cole o codigo a seguir em cima dele:
/*****************************INICIO COMENTARIOS - CHERRYBOOMB.COM*****************************/
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #c19bdf; /*Cor da fonte*/
font-family: Verdana; /*Fonte do texto*/
font-size: 18px; /*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: #c19bdf; /*Cor de fundo do nome do autor do comentário*/
border: 1px solid #9e80b6; /*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: Verdana; /*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: #684980 !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 alinha á 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. Só mexa se souber o que está fazendo*/
position: relative;
background: #e7dceb; /*Fundo do bloco de texto do comentário*/
border: 1px solid #cdc3d0; /*Borda do bloco de texto do comentário*/
padding: 10px;
color: #4c4c4c; /*Cor da fonte do bloco de texto do comentário*/
font-size: 11px; /*Tamanho da fonte*/}
.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: #d2b6e5; /*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: #d2b6e5; /*Fundo dos botões responder e excluir*/
border: 1px solid #b59dc6; /*Borda dos botões responder e exluir*/
color: #fff !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: #e3c6f6; /*Fundo dos botões responder e excluir quando passa o mouse*/
border: 1px solid #b59dc6; /*Borda dos botões responder e exluir quando passa o mouse*/
color: #684980 !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;}
/************FIM DOS COMENTARIOS CÓDIGO POR CHERRYBOOMB.COM NÃO RETIRE OS CRÉDITOS************/
(Os creditos vao para Cherry Bomb)
Se seus comentários não estiverem com a opção de resposta, vá em Configurações > Postagens e comentários e onde está escrito "Local do comentário" mude para incorporado e salve.
Bom, espero que vocês tenham gostado. No próximo tutorial para personalização de comentários, vou ensinar a fazer esse modelo:
.jpg)
Fiquem ligadinhas nas atualizações ♥
Ate o próximo tutorial!
(Se você deseja algum tutorial, deixe seu pedido nos comentários!)
4 comentários
Eu quero esse segundo modelo de comentarios *-* Posta Rêh <3
ResponderExcluirhttp://apenasumaadoradora.blogspot.com
Siih Thay, essa semana estarei postando esse segundo tuto... fique ligadinha !
ExcluirBjao minha linda e muitooo obrigada pelo carinho!!!
Oi, Rê! Tbm estou na fila de espera por esse segundo modelo! rsrs
ResponderExcluirAdorei o tutorial! E já irei ficar de olho, para aprender a fazer o próximo modelo que você irá ensinar. Amei!
ResponderExcluirMande seu comentário, criticas, elogios ou sugestões.
Responderei o mais rápido possível.
Um forte abraço.