Olá queridas, tudo bem?
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 ♥
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! : *
Ah deu até vontade de mexer por lá agora, pena que to sem tempo! :c
ResponderExcluirAah Suzana, dps voce tenta e me diz como ficou.. Eh facinho! S2
ExcluirFicou muito lindo, mas realmente tem que ter paciência né? rs
ResponderExcluirBeijos
http://diadespa.blogspot.com/
Pra alterar os codigos tem que ter um pouquinho de paciencia msm rs mas por isso trouxe esses modelos prontinhos pra vcs *-*
Excluiradorei o tutorial
ResponderExcluirlembro 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
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Ótima dica, sempre bom deixar o lay do nosso jeitinho né? Cada detalhe já faz diferença!
ResponderExcluirUm beijo
Com certeza Lari *-* Acho que nosso cantinho tem que ter a nossa cara s2
ExcluirQue legal, estou adorando suas dicas, princesa!
ResponderExcluirBeijos e uma semana abençoada. ♥
www.normalidadeincomum.com.br
www.youtube.com/NormalidadeIncomum
Aaain, que bom que esta gostando minha liiiindaaa *-*
Excluir