Modelo para Área dos Comentários - 1


Créditos: Cherry Bomb - Pelo Código Base









Como vão Sereres Pensantes?

Bom, primeiro quero pedir desculpas por não ter postado nos últimos dias, eu estava com preguiça e não quero mentir, minha tia de Curitiba estava aqui e estou super feliz, bom desculpas dadas não é? Hoje trago um modelo para área dos comentários, já fiquei muito tempo e tempo procurando um modelo legal com sombra e tals, então como sei tem gente que também quer, por isso, eu fiz, modéstia a parte eu achei bem legal. Bom, vamos ao que interessa?

Aqui esta uma demonstração dos comentários:
PS: O nome está Oong porque é minha conta de teste

Primeiro vá em Modelo > Editar HTML > E pesquise por:

]]></b:skin>
E cole Encima


@font-face {font-family:"PF Arma Five";src:url("pf_arma_five.eot?") format("eot"),url("pf_arma_five.woff")
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #c19bdf; /*Cor da fonte*/
font-family: Verdana; /*Fonte do texto*/
font-size: 0px; /*Tamanho da fonte*/}
#comments {
background: transparent; /*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: #aba0aa; /*Cor de fundo do nome do autor do comentário*/
box-shadow: inset 0 0 22px #a08f9e, 0 0 6px #a08f9e; /*Sombra do fundo do texto do autor e da data*/
padding: 3px;}
.comment-header a {
color: #8b7781 !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: #8b7781 !important; /*Cor do nome do autor do comentário quando passa o mouse*/
-webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
text-decoration: none;}

.comments .comments-content .datetime a{
font-family: PF Arma Five;
font-size: 8px !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*/
-webkit-border-bottom-right-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-moz-border-radius-bottomright: 2px;
-moz-border-radius-bottomleft: 2px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
box-shadow: inset 0 0 22px #e1e1e1, 0 0 6px #e1e1e1; /*Sombra do fundo do 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: #f5f5f5; /*Fundo do bloco de texto do comentário*/
padding: 10px;
color: #bababa; /*Cor da fonte do bloco de texto do comentário*/
font-size: 11px; /*Tamanho da fonte*/}

.comments .avatar-image-container {
/*Tamanho do avatar. Troque todos os 50 pelo tamanho desejado*/
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

.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;
box-shadow: inset 0 0 22px #998797, 0 0 6px #998797; /*Sombra do botao responder e excluir*/
background: #aba0aa; /*Fundo dos botões responder e excluir*/
border: 1px solid transparent;
color: #8b7781 !important; /*Cor do texto dos botões responder e excluir*/
font-family: pf arma five; /*Fonte dos botões responder e excluir*/
font-weight: normal; /*Troque bold por normal para tirar o negrito*/
font-size: 8px;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
margin-right: 10px;}

.comments .comment .comment-actions a:hover {
border: 1px solid transparent;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
font-size: 8px;
font-family: pf arma five; /*Fonte dos botões responder e excluir*/
box-shadow: inset 0 0 22px #d8c6bc, 0 0 6px #d8c6bc; /*Sombra do botao responder e excluir quando passa o mause*/
background: #e1d3cb; /*Fundo dos botões responder e excluir quando passa o mouse*/
color: #b59988 !important; /*Cor do texto dos botões responder e excluir quando passa o mouse*/
text-decoration: none;}

.comments .continue { border-top: none;}
.comments .continue a {display: none;}

Bom, já esta tudo explicado no código, pode editar as cores conforme sua necessidade.
Bom, espero que tenham gostado, até a próxima postagem!

10 comentários:

  1. Adorei, esse modelo ficou perfeito! Eu também costumo usar o modelo do Cherry Bomb e modifico :)
    Estou seguindo o blog, pode seguir o meu sff? É novinho...
    insidee-me.blogspot.com
    Beijos!

    ResponderExcluir
  2. Olá, passei apenas pra dizer que já estou te seguindo e voltarei aqui futuramente pra fazer comentários sobre os posts.
    Seu blog é maravilhoso, convido você e suas leitoras a conhecer meu blog
    http://toobege.blogspot.com.br/
    Beijinhos

    Quem seguir no insta, sigo de volta http://instagram.com/theworldofmari

    ResponderExcluir
    Respostas
    1. Olá AUSH estou seguido de volta, Obrigado
      Se eu tivesse Instagram eu seguia.
      AUSHAUH

      Excluir
  3. Amei a área de comentários, ficou bem bonita.

    Oh! Black Asian

    ResponderExcluir
  4. Que perfeito ! Ç3Ç Achei muito lindinha >< Ah, coloquei o Meu final Feliz nos afiliados :D
    - @TMR

    ResponderExcluir
  5. Não funciona, você poderia ver urgente se este código poderia ser corregido em algum aspecto?
    Obrigada e desculpe a urgência, estou fazendo um layout que é para ontem.

    ResponderExcluir

- Não xingue nem ofenda sem sentido
- Não aceito ''Seguindo segue de Volta?'' APENAS se tiver um comentário com ligação com o Post
- Deixe o link do seu blog, queremos visita-lo
- Sem spans ou correntes
Obrigada ♥