tutorial

Modelo para cometários (Exclusivo)

maio 18, 2014,11 Comments


      Hey, Brother and sisters ! Como vocês estão?! Hoje eu vim trazer mais um coisinha da ''maratona'' que eu to fazendo pra vocês, lembrando que é apenas o começo, O que temos? Hoje temos um modelo para comentário, não sei se ficou aquela coisa mas eu to tentando, é a primeira vez que faço um modelo de cometário, nos meus layouts eu sempre pego de outros blog's, mas decidir criar o meu para vocês, eu usei uma base do blog TMR , mas mudei quase tudo, do mesmo jeito ai está os creditos, não gosto de plágio, muito menos plagiar!
Deixa eu contar uma coisinha, ontem eu entrei em uma nova fanpage do facebook, to tão feliz!
Espero que gostem, e não esqueça de creditar !
                                         Esse é o modelo de comentário:




Codigo :
Coloque abaixo de /* Comments


.comments{ /* Conteúdo que vem acima do h4, fonte do texto dos comentários */
clear:both;
background-color: none;
margin-top: -5px;
margin-bottom:0;
line-height:18px;
font-size: 11px;
}
.comments .comments-content{ /* Fundo da área de comentários (Corpo) */
margin-bottom: 6px;
font-weight:normal;
text-align: justify; /* Alinhagem do texto */
background: transparent; /* Deixe assim se não quiser um fundo */
}
.comments .comment .comment-actions a,.comments .comment .continue a{
background: #f1eeee;  /* Cor de fundo do botão responder */
border:1px dashed #d5d3ed; /* Borda do botão responder */
padding-top: 2px; /* Acolchoamento de cima */
padding-bottom: 2px; /* Acolchoamento de baixo */
padding-left: 3px; /* Acolchoamento da esquerda */
padding-right: 3px; /* Acolchoamento da direita */
margin-bottom: 3px; /* Espaçamento externo de baixo */
margin-left: 2px; /* Espaçamento externo da esquerda */
margin-right: 2px; /* Espaçamento externo da direita */
display:inline-block; /* Para que fique em caixas */
text-align:center;
text-decoration:none;
width: 54px; /* Largura do botão responder */
line-height: 17px;
font-weight: normal;
cursor: pointer;
font-family: "Pf Arma five";
font-size: 8px;
color: #bbbad1;
}
.comments .comment .comment-actions a:hover,.comments .comment .continue a:hover { /* Botão hover */
text-decoration: none;
background:#fff;
border:1px dashed #d5d3ed;
}
.comments .comments-content .datetime a{ /* Data dos comentários */
font-family: "Pf Arma five";
font-size: 8px;
text-decoration:none;
color: #fff; /* Cor do link */
text-align: right; /* Alinhamento do texto */
float: right;
}
.comment-content{ /* Código "de dentro" do bloco de comentários */
margin: 4px;
padding: 0 4px;
}
.comment-header{ /* Linha do nome do autor (Fundo) */
background-color: #d5d3ed; /* Cor de fundo */
font-family: "Calibri";
font-size:12px;
border-bottom:1px dashed #C0C0C0;  /* Cor da borda */
padding:5px;
}
.comment-header a{ /* Nome do autor do comentario (Fontes e cor) */
color: #fff; /* Cor do link */
}
.comments .thread-toggle .thread-arrow{
display:inline-block;
height:6px;
width:7px;
overflow:visible;
margin:0.3em;
padding-right:4px;
}
.comments .comment-block{
margin-left: 46px; /* Espaço entre o avatar e o corpo do comentário*/
margin-top: 2px; /* Espaço de cima */
background: #fff; /* Fundo do bloco de comentários */
border: 1px dotted #d5d3ed; /* Borda que fica em torno de todo o bloco */
}
.avatar-image-container{ /* Foto do "comentarista" (Tamanhos) */
width:100px !important; /* Mude a largura se preferir */
height:100px !important; /* Mude a altura se preferir */
max-width:58px !important; /* Nâo será necessário mexer */
max-height:58px !important; /* Nâo será necessário mexer */
}
.comments .avatar-image-container img{ /* Foto do "comentarista" (Personalizar) */
padding:1px;
border: 1px dashed #d5d3ed;
border-top: 1px dashed #d5d3ed;
background: #fff;
-moz-opacity: 0.73;
-khtml-opacity: 0.73;
opacity: 0.73;
filter:alpha(opacity=73); /* Se preferir retire */
-webkit-transition-duration: .10s;
}
.comments .avatar-image-container img:hover{ /* Personalizar hover */
-moz-opacity: 0.98;
-khtml-opacity: 0.98;
opacity: 0.98;
filter:alpha(opacity=98); /* Se preferir retire */
-webkit-transition-duration: .50s;
}
/* Não apague essa parte, deixe-a sem mexer */
.comments .comments-content .comment-thread ol{
list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:40px;}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.comments .comments-content .comment:first-child{padding-top:16px}
.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}
.comments .comments-content .comment-body{position:relative;
}
.comments .comments-content .user{font-style:normal;font-weight:normal}
.comments .comments-content .user a{font-weight:normal;text-decoration:none;
}

You Might Also Like

11 comentários:

  1. ficou realmente muito lindo, o único problema
    é que não combina com o lay do meu blog
    é bem simples, vc pode ver aqui ~> http://lightme-fics.blogspot.com.br/
    só comentei pra te deixar feliz dsjhdf
    fui'

    ResponderExcluir
    Respostas
    1. ''só comentei pra te deixar feliz'' ai kkkkk, obrigada, Realmente eu também achei que não combina com seu blog, acho que se fosse uma cor mais pro vermelho quem sabe combinaria, eu fiquei feliz
      com sua sinceridade, obrigada mais uma vez

      Excluir
  2. Adorei o modelo de comentário! Eu até usaria, mas o meu blog tem um fogo e toda vez que coloco um modelo de comentários nele, ele fica todo bagunçado e o que me resta é usar o modelo padrão :( Para ser uma primeira vez ficou perfeito!
    Luxury ~

    ResponderExcluir
  3. O modelinho ficou um amor, pena que eu não tenho onde usar x_x
    Gostei das cores dele *3*

    Beijos, kaorii.com!

    ResponderExcluir
  4. lepo lepo gostoso ''' ahahagaaha mds pftinho <3

    ResponderExcluir
  5. Vou Peguei!!! Rsrsrs Meu Blog Ficou Lindo brigadu Viu?

    ResponderExcluir
  6. Amei
    http://loucurasdabrina.blogspot.com.br/

    ResponderExcluir