22 de dez de 2015

Como personalizar os comentários do blog

Olá bonecas, como prometido aqui está mais um post com dicas para personalziar o seu blog. Estava pensando em fazer vídeos personalizando um layout completo e disponibilizar todos os códigos para vocês, o que acham?

Bom, a dica de hoje é para dar uma personalizada nos comentários do seu blog, pra deixar mais frufru. Lembrando que esse tutorial é para blogger e se você seguir o passos certinhos logo terá os seus comentários muito mais bonitinhos.






Eles vão ficar desse jeitinho.



1- Para começar os seus comentários devem está "incorporados" na opção do Blogger. Para verificar vá em Painel do Blogger -> Configurações ->Postagens e comentários -> Local do comentário, e marque a opção 
incorporado, agora é só salvar.

2- Agora vá no Painel do Blogger, vá em Modelo -> Editar HTML, aperte Ctrl+F e procure por ]]></b:skin>

3- Copie o código a seguir e cole logo ACIMA do trecho que você encontrou

/________________________INICIO COMENTARIOS - CHERRYBOOMB.COM___________________________/
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #000; /*Cor da fonte*/
font-family: Verdana; /*Fonte do texto*/
font-size: 18px; /*Tamanho da fonte*/}
#comments {
background: #SUACOR; /*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: #FF0080; /*Cor de fundo do nome do autor do comentário*/
border: 1px solid #SUACOR; /*Borda de onde fica o nome do autor do comentário*/
padding: 3px;}
.comment-header a {
color: #33CCCC !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: #SUACOR !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: #FFD5EA; /*Fundo do bloco de texto do comentário*/
border: 1px solid #SUACOR; /*Borda do bloco de texto do comentário*/
padding: 10px;
color: #000 ; /*Cor da fonte do bloco de texto do comentário*/
font-size: 15px; /*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: #33CCCC; /*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: #33CCCC; /*Fundo dos botões responder e excluir*/
border: 1px solid #SUACOR; /*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: normal; /*Troque bold por normal para tirar o negrito*/
margin-right: 10px;}
.comments .comment .comment-actions a:hover {
background:#FF0080; /*Fundo dos botões responder e excluir quando passa o mouse*/
border: 1px solid #FF0080; /*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 .continue { border-top: none;}
.comments .continue a {display: none;}
/_________FIM DOS COMENTARIOS CÓDIGO POR CHERRYBOOMB.COM NÃO RETIRE OS CRÉDITOS______________/


Feito isso é só salvar e pronto.

Os créditos estão no código, eu personalizer as cores, fontes, estilos e tamanhos. Se você usar não se esqueça de deixar a sua opinião e curta a fanpage do blog para mais dicas como essas.


Espero que tenham gostado e até a próxima, minhas redes sociais estão ali no menu então não se esquece de me seguir, beleza? Mil beijos.

Um comentário :

  1. Cada vez mais admiro você e seu blog, tenho um, mais estou começando a aprender muito com vc. Meu blog é izaiascomerciario -espero sua visita

    ResponderExcluir