Comentários Personalizados

Oi! Hoje trago um tutorial muuuuito útil, já que o blogger não disponibiliza nenhuma alteração nessa área dos comentários. Para personaliza-la, como vocês já devem saber, vamos até o HTML. Antes de começar o tutorial queria dar os créditos ao Cherry Bomb. Mas gostaria de lembra que eu personalizei boa parte dos códigos, não deixando ele tão parecido quanto o original. Vejam como ficou na imagem abaixo e se quiserem aprender como fazer é só continuar lendo!

 Para começar vá até seu HTML, e clique dentro da caixa dos cógidos. Depois de um Ctrl F e cole na caixa de pesquisa que aparecer isso: ]]></b:skin> Dê enter no seu teclado e aparecerá o código pesquisado. Cole acima dele o seguinte:

/*****************************INICIO COMENTARIOS - CHERRYBOOMB.COM (EDITADO POR GOODS-SWEETS)*****************************/

#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/

color: #a67445; /*Cor da fonte*/

font-family: Verdana; /*Fonte do texto*/

font-size: 18px; /*Tamanho da fonte*/}

#comments {

background:url(http://i33.tinypic.com/k46otw.png); /*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: #df9bbb; /*Cor de fundo do nome do autor do comentário*/

opacity:0.6;

border: 2px dotted #c76d97; /*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*/

text-shadow: 1px 1px 1px #fff;

font-size: 11px; /*Tamanho da fonte*/}

.comments .avatar-image-container {

-webkit-mask-image: url(http://i36.tinypic.com/254vbpj.png); -moz-mask-image: url(http://i36.tinypic.com/254vbpj.png); -o-mask-image: url(http://i36.tinypic.com/254vbpj.png) mask-image: url(http://i36.tinypic.com/254vbpj.png);

/*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: #e07ba6; /*Fundo dos botões responder e excluir*/

border: 1px dotted #f561a0; /*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: #be9f82; /*Fundo dos botões responder e excluir quando passa o mouse*/

opacity:0.6;

border: 1px solid #8b7056 /*Borda dos botões responder e exluir quando passa o mouse*/

color: #b7456d; !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;}

/************FIM DOS COMENTARIOS CÓDIGO POR CHERRYBOOMB.COM (EDITADO POR GOODS-SWEETS) NÃO RETIRE OS CRÉDITOS************/

 Prontinho. Destaquei os códigos principais caso vocês queiram alterar algo. Depois trago outros modelos editados por mim com essa mesma base. Espero que tenham gostado. Beijos!