Modelo para área dos comentários (personalizado) [000]

Boa noite pessoal! Gomen só postar a essa hora...estive super ocupada. Só cheguei agora em casa, como fiquei o dia todo com a cabeça fora da lua, e na realidade, não pude pensar em que postar hoje, então vou responder os pedidos de tutorial, pelo menos parte. Irei mostrar agora como personalizar a área de comentários exatamente igual a minha, o pedido foi feito pela Oak-chan do blog Kawaii Things, aconselho que façam uma visita no blog, é realmente muito bom, um de meus favoritos. Aconselho não, tó mandando mesmo, anda clica, clica, clica, clica ai e entra! Os créditos do código é do Go Imagine, então vamos ao tutorial?

O modelo dele é assim como na imagem abaixo, porem o código abaixo esta em colorido e o avatar não esta com bordas arredondadas, pós modifiquei o meu um pouco.

Ele é super fácil de aplicar, basta ir ate seu HTML e procurar por  ]]></b:skin>. Assim que achar acima dele adicione esse código:

Códigos

    /**=========== AREA GERAL DOS COMMENTS ===========**/
    .comments{
    width: 95% !important; /* largura da caixa de postagem, se sair pra fora do post diminua*/
    margin:0 auto;
    font-style: normal !important;
    font-size: 12px !important;
    font-family: verdana !important;
    background: url(COLOQUE O LINK AQUI) !important; /* fundo dos comentários - se desejar coloque outro background (trocando a url) */
    border-radius: 10px; /* bordas arredondadas no fundo- se não quiser apague essa linha */
    box-shadow:0 0 5px #aaa; /* sombra na caixa do fundo - se não quiser apague essa linha */
    }
    /**== HEADING DOS COMMENTS (1 comentario, 2 comentários...) ==**/
    .comments h3,.comments h4{
    width: 98%;
    padding: 7px;
    margin: 10px 0 !important;
    color: #87CEEB !important; /* cor da fonte */
    text-align: center; /* alinhamento */
    text-shadow:0 0 2px #ccc; /* sombra – se não quiser apague essa linha */
    font-family:'Dancing Script' !important; /* fonte - se preferir troque */
    font-size: 37px !important; /* tamanho do texto - se preferir troque */
    }


    /**= BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone...) =**/
    .comments .comment-block {
    position:static !important; /* mantém o avatar na frente do bloco - não mude */
    background: #fff; /* cor do fundo da caixinha dos comentários */
    margin-left: 23px;
    padding: 0 15px 0 23px;
    border-top: 15px #FF80BC solid; /* borda encima da caixinha de comentário */
    border-radius: 5px; /* bordas arredondadas */
    box-shadow:0 0 3px #ccc, inset 0 0 11px #eee /* sombra na caixinha – apague se não quiser */
    }

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

    /* estilos para o nome do autor do comentário */
    .comments .comments-content .user a{
    font-style:normal;
    border:0;
    color: #CD96CD !important; /* cor da fonte do nome de quem comenta */
    letter-spacing: 1px;
    font-family:'Dancing Script'; /* fonte do nome de quem comenta */
    font-size: 26px; /* tamanho da fonte */
    text-shadow:1 1px #aaa; /* sombra na fonte do nome */
    background: transparent;
    padding: 4px 36px;
    margin-left:-31px !important;
    border-bottom-right-radius:10px;
    margin-top:-2px
    }
    .comments .comments-content .user{
    font-style:normal;
    border:0;
    color: #FF80BC !important;
    letter-spacing:1px;
    font-family:'Dancing Script';
    font-size: 26px;
    text-shadow: 0 1px #aaa;
    background: transparent;
    padding: 4px 36px;
    margin-left: 11px !important;
    border-bottom-right-radius:10px;margin-top:-2px
    }
    /*Nome do autor do comentário hover*/
    .comments .comments-content .user a:hover {
    text-decoration:none !important;
    color: #A1DBE4 !important; /* cor do nome do autor do comentário quando passa o mouse */
    }
    /* estilo da data */
    .comments .comments-content .datetime a{
    background: none !important;
    font-family: times new roman; /* fonte - mude se desejar */
    float: right; /* posicionamento */
    font-size: 12px; /* tamanho da fonte da data */
    color: #fff !important; /* cor da data */
    border:0 !important;
    margin-top: -15px; /*aumente/diminua o nº para mover a data – negativo sobe e positivo desce*/
    }
    /* estilo do avatar */
    .avatar-image-container {
    min-width: 60px; /* determina um mínimo de largura */
    min-height: 60px; /* determina um mínimo de altura */
    padding:0 !important;
    margin-left: 30px!important; /*aumente/diminua o nº para mover o avatar p/ os lados */
    margin-top: 20px !important; /*aumente/diminua o nº para mover p/ cima/baixo */
    position: absolute !important;
    overflow: hidden !important;
    background: #fff;
    }
    .avatar-image-container img {
    border: 3px #EAEAEA solid; /* borda do avatar */
    margin:0;
    max-height: 48px;
    min-height: 48px;
    max-width: 48px;
    min-width: 48px;
    }

    /**=========== TEXTO DO COMENTÁRIO ===========**/
    .comments p{
    font-size: 14px !important; /* tamanho da fonte do comentário */
    font-family: Times new roman !important; */ fonte do comentário */
    text-shadow: 0 1px #eee !important; /* sombra na fonte */
    padding-left: 55px !important;
    padding-bottom: 20px;
    color: #888 !important /* cor do texto */
    }
    /**=========== BOTAO – RESPONDER ===========**/
    /* botão responder do segundo nível */
    .comments .continue a {
    background: #87CEEB !important; /* cor do fundo */
    color: #fff !important; /* cor da fonte */
    float: right; /* posicionamento */
    padding: 8px !important;
    height: 10px !important;
    line-height: 15px !important;
    margin-top: -35px !important;
    }
    /* botão responder do primeiro nível, mais estilos para o botão do segundo nível */
    .comments .comment .comment-actions a,.comments .continue a {
    font-size: 11px !important;
    float: right;
    height: 10px !important; /* altura do botão */
    color: #fff !important; /* cor da fonte */
    padding: 6px;
    border: 0 !important;
    line-height: 10px;
    margin: 5px;
    margin-left: 40px;
    font-family: helvetica; /* fonte - mude se desejar*/
    text-shadow: 0 0;
    border-radius: .5em; /* bordas arredondadas */
    background: #CD96CD; /* cor do fundo */
    font-weight: 800;
    box-shadow: 0 1px 2px #666 /* sombra no botão - apague a linha se não quiser */
    }
    /* botão hover*/
    .comments .comment .comment-actions a:hover {
    text-decoration:none !important;
    background: #FF80BC; /* cor do fundo do botão hover */
    }
    /* estilos para bloco de respostas */
    .comments .comment-thread.inline-thread {
    background-color: transparent !important;
    margin-top: 40px;
    padding: 0.5em 1em;
    border-radius: 5px; /* bordas arredondadas – apague a linha se não quiser */
    }
    .comments .comments-content .comment-replies {
    margin-top:1em;
    margin-left:56px !important
    }

    .comments .continue {border-top:0 !important}
    .comments .thread-toggle,.icon.blog-author {display:none !important}
    /**======= Fim [candylland.org] [goimagines.blogspot.com] =======**/

Todo código e auto explicativo, então é super fácil de entender. Espero que tenham gostado do estilo de comentário, raramente eu troco pós é meu favorito. Se usar não esqueça de creditar o GI.