08/02/2013

Tutorial: Modelo para área dos comentários (personalizado)

||

Boa noite pessoal! Gomen só postar a essa hora...estive super ocupada com a banda hoje, estávamos ensaiando desde 10 da manha para um casamento, casamento de pessoas keis imagina a loucura né? Sim Drw conhece muita gente louca, nesta vida, mas minha garganta dói de tanto cantar a mesma música bububu... Então 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 exaramente 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:


    /**=========== 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 créditar o GI.

20 comentários:

  1. Anônimo8/2/13

    Amei a area de comentarios, estou criando um blog ér irei usar e claro creditar. Drw me leva? semrpe quis ir em um casamento kei!!! deve ser encrivel, o que vocês vao tocar?

    ResponderExcluir
    Respostas
    1. Ola que bom, que gostou depois passa e deixa o link do seu blog vou amar conhece-lo. Vamos tocar no total de 7 musicas mas ainda só ta confirmado duas que é a do Nano "No pain, No game" e " Exist".

      Excluir
  2. Mundo das Ruivas8/2/13

    Fui dar uma olhada no blog KT é realmente muito bom.

    ResponderExcluir
  3. A muito Obrigada Wendy *---*, desculpa não ter vindo antes, estou ajeitando umas coisas legais para o novo lay, *--* vou usar essa área de coments. acho ela muito fofa..
    Ah obg tbm por indicar o KT no post uahushu Bjs!

    ResponderExcluir
    Respostas
    1. Que isso não foi nada, eu que agradeço pelo pedido ^^
      Estou louca para ver como vai ficar, consertesa ficara lindo *0*

      Excluir
  4. Gostei do tuto, inclusive do formato que as fotos ficam :B

    Tag pra você *-* (Campanha de incentivo a leitura) http://almost8een.blogspot.com.br/2013/02/campanha-de-incentivo-leitura.html#more

    ResponderExcluir
    Respostas
    1. Yo Jenni, fico contente que goste.
      Irei responder já já ^^

      Excluir
  5. Muito bom, esse tutorial, irei usa-lo no meu novo blog *u*

    http://otomesonhadora.blogspot.com.br/

    ResponderExcluir
  6. Adorei esse tutorial , talvez eu use ele
    no layout que irei fazer hoje .

    Abraços *--*

    >> Passe lá :

    http://pensamento-jhenny.blogspot.com.br/

    ResponderExcluir
  7. Adorei o tuto e estou usando ele xD
    BJS.<3
    http://kawaiidown.blogspot.com.br/

    ResponderExcluir
  8. Respostas
    1. Assim fico sem jeito *---*
      Mas obrigada

      Excluir
  9. Super Top seu blog
    *---* amei o tuto,conserteza vou usar

    ResponderExcluir
    Respostas
    1. Muito obrigada Cris, fico feliz que goste de meu blog e que usara o modelinho. Ele é muito cute, beijinhos e obrigada por comentar.

      Excluir
  10. Bem legal ! Coloquei no blog e ficou lindo !
    http://blogtutoriaisaqui.blogspot.com.br/

    ResponderExcluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram