Modelo para área dos Comentários #2



Então, me pediram para postar algum modelo para a área dos comentários. Eu fiz um modelinho bem simples mesmo, ainda não sou muito boa nessas coisas. Ele é bem normal, mas uma coisa que obviamente não dá para ver pela imagem de preview abaixo e que é um detalhezinho diferente, é que ele tem um efeitinho no hover da imagem do autor do comentário, ela fica tremendo, louco. UASHUAS

O modelo é esse da imagem abaixo. Lembrem-se que poderão substituir as cores, obviamente.



1. Vá no seu HTML e procure por /* Comments. Você irá achar algo do tipo:

/* Comments
----------------------------------------------- */

- Todas as personalizações desta área.


/* Widgets
----------------------------------------------- */

2. Apague todas as personalizações dos comentários e no lugar do que apagou, cole:
@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
#comments {
  background: #fffff; /*A cor de trás, recomendo não mudar*/
  padding: 15px;
}
.comments .comment-block { margin-left: 70px; /*Espaço entre a imagem e o corpo do comentário*/}

.comment-header {
background: #d7c1ad; /*Fundo do nome do autor do comentário*/
box-shadow: inset 0 0 8px #d7c1ad, 0 0 3px #dbdbdb; 
border: 1px solid #af4896; /*A borda, que está roxa no caso*/
padding: 3px;
}
.comment-header a {
color: #fff !important; /*Cor do nome do autor do comentário*/
font-family: Verdana; /*Fonte do nome*/
font-size: 14px; 
font-weight: normal;
}
.comment-header a:hover { 
color: #684980 !important; /*Hover do nome do autor do comentário*/
font-weight: normal;
}
.comments .comments-content .datetime a{ /* Hora e data*/
font-family: silkscreen;
font-size: 8px !important;
float: right;
line-height: 16px;
}

.comments .comments-content .comment-content{ /*Bloco de texto do comentário*/
margin-top: -10px; /*Não mude*/
position: relative;
background: #e8e8e8; /*Fundo do bloco de texto do comentário*/
box-shadow: inset 0 0 8px #e8e8e8, 0 0 3px #dbdbdb;
border: 1px solid #af4896; /*A borda, que está roxa no caso*/
padding: 5px;
color: #4c4c4c; /*Cor da fonte da escrita*/
font-size: 11px;
}
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Personalização do "tantos comentários"*/
color: #af4896;
font-family: Bebas; /*Fonte do nome*/
font-size: 22px; 
font-weight: normal;
}
#comments-block .comment-body {
  background: #f0f0f0;
  padding: 5px;
}
#comments-block .comment-footer {
  padding: 2px;
  text-align: right;
  border-bottom: 1px dotted #000;
}
#comments-block .comment-footer a:link{
  background: #fbfbfb;
}
#comments .comment-author:first-child {
  padding-top: 0;
  border-top: none;
}
.comments .avatar-image-container { /*Imagem da pessoa que comenta*/
max-width: 40px; /*Tamanho da imagem do comentador. */
max-height: 40px; /*Tamanho da imagem do comentador. */
min-height: 40px; /*Tamanho da imagem do comentador. */
min-width: 40px; /*Tamanho da imagem do comentador, repita o mesmo número sempre */
background: #d7c4ad; /*Cor da borda da imagem*/
padding: 2px; /*Grossura da borda da imagem*/
}

