Personalizando a área dos comentários- Tutorial

Oi misturies, eu to tão feliz haha, meu irmão agora é Campeão Brasileiro por Nocaute, nossa, to super feliz!
Bom, vamos deixar de lado my life pessoal e vamos falar sobre a área dos comentários.
Algo super importante em um blog, é também os comentários, certo? Se você quer deixar seus comentários mais bonitinhos, eu tenho aqui um tutorial muito legal pra vocês, cliquem em Leia Mais.



Vamos lá, na ala Modelo, abra o seu Html, clique entre as letras e dê um Ctrl+F, pesquise por ]]></b:skin>, quando achar a tag procurada, acima dele cole o código a seguir:
/*****************************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************/ 
Personalize como quiser, ta tudinho explicado.
O código é meio grandinho, mas vale a pena, fica lindinho, mais ou menos assim:


Clique para Ampliar.



É isso mesmo gente,espero que gostem...Kissus

2 comentários:

  1. demais, obrigada por postar
    cute-universe.blogspot.com

    ResponderExcluir
  2. carla villar fernadez21 de maio de 2015 às 03:46

    soy carla me gusta mucho. podias venir a vigo y responderme

    ResponderExcluir

Modelo de teste-
blá bla bçá
Modelinho fofo e lindo
Sou um modelo eba *-*