21.4.13

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!

42 comentários:

  1. Adorei!
    Precisava mesmo de alguma personalização nessa área..So que alumas vezes que eu tento fazer esses tutoriais, eles dão errados ://
    pequeena-princesa.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada! É, as vezes acontesse comigo também. Beijos

      Excluir
  2. Nossa que lindo :33
    Até usaria , mas meus comentarios são na janela pop-up, mas deixa, vou usar vai -q
    beijos
    http://ohletsfly.blogspot.com.br/

    ResponderExcluir
  3. Caraca eu acabei de colocar esse código na personalização dos meus comentários haha' e depois vi aqui :)

    henriquemontoya.blogspot.com.br

    ResponderExcluir
  4. muito linda a personalização, *visitinha de afiliado :3*
    http://trufa-de-menta.blogspot.com.br/

    ResponderExcluir
  5. Adorei! Muito util, facil e que muita gente realmente precisa. kissus <3
    shake-de-morango.blogspot.com.br

    ResponderExcluir
  6. Amei muito obrigada,você aceita afiliação,beijos que seu blog cresça mais ainda e fique mais fofo do que já é fofa.

    ResponderExcluir
  7. Amei ><
    Muito cute, o normal do blogger não tem o mínimo de graça !

    Nhackt Yoo

    Crazycherry-sa.blogspot.com

    ResponderExcluir
  8. Adorei o post! Tutorial super util, tô usando!

    ResponderExcluir
  9. ingrid eu tô usando tá?
    http://cliiche-adolescente.blogspot.com.br/
    Bjos

    ResponderExcluir
  10. Linda, eu tentei fazer, mais ficou tudo como era antes, não é de hoje que os meus funcionários não pegam, me ajude, pór favor!
    Aceita postar no meu blog? a tempos que não encontro ninguém pra postar..
    Beijos ->www.justgirl-oficial.blogspot.com

    ResponderExcluir
    Respostas
    1. Oi, Júh :) Eu acho que pode ser algum código no seu HTML que está em conflito com o do comentário. Tenta apagar o útimo código que você colocou e que antes dele estava tudo normal.

      Sobre ser postadora, eu estou com pouco tempo até pra o meu blog mesmo e acho que mais eu ficaria muito sobrecarregada. Mas quando tudo voltar ao normal falo com você de novo, tá? ^^ Beijos linda!

      Excluir
  11. O meu deu errado!Porque eu coloquei certo.

    ResponderExcluir
  12. Assista ao meu WebShow por favor?!!!!!!!!!!!
    i-quika.blogspot.com.br

    ResponderExcluir
  13. TUTORIAL PERFEITO AMEI ! *-*

    http://february1998.blogspot.com.br/

    ResponderExcluir
  14. Seu blog é muito lindo! Adorei o tutorial ^-^

    ResponderExcluir
  15. Hii, Obrigado pelo post flor... Me ajudou muito!

    ResponderExcluir
  16. Não gostei, não é da sua autoria, seja original, é da Liah do Cherry Bomb
    aff

    ResponderExcluir
    Respostas
    1. Oi, Anônimo. Primeiramente gostaria de dizer que no próprio post citei que os comentários personalizados não era de minha autoria: "Antes de começar o tutorial queria dar os créditos ao Cherry Bomb". Sobre a originalidade, também disse que personalizei os códigos, então dessa forma não ficou tão parecido quanto ao original. Agora, se você não gostou, vai de cada um. Já vi muitas pessoas usando esse modelo que editei. Obrigada pelo comentário. Beijos.

      Excluir
  17. Hey,eu gostei muito das dicas,mas eu nem consigo,e eu nem sei por que . :// Se eu te mandasse os dados para entrar no meu blog,vc poderia fazer para mim? Bjss Beeh Martins ♣

    ResponderExcluir
    Respostas
    1. Tenta ver se acima do seu ]] não está com algum código aberto sem o }

      Excluir
  18. Suuuuuuuper útil pra mim esse tutorial. muitíssimo obrigada! :)

    www.putztonamoda.com

    ResponderExcluir