Personalize: Comentário Em Caixas

amazing, awesome, france, girl

Esse tutorial de personalização é bem simples, mas deixa os comentários uma graça! Clique em Leia Mais e aprenda mais este tutorial!
TUTORIAL

Bem, vou ensinar agora para vocês a personalização que estou utilizando agora, espero que gostem, é bem simples e até os iniciantes no HTML podem estar fazendo sem ajuda. Vamos?

O objetivo é algo parecido com este:


Certo? Vamos lá! Primeiro, configure a área de comentários. Vá em Configurações > Postagens e Comentários. Deve ficar assim:


No modo Incorporado é o certo.

Agora, vamos colocar a mão na massa! Vá para a Edição HTML do seu blog e procure por:

#comments {

Abaixo disso, cole:

background: url(URL_DA_IMAGEM_AQUI); (Caso queira uma imagem de fundo) ou background: #CódigoDaCor (Caso queira uma cor: Tabela De Cores Aqui.)

Você pode adicionar bordas, como no modelo que utilizo, basta acrescentar:

border: 5px #FFFF00 solid; /* EDITE O ESTILO DA BORDA */

Tudo bem até então? Vamos prosseguir!

Agora procure por: .avatar-image-container {

Após encontrar, você pode colocar bordas e também arredondar as pontas:

border-radius: 5px; /* CÓDIGO DE ARREDONDAMENTO (Edite) */
border: 5px #FFFF00 solid; /* CÓDIGO PARA ESTILO DA BORDA */

Logo abaixo, você encontra:

/* Comments

Após, cole estes dois códigos e os edite:

.comments .comment-block{
margin-left:65px;
position:relative;
background:#FFF8DC; /* COR DE FUNDO DO COMENTÁRIO */
border:3px solid #F08080; /* COR DA BORDA DO COMENTÁRIO */
}
.comment-header{ 
background-color:#FFB6C1;   /* COR DE FUNDO DO NOME DO AUTOR DO COMENTÁRIO */
font-size:16px;
border-bottom:1px solid #F08080;  /* COR DA LINHA DE DIVISÃO (COMENTÁRIO E NOME DO AUTOR) */
padding:5px;
}
.comment-header a{
color: $(link.color); /* COR DO LINK DO AUTOR DO COMENTÁRIO */
}

Todas as instruções de edição se encontram nesse próprio código.

Mas atenção! Procure sempre harmonizar as cores entre si!



Tudo pronto? Agora você pode salvar e conferir o resultado. Espero que tenham gostado. Vai repassar? Com créditos é claro!