Tutorial

Personalização da área de comentários do blog

12:59:00

Personalize seus comentários do blog de maneira fácil
Personalização dos comentários
Gente quem não gosta de abrir um blog e ter uma visualização leve e diferente e também colorida , mas de maneira modesta no qual venha fazer um diferencial que ti prende a leitura devido o belo layout apresentado.
Por isso que fuçando na web,eu achei este tutorial e fiz no meu blog e gostei e agora vou lhe ensinar também a fazer o mesmo no seu .
Usando um código em html já prontinho você pode personalizar a sua área de comentários e deixá-la mais agradavél, e com uma estética bem legal,sem mais bla´,blá,vamos lá !!
Vá em configurações do seu blog ,clique em postagens e comentarios e veja se o seu blog esta com á parte de comentários em "incorporado",se não estiver clique em incorporado e salve !



Comentários incorporado
Clique em cima da foto e veja !
Agora volte para o layout e vá em modelos,e abra em editar HTML e clicando em Ctrl + f ,procure por
esse pedacinho de código ]]></b:skin>.
Agora cole este código acima de  ]]></b:skin>,como na imagem abaixo:

Edite o htML
foto do HTmL do blog


/**********************INICIO COMENTARIOS PERSONALIZADOS************************/
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #64BCBA; /*Cor da fonte do numero total de comentarios*/
font-family: Comic Sans MS; /*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: #FF6699; /*Cor de fundo do nome do autor do comentário*/
border: 4px solid #FF6699; /*Borda  onde fica o nome do autor do comentário*/
border-radius: 20px 20px 0 0;
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: #FAA7B9 !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 #FF6699; /*Borda do bloco de texto do comentário*/
border-radius: 0 0 20px 20px;
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;
background: #FAA7B9; /*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;}

.comments .comments-content .comment {
padding:20px 10px !important;
margin-bottom:15px !important}

.comments .comment .comment-actions a {
padding: 5px;
background: #64BCBA; /*Fundo dos botões responder e excluir*/
border: 1px solid #64BCBA; /*Borda dos botões responder e exluir*/
-Moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
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: #FAA7B9; /*Fundo dos botões responder e excluir quando passa o mouse*/
border: 1px solid #FAA7B9; /*Borda dos botões responder e excluir 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 POR WWW.PAPOGAROTA.COM.BR********/

Faça as alterações normais de acordo com seu gosto nas cores que desejar ,aqui link de cores em ,Cores em HTML.(Clique aqui e veja as cores).
 Depois salve e veja como ficou ,espero que dê certo e vocês gostem ,o meu ficou assim ,só mudei a cor de fundo para preto,olhem :
Janela de comentário do blog.
área de comentarios do blog

Os créditos são do blog: WWW.PAPOGAROTA.COM.BR
Espero que tenho gostado,até o próximo pessoal.




You Might Also Like

0 comentários

Obrigado pelo seu comentário,volte sempre e aproveite o blog.

Like us on Facebook

Eu Sou do CBBlogers