expr:class='"loading" + data:blog.mobileClass'>

[TUTORIAIS] Personalizando os comentários do blog

Olá queridas, tudo bem?
Entao o tutorial de Hoje é muuuuito necessary in hum blog. Dá um charme Tão grande, e e Tao do facinho de Fazer! Voce Só VAI precisar de Um pouquinho de rsrs Paciência.

Vamos Aprender a personalizar NOSSOS Comentários?

Esse tutorial eu aprendi Lá Na Cherry Bomb, Que É Um Blog Que Eu super-Indico pra quem ESTA Querendo Aprender MAIS SOBRE personalização de layouts - tema Quase Tudo Lá. Dei Uma personalizada Nele, com Duas opções. Um Mais rosa e parecido com o Que Tem Aqui no blog, EO Outro num tom azul Bem fofo. Espero que gostem!



Para adicionar ESSE Comentários de super fofos Ao Seu blog, basta abrir uma área modelo Editar HTML de Um CRT + F   Procuradoria POR]]> </ b: skin>   cole o código escolhido logotipo Acima do that rápido você encontrou. Fácinho, né? Divirtam-se ♥


Primeiro Modelo de Comentários:




/ *** COMENTARIOS - PERSONALIZADOS *** /
#comments h4, #comments .comment-autor de um, #comments .comment-timestamp uma {/ * Texto "X comentários:" * /
color: # FF82AB; / * Cor da fonte * /
font-family: Verdana; / * Fonte do texto * /
font-size: 18px; / * * Tamanho da fonte * /}
#comments {
background: # fff; / * Fundo da área Geral dos Comentários * /
padding: 15px;
text-align: center;
}
.Comentários .comment-block {margin-left: 70px; / * Espaço Entre o avatar EO Corpo do comentário * /}

.comment-header {
background: # FFB6C1; / * Cor de Fundo do Nome do Autor fazer comentário * /
border: 1px solid # FF82AB; / * Borda de FICA Onde o Nome do Autor fazer comentário * /
padding: 3px;}
.comment-header um {
! color: # fff importante; / * Cor do Nome do Autor fazer comentário * /
font-family: Verdana; / * Fonte do Nome do Autor fazer comentário * /
font-size: 16px; / * * Tamanho da Fonte do Nome do Autor fazer comentário * /
font-weight: normal; / * Troque o normal POR negrito parágrafo deixar o texto em negrito * /}
.comment-header a: hover {color: # 684980 importante; / * Cor do Nome do Autor fazer comentário when passa o rato * /
text-decoration: none;}

.Comentários .Comentários-content .datetime um {
font-size: 10px importante; / * * Tamanho da Fonte da hora e os dados do comentário * /
float: right; / * Dados alinha á Direita * /
line-height: 16px; / * Altura da Linha da dados e hora * /}

.Comentários .Comentários-content .comment-content {/ * Bloco de texto do comentário * /
margin-top: -10px; / * Espaço Entre o bloco de texto do comentário EO Nome do Autor. Só mexa se Souber O Que ESTÁ Fazendo * /
position: relative;
background: # FFE4E1; / * Fundo do bloco de texto do comentário * /
border: 1px solid # FF82AB; / * Borda do bloco de texto do comentário * /
padding: 10px;
color: # 4c4c4c; / * Cor da fonte do bloco de texto do comentário * /
font-size: 11px; / * * Tamanho da fonte * /}

.Comentários .avatar-recipiente imagem {
/ * * Tamanho do avatar. Troque de Todos os 50 cabelo TAMANHO Desejado * /
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
background: # FF69B4; / * Cor da Borda do avatar * /
padding: 3px; / * Espessura da Borda do avatar * /}

.Comentários .avatar-image-recipiente img {
/ * * Tamanho do avatar. Troque de Todos os 50 cabelo TAMANHO Desejado * /
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;}

.comment .Comentários .Comentários-content {
padding:! 20px 10px importante;
margin-bottom: 15px important}!

.Comentários .comment .comment-ações a {
padding: 5px;
background: # FFB6C1; / * Fundo dos botoes responder e excluir * /
border: 1px solid # FF82AB; / * Borda dos botoes responder e exluir * /
! color: # fff importante; / * Cor do texto dos botoes de resposta e excluir * /
font-family: verdana; / * Fonte dos botoes responder e excluir * /
font-weight: bold; / * Troque negrito POR normais Tirar PARA O negrito * /
margin-right: 10px;}

.Comentários .comment .comment-ações a: hover {
background: # FF82AB; / * Fundo dos BOTÕES responder e excluir when passa o rato * /
border: 1px solid # FF82AB; / * Borda dos botoes responder e exluir when passa o rato * /
! color: # fff importante; / * Cor do texto dos BOTÕES responder e excluir when passa o rato * /
text-decoration: none;}

.Comentários .Continuar {border-top: none;}
.Comentários .Continuar a {display: none;}

/ *** FIM DOS PERSONALIZADOS comentarios *** /

Segundo Modelo de Comentários



/ *** COMENTARIOS - PERSONALIZADOS *** /
#comments h4, #comments .comment-autor de um, #comments .comment-timestamp uma {/ * Texto "X comentários:" * /
color: # 87CEFA; / * Cor da fonte * /
font-family: Verdana; / * Fonte do texto * /
font-size: 18px; / * * Tamanho da fonte * /}
#comments {
background: # fff; / * Fundo da área Geral dos Comentários * /
padding: 15px;
text-align: center;
}
.Comentários .comment-block {margin-left: 70px; / * Espaço Entre o avatar EO Corpo do comentário * /}

