Casinhas \o/

14.4.15

Tutorial: Área dos Comentários igual ao do Blog

                                                        Olá Gatinhos Fofinhos!

 A pedido da seguidora Juliana Wood hoje vim fazer meu primeiro tutorial de como deixar a área dos comentários igual a do VV.
Preview:
Lindo não?
Bem esse modelo eu que fiz, é um circular com imagem de fundo, vamos ver como se faz?
È super hiper mega fácil!
Leia Mais




Bem, existem dois modelos para se fazer:
-HTML
-CSS

 Eu particularmente prefiro CSS, é bem mais fácil, mas vamos por html:

                                                      -HTML

Vá em Editar HTML, aperte Ctrl+F  e pesquise por:

]]></b:skin

Acima disso cole:

/*****************************INICIO COMENTARIOS
CHERRYBOOMB- MODIFICADO POR VITORIA VIEIRA OFICIAL*****************************/
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #transparent; /*Cor da fonte*/
font-family: Verdana; /*Fonte do texto*/
font-size: 10px; /*Tamanho da fonte*/}
#comments {
background: URL DA IMAGEM DE FUNDO; /*Fundo da área geral dos comentários*/
padding: 10px;
background-image: url(" URL DA MESMA IMAGEM DE FUNDO ALI DE CIMA");
border:0px dashed #000000;
}
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #64BCBA; /*Cor da fonte do numero total de comentarios*/
font-family: Comic Sans MS; /*Fonte do texto*/
font-size: 20px; /*Tamanho da fonte*/}
#comments {
background: #TRANSPARENT; /*NÃO MODIFIQUE*/padding: 15px;
}
.comments .comment-block { margin-left: 70px; /*Espaço entre o avatar e o corpo do comentário*/}
.comment-header {
background: #FF6699; /*Cor de fundo do nome do autor do comentário*/
border: 4px solid #FF6699; /*Borda  onde fica o nome do autor do comentário*/
border-radius: 20px 20px 0 0;
padding: 3px;}
.comment-header a {
color: #fff !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: bold; /*Troque bold por normal para tirar o negrito*/}
.comment-header a:hover { color: #FAA7B9 !important; /*Cor do nome do autor do comentário quando passa o mouse*/
text-decoration: none;}
.comments .comments-content .datetime a{
font-size: 10px !important; /*Tamanho da fonte da hora e data do comentário*/
float: right; /*Data alinhada a direita*/
line-height: 16px; /*Altura da linha da data e hora*/}
.comments .comments-content .comment-content{ /*Bloco de texto do comentário*/
margin-top: -10px; /*Espaço entre o bloco de texto do comentário e o nome do autor*/
position: relative;
background: #fff; /*Fundo do bloco de texto do comentário*/
border: 1px dashed #FF6699; /*Borda do bloco de texto do comentário*/
border-radius: 0 0 20px 20px;
padding: 10px;
color: #3f3f3f; /*Cor da fonte do bloco de texto do comentário*/
font-size: 11px; /*Tamanho da fonte*/}
.comments .avatar-image-container {
/*Tamanho do avatar */
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
background: #FFADDF; /*Cor da borda do avatar*/
padding: 3px; /*Espessura da borda do avatar*/}
.comments .avatar-image-container img{
/*Tamanho do avatar */
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;
background: #64BCBA; /*Fundo dos botões responder e excluir*/
border: 1px solid #64BCBA; /*Borda dos botões responder e exluir*/
-Moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
color: #fff !important; /*Cor do texto dos botões responder e excluir*/
font-family: verdana; /*Fonte dos botões responder e excluir*/
font-weight: bold; /*Troque bold por normal para tirar o negrito*/
margin-right: 10px;}
.comments .comment .comment-actions a:hover {
background: #FAA7B9; /*Fundo dos botões responder e excluir quando passa o mouse*/
border: 1px solid #FAA7B9; /*Borda dos botões responder e excluir quando passa o mouse*/
color: #fff !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;}
/**********FIM DOS COMENTARIOS POR WWW.PAPOGAROTA.COM.BR- MODIFICADO POR VITÓRIA VIEIRA********/


                                                          - CSS

Vá no seu CSS, é simples, vá em Modelo/ Personalizar/ Adicionar CSS
E cole isso:

/*****************************INICIO COMENTARIOS
CHERRYBOOMB- MODIFICADO POR VITORIA VIEIRA OFICIAL*****************************/
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #transparent; /*Cor da fonte*/
font-family: Verdana; /*Fonte do texto*/
font-size: 10px; /*Tamanho da fonte*/}
#comments {
background: URL DA IMAGEM DE FUNDO; /*Fundo da área geral dos comentários*/
padding: 10px;
background-image: url(" URL DA MESMA IMAGEM DE FUNDO ALI DE CIMA");
border:0px dashed #000000;
}
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #64BCBA; /*Cor da fonte do numero total de comentarios*/
font-family: Comic Sans MS; /*Fonte do texto*/
font-size: 20px; /*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: #FF6699; /*Cor de fundo do nome do autor do comentário*/
border: 4px solid #FF6699; /*Borda  onde fica o nome do autor do comentário*/
border-radius: 20px 20px 0 0;
padding: 3px;}
.comment-header a {
color: #fff !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: bold; /*Troque bold por normal para tirar o negrito*/}
.comment-header a:hover { color: #FAA7B9 !important; /*Cor do nome do autor do comentário quando passa o mouse*/
text-decoration: none;}
.comments .comments-content .datetime a{
font-size: 10px !important; /*Tamanho da fonte da hora e data do comentário*/
float: right; /*Data alinhada a direita*/
line-height: 16px; /*Altura da linha da data e hora*/}
.comments .comments-content .comment-content{ /*Bloco de texto do comentário*/
margin-top: -10px; /*Espaço entre o bloco de texto do comentário e o nome do autor*/
position: relative;
background: #fff; /*Fundo do bloco de texto do comentário*/
border: 1px dashed #FF6699; /*Borda do bloco de texto do comentário*/
border-radius: 0 0 20px 20px;
padding: 10px;
color: #3f3f3f; /*Cor da fonte do bloco de texto do comentário*/
font-size: 11px; /*Tamanho da fonte*/}
.comments .avatar-image-container {
/*Tamanho do avatar */
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
background: #FFADDF; /*Cor da borda do avatar*/
padding: 3px; /*Espessura da borda do avatar*/}
.comments .avatar-image-container img{
/*Tamanho do avatar */
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;
background: #64BCBA; /*Fundo dos botões responder e excluir*/
border: 1px solid #64BCBA; /*Borda dos botões responder e exluir*/
-Moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
color: #fff !important; /*Cor do texto dos botões responder e excluir*/
font-family: verdana; /*Fonte dos botões responder e excluir*/
font-weight: bold; /*Troque bold por normal para tirar o negrito*/
margin-right: 10px;}
.comments .comment .comment-actions a:hover {
background: #FAA7B9; /*Fundo dos botões responder e excluir quando passa o mouse*/
border: 1px solid #FAA7B9; /*Borda dos botões responder e excluir quando passa o mouse*/
color: #fff !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;}
/**********FIM DOS COMENTARIOS POR WWW.PAPOGAROTA.COM.BR- MODIFICADO POR VITÓRIA VIEIRA********/


Então, simples né? E fica lindo!
O que acharam do meu Primeiro Tutorial?
Acharam legal?
Não se esqueçam dos créditos caso forem colocar no seu blog!
Irei fazer um página para encomendar tutoriais, por favor peça um tutô!!!

Beijos

                                      Assinatura linda

29 comentários:

  1. Amei! Estava procurando um tuto para modificar os coments que não precisasse de html, pois meu blog é meio estranho, não consigo modificar direito o html

    ResponderExcluir
    Respostas
    1. Ai que bom!!!!!!
      Que pena que não consegue mexer no html do seu blog direito, depois se quiser eu ensino!
      Beijos
      Pusheen =*-*=

      Excluir
  2. Respostas
    1. Obrigada!
      Fico Feliz que gostou!
      Beijos
      Pusheen =*-*=

      Excluir
  3. É lindo esse tipo de comentários no blog, quando eu fizer o meu próximo layout com certeza vou usar. Amei o tutorial ♥♥

    Até mais... YPortela.blogspot.com

    ResponderExcluir
    Respostas
    1. Aww, fico feliz que gostou!
      Espero que use no seu próximo layout!
      Beijos
      Pusheen =*-*=

      Excluir
  4. Adorei! vou testar no Html e no java script ^^

    ResponderExcluir
    Respostas
    1. Obrigada!
      Fico Feliz que gostou!
      Beijos
      Pusheen =*-*=

      Excluir
  5. Adorei esse modelinho muito fofinho *3* fico que nem louca procurando modelos de comentario para meus layouts (preguiçosa -q) talvez use ele no proximo lay que fizer
    beijos <3 ~~http://u-ncomplicated.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada!
      Também sou muito preguiçosa!
      Fico Feliz que gostou e irá usá-lo!
      Beijos
      Pusheen =*-*=

      Excluir
  6. Eu irei usar esse modelo de comentários em um dos próximos layouts do 15 Primaveras! Ele é muito lindo *u*.

    ResponderExcluir
    Respostas
    1. Fico Feliz que irá usá-lo!!!
      Obrigada!
      Beijos
      Pusheen =*-*=

      Excluir
  7. Adorei o modelo!!
    Chu ~~ http://auwss.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada!
      Fico Feliz que gostou!
      Beijos
      Pusheen =*-*=

      Excluir
  8. Olá c:
    Que modelo fofo :3
    Sinceramente não gosto do CSS, acho complicado demais :x Estou acostumada com o HTML então uso ele mesmo haha
    Gostei do tuto :3
    Beijos ♥
    PS: Eu te respondi lá no meu blog, sobre você modificar o fundo de um layout meu e tals: http://algunsr4biscos.blogspot.com.br/2015/04/wishlist-2015.html#comment-form
    Post novo: http://algunsr4biscos.blogspot.com.br/2015/04/4-dicas-pra-mim-e-para-voces.html
    www.algunsr4biscos.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada!
      Fico Feliz que gostou♥
      Eu prefiro CSS, é só copiar+colar, o HTML tem que ficar pesquisando, e muitas vezes não acho!
      P.S- Irei ver!
      Beijos
      Pusheen =*-*=

      Excluir
  9. Ainw parabéns amiga pelo 50 seguidores e´que venham muito mais <33
    Adorei o lay e tutorial vou usa-lo,pode fazer um de como colocar o cabeçalho como o seu?
    Beijos

    ResponderExcluir
    Respostas
    1. Obrigada amiga! <33 Para você também!
      Fico feliz que gostou e irá usá-lo!
      Como?Deste Layout?Ou o da Briar Beauty?
      Beijos

      Excluir
    2. O da Briar ^^
      Ficou divo demais mig's
      Beijos

      Excluir
    3. Ta´okay mig´s, acho que hoje mesmo ainda sai esse tutorial.
      beijos

      Excluir
  10. Oi Vi! adorei o blog,já tô seguindo! esse tuto é ótimo,deixa os comentários bem lindos...Beijos
    http://princes-kawaii.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Awwt, obrigado Gi!!!
      Fico feliz que gostou!
      Beijos
      Pusheen =*-*=

      Excluir
  11. Adorei o tutorial a área dos comentários fica bem charmosa.
    XoXo

    Gato Fofo

    ResponderExcluir
    Respostas
    1. Obrigado!
      Fico Feliz que Gostou! Fica bem charmosa mesmo!
      Beijos
      Pusheen =*-*=

      Excluir
  12. A-M-E-I!!! Estava procurando um tuto desses! Vou usar no meu blog!
    Beijinhos da Malu :3

    ResponderExcluir
    Respostas
    1. Awwts fofa, fico feliz que amou♥
      Fico feliz que irá usar!
      Beijos
      Pusheen =*-*=

      Excluir
  13. Awn! Amei! Usei no meu novo blog! >.< Vou colocar os créditos agora mesmo! Bjs!

    ResponderExcluir
    Respostas
    1. Awn, fico Feliz que gostou!
      Fico tão que usou e colocará os créditos! ♥
      Beijos♥

      Excluir
  14. Faz um tutorial sobre como perzonalizar o botaozinho das pags e como colocar o negocio de voltar ao topo

    ResponderExcluir

✗Não fale palavrões, deixe sua opinião mas com educação
✗Aceito Tags
✗Deixe o link do seu blog, irei visitá-lo
✗Troco comentários
✗ Antes de pedir algo, fale sobre o post.
✗Aceito: ¨Segue de volta" e caso parar se seguir o VV também paro de seguir seu blog.
✗Enfeite seu comentário:웃 ღ ♡ ❤ ❥ ❦ ∴ △ ∞ ☆ ★ ✖  。◕‿◕。 ® ™ ☏ ℡゚✤ ❝ ❞ ✥ ✦ ✧ ✩ ✫ ✬ ✭ ✮ ✯ ✰ ✱ ✲ ✳ ❃ ❂ ❁ ❀ ✿ ✾ ✽ ✼ ✻ ✺ ✹ ✸ ✷ ₪ ❃ ❂ ❁ ❀ ✿ ✾ ✽ ✼ ✶ ✵ ✴ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋ ❖ ▲ ▼ △ ▽ ⊿ ◤ ◥ ◣ ◥ ● ❣ ✐ ✎ ✏ ✍ ✆ ☎ ✄ † ✞ ✝ ⌚۩  ๑ ۩ ۞ ๑  & ☗ ☖ ☑ ☒ ☓☟ ☠ ☡ ☢ ☣ ☤ ☥ ☦ ☧ ☨ ☩ ☪ ☫ ☬ ☭ ☮ ☯ ➹◎ ☁ ☀ ☃ ☂ ♣ ♥ ☼ ✗ ✘ ✚ ✪ ✣ ✤ ✥ ☠ ♢ ♤ ♡ ♧ ☽ ☾ ◯ ☚ ☛ ☜ ☝ ☞ ☟ ✌ ☼ ☀ ❂ ☁ ☂ ☃ ☄ ☾ ☽ ❄ ☇ ☈ ⊙ ☉ ℃ ℉ ° ❅ ✺ ϟ ⓘ ⓛ ⓞ ⓥ ⓔ ⓨ ⓞ ⓤ ∞ ♪ ♫ ♩ ♭ ♯ ♬ ♔ ♕ ♖ ♗ ♘ ♙ ♚ ♛ ♜ ♝ ♞