.comments .avatar-image-container:hover{ /*Imagem da pessoa que comenta ao passar o mouse*/
max-width: 40px; /*Tamanho da imagem do comentador. */
max-height: 40px; /*Tamanho da imagem do comentador. */
min-height: 40px; /*Tamanho da imagem do comentador. */
min-width: 40px; /*Tamanho da imagem do comentador, repita o mesmo número sempre */
background: #af4896; /*Cor da borda da imagem*/
padding: 2px; /*Grossura da borda da imagem*/
-webkit-animation: cssAnimation 0.1257s 16 ease; /*Não mude nada daqui pra baixo*/
-moz-animation: cssAnimation 0.1257s 16 ease;
-o-animation: cssAnimation 0.1257s 16 ease;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -webkit-transform: rotate(0deg) scale(0.872) skew(1deg) translate(0px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -moz-transform: rotate(0deg) scale(0.872) skew(1deg) translate(0px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -o-transform: rotate(0deg) scale(0.872) skew(1deg) translate(0px); }
}

.comments .avatar-image-container img{
max-width: 40px; /*Tamanho do avatar. */
max-height: 40px; /*Tamanho do avatar. */
min-height: 40px; /*Tamanho do avatar. */
min-width: 40px; /*Tamanho do avatar, repita o mesmo número sempre.*/
}

É, realmente o código é bem extenso, mas sempre será assim quando estivermos trabalhando com a área dos comentários. Recomendo que só modiquem o que "legendei", o que dei instruções.
Até mais! :3

28 comentários:

  1. Achei Lindo Ingrid e bem Simples"

    http://worldofthel.blogspot.com.br/

    ResponderExcluir
  2. UIHIHIHIHIHIS' O meu novo lay já está pronto também >3< Faltam 14 seguidores para o mudar *u* Mas, sim, dá vontade de trocar já ;)
    Awnnn que lindoo o modelo ^^ Mas eu já tenho o meu!
    Kiss ~

    ResponderExcluir
    Respostas
    1. Dá sim UASHAUSH Eu quero ver o seu u_u
      Obrigaada linda >3<

      Excluir
  3. Que legal o modelo, pena que eu mudei o meu layout recentemente e não vou poder usar.
    the-paradiise.blogspot.com.br/

    ResponderExcluir
  4. Adorei o tutorial,acho que vou usar no proximo layout seguindo,se puder siga de volta.
    http://roses-andbooks.blogspot.com.br/

    ResponderExcluir
  5. Eu ganhei o game, 2bjo pessoas rekalkadas -n
    O modelo é lindo :3

    Modern HTML

    ResponderExcluir
  6. Nossa me salvou agora Ingrid estava procurando um modelo decente para a área dos coments.

    Seguindo.
    http://cupcake-bunny.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Awn, espero ter ajudado >u< Obrigada por seguir, já sigo o seu. >3<

      Excluir
  7. Esse "simples" Ficou lindo, maravilhoso perfeito <3 Estou ansiosa para o novo layout mais esse também é perfeito, deixa esse só mais um pouquinho *u*

    ResponderExcluir
    Respostas
    1. UHASUAHS Obrigada diva <3
      Vou tentar deixar, eu disse que tentaria deixar até termos pelo menos 850 seguis, espero conseguir >3<

      Excluir
  8. Fica lindos os comentário! Amei! <3

    Beijos Sweet Girl

    ResponderExcluir
  9. Tutorial bem explicadinho! Adorei!
    Cara, acho muito louco o seu blockquote, HSIAHSIAHSAIS
    Está de parabéns pela originalidade! O3O
    xoxo ~

    ResponderExcluir
  10. Bem perfeito Ingrid u3u mas como o primeiro layout de meu blog é encomendado deixarei para usar no segundo ok? Lindo blog este seu ~ realmente merece todos os seguidores que tem e muito mais =)

    Kissus, minna san :3
    Spring Flowers {em breve!}

    ResponderExcluir
    Respostas
    1. Obrigada fofa >3< Depois quero ver seu blog *u*

      Excluir
  11. Eu também não consigo esperar para colocar um layout novo no meu blog. Estou curiosa para ver como está ficando EUHEUEH'
    Amei o tutorial, já estou seguindo para ajudar na meta.
    Beijos | empire-explosion.blogspot.com

    ResponderExcluir
    Respostas
    1. ASHAUSHAUSH E eu quero mostrar logo, affs u_u
      Obrigada flor *-*

      Excluir
  12. Que pena que não ganhei, fica pra próxima. Fico bem fofo, Ingrid sua diva u_u'

    ResponderExcluir
  13. obg pelo tutorial fofa amei
    mil bjoks
    rockmoreworld.blogspot.com.br

    ResponderExcluir
  14. É lindo, vou usar no meu novo blog !

    ResponderExcluir

Obrigada pelo seu comentário, sua opinião é muito importante!
Se seu perfil for trancado, não se esqueça de deixar o link do seu blog ou pelo menos o nome, para que eu possa retribuir. ♥

« » +