09/12/2014

Personalize a Área dos Comentários

Boenas, mi docitos, espero que estejam bens!  Trouxe um tutorial de como personalizar a área dos comentários, estilo fofo:



Bom, antes de mais nada, esse tutorial é exclusivo do blog Pequena Garota  , então, os merecidos créditos estão aí.
Agora, ao tutorial.
Para funcionar, os comentários precisam abrir em uma janela pop-up ou em outra guia. Para isso, vá em configurações - postagens e comentários - local do comentário.
Agora, aperte F3 ou Ctrl+F e pesquise por #comments. Você deverá apagar todo esse código:


#COMMENTS {  BACKGROUND: $(COMMENTS.BACKGROUND);  PADDING: 15PX;}#COMMENTS .COMMENT-AUTHOR {  PADDING-TOP: 1.5EM;}#COMMENTS H4,#COMMENTS .COMMENT-AUTHOR A,#COMMENTS .COMMENT-TIMESTAMP A {  COLOR: $(POST.TITLE.TEXT.COLOR);}#COMMENTS .COMMENT-AUTHOR:FIRST-CHILD {  PADDING-TOP: 0;  BORDER-TOP: NONE;}.AVATAR-IMAGE-CONTAINER {  MARGIN: .2EM 0 0;}



-

Deverá então, colar esse código no lugar:


#COMMENTS H4 { /* ESTE É TITULO DO FORMULARIO, ONDE MOSTRA "X COMENTÁRIOS" E "POSTAR UM COMENTÁRIO" */MARGIN:0;COLOR:#FF4D8E;FONT-FAMILY: LUCIDA HANDWRITING;FONT-WEIGHT: NORMAL;FONT-SIZE:36PX;TEXT-SHADOW: NONE;}#COMMENTS-BLOCK .COMMENT-AUTHOR { /* O ESPAÇO DO NOME DE QUEM COMENTOU */BACKGROUND: #FFF; /*COR DE FUNDO DO NOME DE QUEM COMENTOU*/COLOR: #8FDDF6; /*COR DA FONTE*/FONT-FAMILY: TREBUCHET MS; /*NOME DA FONTE*/FONT-SIZE:16PX; /*TAMANHO DA FONTE*/BORDER-BOTTOM: DOUBLE 3PX #8FDDF6; /*BORDA DE BAIXO DO NOME*/PADDING: 5PX;MARGIN:.5EM 0;HEIGHT:30PX; /*ALTURA DO ESPAÇO DO NOME*/FONT-WEIGHT: NORMAL; /*PESO DA FONTE. MUDE DE NORMAL PARA STRONG SE QUISER O TEXTO EM NEGRITO*/}#COMMENTS-BLOCK .COMMENT-AUTHOR A:LINK {TEXT-DECORATION: NONE;}#COMMENTS-BLOCK .COMMENT-BODY { /* AREA DO TEXTO DO COMENTARIO */BACKGROUND: #000; /*FUNDO DA ÁREA DO COMENTÁRIO*/MARGIN-TOP: -2PX; /*MARGEM EXTERNA DO TOPO*/PADDING: 5PX;FONT-FAMILY:TREBUCHET MS; /*NOME DA FONTE*/FONT-SIZE: 12PX;/*TAMANHO DA FONTE*/COLOR:#FFF; /*COR DA FONTE*/WIDTH: 500PX; /*LARGURA DA ÁREA DOS COMENTÁRIOS, ALTERE DE ACORDO COM SEU BLOG*//*BORDAS ARREDONDADAS DA ÁREA DO COMENTÁRIO*/-MOZ-BORDER-RADIUS: 20PX;-WEBKIT-BORDER-RADIUS: 20PX;BORDER-RADIUS: 20PX;/*FIM DO CÓDIGO DA BORDA ARREDONDADA*/}#COMMENTS-BLOCK .COMMENT-FOOTER {MARGIN:7PX 0 2EM;LINE-HEIGHT: 1.4EM;FONT-SIZE: 95%; /* TAMANHO DA FONTE DA DATA DO COMENTÁRIO */TEXT-ALIGN: RIGHT; /* ALINHAMENTO DA DATA DO COMENTÁRIO */LETTER-SPACING:.1EM;}#COMMENTS-BLOCK .COMMENT-FOOTER A:LINK{BACKGROUND: #B9FF46; /*FUNDO DA DATA DO COMENTÁRIO*/}.DELETED-COMMENT A {MARGIN: 10PX 0 2EM;FONT-STYLE: ITALIC;COLOR: #CCC; /*** COR DO RECADO DE 'COMENTÁRIO DELETADO' ***/}



-

Prontinho! Personalize de acordo com o seu blog e salve. Bem legal né? Deixa o blog mais bonitinho e tals... Bom, gente, por hoje é só! Talvez eu me ausente nesse final de semana, talvez... Fiquem com Deus, meus anjinhos, e até! 

Nenhum comentário:

Postar um comentário