.comment-header {
background: #BFEFFF; / * Cor de Fundo do Nome do Autor fazer comentário * /
border: 1px solid # 87CEFA; / * Borda de FICA Onde o Nome do Autor fazer comentário * /
padding: 3px;}
.comment-header um {
color: # 000000 importantes;! / * Cor do Nome do Autor fazer comentário * /
font-family: Verdana; / * Fonte do Nome do Autor fazer comentário * /
font-size: 16px; / * * Tamanho da Fonte do Nome do Autor fazer comentário * /
font-weight: normal; / * Troque o normal POR negrito parágrafo deixar o texto em negrito * /}
.comment-header a: hover {color: #! 1E90FF importante; / * Cor do Nome do Autor fazer comentário when passa o rato * /
text-decoration: none;}

.Comentários .Comentários-content .datetime um {
font-size: 10px importante; / * * Tamanho da Fonte da hora e os dados do comentário * /
float: right; / * Dados alinha á Direita * /
line-height: 16px; / * Altura da Linha da dados e hora * /}

.Comentários .Comentários-content .comment-content {/ * Bloco de texto do comentário * /
margin-top: -10px; / * Espaço Entre o bloco de texto do comentário EO Nome do Autor. Só mexa se Souber O Que ESTÁ Fazendo * /
position: relative;
background: # F0FFFF; / * Fundo do bloco de texto do comentário * /
border: 1px solid # 87CEFA; / * Borda do bloco de texto do comentário * /
padding: 10px;
color: # 4c4c4c; / * Cor da fonte do bloco de texto do comentário * /
font-size: 11px; / * * Tamanho da fonte * /}

.Comentários .avatar-recipiente imagem {
/ * * Tamanho do avatar. Troque de Todos os 50 cabelo TAMANHO Desejado * /
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
background: # 87CEFA; / * Cor da Borda do avatar * /
padding: 3px; / * Espessura da Borda do avatar * /}

.Comentários .avatar-image-recipiente img {
/ * * Tamanho do avatar. Troque de Todos os 50 cabelo TAMANHO Desejado * /
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;}

.comment .Comentários .Comentários-content {
padding:! 20px 10px importante;
margin-bottom: 15px important}!

.Comentários .comment .comment-ações a {
padding: 5px;
background: #BFEFFF; / * Fundo dos botoes responder e excluir * /
border: 1px solid # 87CEFA; / * Borda dos botoes responder e exluir * /
! color: # fff importante; / * Cor do texto dos botoes de resposta e excluir * /
font-family: verdana; / * Fonte dos botoes responder e excluir * /
font-weight: bold; / * Troque negrito POR normais Tirar PARA O negrito * /
margin-right: 10px;}

.Comentários .comment .comment-ações a: hover {
background: # 87CEFA; / * Fundo dos BOTÕES responder e excluir when passa o rato * /
border: 1px solid # 87CEFA; / * Borda dos botoes responder e exluir when passa o rato * /
! color: # fff importante; / * Cor do texto dos BOTÕES responder e excluir when passa o rato * /
text-decoration: none;}

.Comentários .Continuar {border-top: none;}
.Comentários .Continuar a {display: none;}

/ *** FIM DOS PERSONALIZADOS comentarios *** /


Quer Fazer do Seu jeitinho, pra COMBINAR Mais com Seu layout? Pega ESSA Tabela de núcleos here, e altera nsa campos Onde TEM núcleos. QUALQUÉR Dúvida, É Só Chamar! Espero que gostem ♥

Já seguiu o blog? ENTÃO VEM Seguir parágrafo NÃO Ficar de fora de nenhuma novidade! : *

10 comentários:

  1. Ah deu até vontade de mexer por lá agora, pena que to sem tempo! :c

    ResponderExcluir
    Respostas
    1. Aah Suzana, dps voce tenta e me diz como ficou.. Eh facinho! S2

      Excluir
  2. Ficou muito lindo, mas realmente tem que ter paciência né? rs
    Beijos

    http://diadespa.blogspot.com/

    ResponderExcluir
    Respostas
    1. Pra alterar os codigos tem que ter um pouquinho de paciencia msm rs mas por isso trouxe esses modelos prontinhos pra vcs *-*

      Excluir
  3. adorei o tutorial
    lembro que no meu layout antigo eu queria mudar e nunca consegui
    no meu layout atual a menina colocou uma area de comentários legal se nao ia ja tentar mudar psokspokspos

    ResponderExcluir
    Respostas
    1. Eu acho os comentarios do seu blog super fofo! Acho que estou meia viciada em mexer no html, Marcelle! Simplesmente nao consigo mais parar kk

      Excluir
  4. Ótima dica, sempre bom deixar o lay do nosso jeitinho né? Cada detalhe já faz diferença!
    Um beijo

    ResponderExcluir
    Respostas
    1. Com certeza Lari *-* Acho que nosso cantinho tem que ter a nossa cara s2

      Excluir
  5. Que legal, estou adorando suas dicas, princesa!
    Beijos e uma semana abençoada. ♥
    www.normalidadeincomum.com.br
    www.youtube.com/NormalidadeIncomum

    ResponderExcluir