Personalizar a Área dos Comentários

| |
Oie gente hoje vou ensinar como personalizar a área dos comentários do blog, tirar aquela aparência que o blogger tem com os comentários , aquela área cinza, então mãos a massa.
Procure pela tag.

/* Comments

----------------------------------------------- */

.comments .comments-content .icon.blog-author {

background-repeat: no-repeat;
......

.comments .comments-content .loadmore a {

border-top: 1px solid $(tabs.border.color);

border-bottom: 1px solid $(tabs.border.color);

}

.comments .continue {

border-top: 2px solid $(tabs.border.color);

}


Substitua pelo seguinte código

Modelo 1
/* AREA GERAL DOS COMMENTS */
@font-face {font-family: 'Pacifico';src:local('Pacifico'),local('Pacifico'),url('http://0.tqn.com/d/graphicssoft/1/7/7/3/5/Plaid-Pattern08.png') format('woff')}
.comments{
width:99% !important;
margin:0 auto;
font-style:normal !important;
font-size:12px !important;
font-family:verdana !important;
background:#E8E8E8 !important;
border-radius:10px;
}
/*
HEADING DOS COMMENTS (1 comentario, 2 comentários...)**/
.comments h3,.comments h4{
width:95%;
padding:7px;
margin-bottom:10px;
color:#8B0000;
text-align:center;
font-family:'Pacifico' !important;/* FONT-FAMILY - se preferir troque */
font-size:35px !important;/* TAMANHO DO TEXTO - se preferir troque */
}
/* BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone ...)*/
.comments .comment-block {
position:static !important; /* MANTÉM O AVATAR NA FRENTE DO BLOCO - NÃO MUDE */
background:#fff; /* COR DO FUNDO */
margin-left:23px;
padding:0 15px 0 23px;
border-top:19px #8B0000 solid;
border-radius:11px;
box-shadow:0 0 3px #8B0000, inset 0 0 11px #8B0000
}
.comments .comments-content .comment {
padding:20px 10px !important;
margin-bottom:15px !important
}
/* estilos para o nome do autor do comentário */
.comments .comments-content .user a{
font-style:normal;
border:0;
color:r#9B30FF!important;
letter-spacing:1px;
font-family:'Pacifico';
font-size:20px;
background:transparent;
padding:4px 36px;
margin-left:-31px !important;
border-bottom-right-radius:10px;margin-top:-2px
}
.comments .comments-content .user{
font-style:normal;
border:0;
color:rgb(240,94,138) !important;
letter-spacing:1px;
font-family:'Pacifico';
font-size:20px;
background:transparent;
padding:4px 36px;
margin-left:11px !important;
border-bottom-right-radius:10px;margin-top:-2px#FF1493 dashed / borda
}
/* estilo da data */
.comments .comments-content .datetime a{
background:none !important;
font:bold 11px courier new;
float:right;
font-size:10px;
color:#999;
border:0 !important
}
/* estilo do avatar */
.avatar-image-container {
min-width:60px; /* determina um minimo de largura */
min-height:60px; /* determina um minimo de altura */
border:4px #8B0000 solid; /* borda */
padding:0 !important;
margin-left:23px !important;
margin-top:17px !important;
position:absolute !important;
overflow:hidden !important;
background:#1E90FF;
border-radius:60px
}
.avatar-image-container img {
margin:1;
max-height:60px;
min-height:60px;
max-width:60px;
min-width:60px;
-moz-border-radius: 60px;  /* para Firefox e Flock*/
-webkit-border-radius: 60px;  /* para Chrome e Safari */
border-radius: 60px;
border:1px solid #8B0000   /*--- Edite  ---*/
}
/*TEXTO DO COMENTÁRIO*/
.comments p{
font-size:12px !important;
font-family:trebuchet ms !important;
text-shadow:0 1px #ccc !important;
padding-left:55px !important;
padding-bottom:20px;
color:#888 !important
}
/*BOTAO - RESPONDER */
/* botao responder do segundo nível */
.comments .continue a {
background:#fff !important;
color:#999 !important;
float:right;
padding:8px !important;
height:10px !important;
line-height:15px !important;
margin-top:-35px !important;
}
/* botao responder do primeiro nível, mais estilos para o botao do segundo nível */
.comments .comment .comment-actions a,.comments .continue a {
font-size:11px !important;
float:right;
height:10px !important;
color:#fff;
padding:6px;
border:0 !important;
line-height:10px;
margin:5px;
margin-left:40px;
font-family:helvetica;
text-shadow: 0 0;
border-radius: .5em;
background:#8B0000;
font-weight:800;
box-shadow:0 1px 2px #666
}
/* botao hover*/
.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover {
text-decoration:none !important;
padding-bottom:4px
}
/* estilos para bloco de respostas */
.comments .comment-thread.inline-thread {
background-color: transparent !important;
margin-top:40px;
padding:0.5em 1em;
border-radius:5px;
border:2px #8B0000 dotted
}
.comments .comments-content .comment-replies {
margin-top:1em;
margin-left:56px !important
}
.comments .continue {border-top:0 !important}
.comments .thread-toggle,.icon.blog-author {display:none !important}
/* Fim*/


Modelo 2

/* AREA GERAL DOS COMMENTS */
@font-face {font-family: 'Pacifico';src:local('Pacifico'),local('Pacifico'),url('http://0.tqn.com/d/graphicssoft/1/7/7/3/5/Plaid-Pattern08.png') format('woff')}
.comments{
width:99% !important;
margin:0 auto;
font-style:normal !important;
font-size:12px !important;
font-family:verdana !important;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX-oPHnQJ6py6cDLGGjmv7iBkL2razfpC9GxCFgnQMJDQbBic8Jnl4E75-ATlYRZCY3ll2OdKcob9S2yxI8pSlWRMuqcvM6X-3MW75gH7se0cGI6g5hpk8cvKENZURtcPjY-jGGtn39Ds/s1600/Pack-Backgrounds+Cherry+Bomb_58.JPG) !important;
border-radius:10px;
}
/*
HEADING DOS COMMENTS (1 comentario, 2 comentários...)**/
.comments h3,.comments h4{
width:95%;
padding:7px;
margin-bottom:10px;
color: #00008B;
text-align:center;
font-family:'Pacifico' !important;/* FONT-FAMILY - se preferir troque */
font-size:35px !important;/* TAMANHO DO TEXTO - se preferir troque */
}
/* BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone ...)*/
.comments .comment-block {
position:static !important; /* MANTÉM O AVATAR NA FRENTE DO BLOCO - NÃO MUDE */
background:#fff; /* COR DO FUNDO */
margin-left:23px;
padding:0 15px 0 23px;
border-top:19px #00008B solid;
border-radius:11px;
box-shadow:0 0 3px #8B0000, inset 0 0 11px #00008B
}
.comments .comments-content .comment {
padding:20px 10px !important;
margin-bottom:15px !important
}
/* estilos para o nome do autor do comentário */
.comments .comments-content .user a{
font-style:normal;
border:0;
color:r#9B30FF!important;
letter-spacing:1px;
font-family:'Pacifico';
font-size:20px;
background:transparent;
padding:4px 36px;
margin-left:-31px !important;
border-bottom-right-radius:10px;margin-top:-2px
}
.comments .comments-content .user{
font-style:normal;
border:0;
color:rgb(240,94,138) !important;
letter-spacing:1px;
font-family:'Pacifico';
font-size:20px;
background:transparent;
padding:4px 36px;
margin-left:11px !important;
border-bottom-right-radius:10px;margin-top:-2px#00008B dashed
}
/* estilo da data */
.comments .comments-content .datetime a{
background:none !important;
font:bold 11px courier new;
float:right;
font-size:10px;
color:#999;
border:0 !important
}
/* estilo do avatar */
.avatar-image-container {
min-width:60px; /* determina um minimo de largura */
min-height:60px; /* determina um minimo de altura */
border:4px #00008B solid; /* borda */
padding:0 !important;
margin-left:23px !important;
margin-top:17px !important;
position:absolute !important;
overflow:hidden !important;
background:#00008B;
border-radius:60px
}
.avatar-image-container img {
margin:1;
max-height:60px;
min-height:60px;
max-width:60px;
min-width:60px;
-moz-border-radius: 60px;  /* para Firefox e Flock*/
-webkit-border-radius: 60px;  /* para Chrome e Safari */
border-radius: 60px;
border:1px solid #00008B   /*--- Edite  ---*/
}
/*TEXTO DO COMENTÁRIO*/
.comments p{
font-size:12px !important;
font-family:trebuchet ms !important;
text-shadow:0 1px #ccc !important;
padding-left:55px !important;
padding-bottom:20px;
color:#888 !important
}
/*BOTAO - RESPONDER */
/* botao responder do segundo nível */
.comments .continue a {
background:#fff !important;
color:#999 !important;
float:right;
padding:8px !important;
height:10px !important;
line-height:15px !important;
margin-top:-35px !important;
}
/* botao responder do primeiro nível, mais estilos para o botao do segundo nível */
.comments .comment .comment-actions a,.comments .continue a {
font-size:11px !important;
float:right;
height:10px !important;
color:#fff;
padding:6px;
border:0 !important;
line-height:10px;
margin:5px;
margin-left:40px;
font-family:helvetica;
text-shadow: 0 0;
border-radius: .5em;
background:#00008B;
font-weight:800;
box-shadow:0 1px 2px #666
}
/* botao hover*/
.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover {
text-decoration:none !important;
padding-bottom:4px
}
/* estilos para bloco de respostas */
.comments .comment-thread.inline-thread {
background-color: transparent !important;
margin-top:40px;
padding:0.5em 1em;
border-radius:5px;
border:2px #00008B dotted
}
.comments .comments-content .comment-replies {
margin-top:1em;
margin-left:56px !important
}
.comments .continue {border-top:0 !important}
.comments .thread-toggle,.icon.blog-author {display:none !important}
/* Fim*/

Modelo 3

/* AREA GERAL DOS COMMENTS */
@font-face {font-family: 'Pacifico';src:local('Pacifico'),local('Pacifico'),url('http://0.tqn.com/d/graphicssoft/1/7/7/3/5/Plaid-Pattern08.png') format('woff')}
.comments{
width:99% !important;
margin:0 auto;
font-style:normal !important;
font-size:12px !important;
font-family:verdana !important;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizLqhahSxUCzF0WcOcTMTIwt_WFInh-V43IPFfb7D_Z8p7On5iuPSvmL3vnvzJbC1M-egNG30MCXkb-var4H7e7gfOUbjJOO6_y2AkuTdh-R3kRTDxK3LjOkqsZx3nKVugfW2y1zEpuEs/s320/Pack-Backgrounds+Cherry+Bomb_18.gif) !important;
border-radius:10px;
}
/*
HEADING DOS COMMENTS (1 comentario, 2 comentários...)**/
.comments h3,.comments h4{
width:95%;
padding:7px;
margin-bottom:10px;
color: #00CD00;
text-align:center;
font-family:'Dancing Script' !important;/* FONT-FAMILY - se preferir troque */
font-size:35px !important;/* TAMANHO DO TEXTO - se preferir troque */
}
/* BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone ...)*/
.comments .comment-block {
position:static !important; /* MANTÉM O AVATAR NA FRENTE DO BLOCO - NÃO MUDE */
background:#fff; /* COR DO FUNDO */
margin-left:23px;
padding:0 15px 0 23px;
border-top:19px #87CEEBsolid;
border-radius:11px;
box-shadow:0 0 3px #008B00, inset 0 0 11px #008B00;
}
.comments .comments-content .comment {
padding:20px 10px !important;
margin-bottom:15px !important
}
/* estilos para o nome do autor do comentário */
.comments .comments-content .user a{
font-style:normal;
border:0;
color:#FF1493!important;
letter-spacing:1px;
font-family:'Dancing Script';
font-size:20px;
background:transparent;
padding:4px 36px;
margin-left:-31px !important;
border-bottom-right-radius:10px;margin-top:-2px
}
.comments .comments-content .user{
font-style:normal;
border:0;
color:rgb(240,94,138) !important;
letter-spacing:1px;
font-family:'Pacifico';
font-size:20px;
background:transparent;
padding:4px 36px;
margin-left:11px !important;
border-bottom-right-radius:10px;margin-top:-2px#FF1493 dashed
}
/* estilo da data */
.comments .comments-content .datetime a{
background:none !important;
font:bold 11px courier new;
float:right;
font-size:10px;
color:#999;
border:0 !important
}
/* estilo do avatar */
.avatar-image-container {
min-width:60px; /* determina um minimo de largura */
min-height:60px; /* determina um minimo de altura */
border:4px #FF8C00solid; /* borda */
padding:0 !important;
margin-left:23px !important;
margin-top:17px !important;
position:absolute !important;
overflow:hidden !important;
background:#FFA500;
border-radius:60px
}
.avatar-image-container img {
margin:1;
max-height:60px;
min-height:60px;
max-width:60px;
min-width:60px;
-moz-border-radius: 60px;  /* para Firefox e Flock*/
-webkit-border-radius: 60px;  /* para Chrome e Safari */
border-radius: 60px;
border:1px solid #FF8C00   /*--- Edite  ---*/
}
/*TEXTO DO COMENTÁRIO*/
.comments p{
font-size:12px !important;
font-family:trebuchet ms !important;
text-shadow:0 1px #ccc !important;
padding-left:55px !important;
padding-bottom:20px;
color:#888 !important
}
/*BOTAO - RESPONDER */
/* botao responder do segundo nível */
.comments .continue a {
background:#fff !important;
color:#999 !important;
float:right;
padding:8px !important;
height:10px !important;
line-height:15px !important;
margin-top:-35px !important;
}
/* botao responder do primeiro nível, mais estilos para o botao do segundo nível */
.comments .comment .comment-actions a,.comments .continue a {
font-size:11px !important;
float:right;
height:10px !important;
color:#fff;
padding:6px;
border:0 !important;
line-height:10px;
margin:5px;
margin-left:40px;
font-family:helvetica;
text-shadow: 0 0;
border-radius: .5em;
background: #00CD00;
font-weight:800;
box-shadow:0 1px 2px #666
}
/* botao hover*/
.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover {
text-decoration:none !important;
padding-bottom:4px
}
/* estilos para bloco de respostas */
.comments .comment-thread.inline-thread {
background-color: transparent !important;
margin-top:40px;
padding:0.5em 1em;
border-radius:5px;
border:2px #00CD00 dotted
}
.comments .comments-content .comment-replies {
margin-top:1em;
margin-left:56px !important
}
.comments .continue {border-top:0 !important}
.comments .thread-toggle,.icon.blog-author {display:none !important}
/* Fim*/
Modelo 4
/* AREA GERAL DOS COMMENTS */
@font-face {font-family: 'Pacifico';src:local('Pacifico'),local('Pacifico'),url('http://0.tqn.com/d/graphicssoft/1/7/7/3/5/Plaid-Pattern08.png') format('woff')}
.comments{
width:99% !important;
margin:0 auto;
font-style:normal !important;
font-size:12px !important;
font-family:verdana !important;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIuYbuGGPYgpcpwIZf-7_HOaW-OcrmKpE2FwAMZQubtUIFknEja_SFuLn2gO1fN-JVEdrzjZgO7W21Vo4qFeo-nFTf3Enl59x-K4tFqVOPReykC8HAgib0RPG_nfFsesq5pet0XyLRLoA/s320/Pack-Backgrounds+Cherry+Bomb_43.gif) !important;
border-radius:10px;
}
/*
HEADING DOS COMMENTS (1 comentario, 2 comentários...)**/
.comments h3,.comments h4{
width:95%;
padding:7px;
margin-bottom:10px;
color: #E066FF;
text-align:center;
font-family:'Dancing Script' !important;/* FONT-FAMILY - se preferir troque */
font-size:35px !important;/* TAMANHO DO TEXTO - se preferir troque */
}
/* BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone ...)*/
.comments .comment-block {
position:static !important; /* MANTÉM O AVATAR NA FRENTE DO BLOCO - NÃO MUDE */
background:#fff; /* COR DO FUNDO */
margin-left:23px;
padding:0 15px 0 23px;
border-top:19px #E066FFsolid;
border-radius:11px;
box-shadow:0 0 3px #E066FF, inset 0 0 11px #E066FF;
}
.comments .comments-content .comment {
padding:20px 10px !important;
margin-bottom:15px !important
}
/* estilos para o nome do autor do comentário */
.comments .comments-content .user a{
font-style:normal;
border:0;
color:#B452CD!important;
letter-spacing:1px;
font-family:'Pacifico';
font-size:20px;
background:transparent;
padding:4px 36px;
margin-left:-31px !important;
border-bottom-right-radius:10px;margin-top:-2px
}
.comments .comments-content .user{
font-style:normal;
border:0;
color:rgb(240,94,138) !important;
letter-spacing:1px;
font-family:'Pacifico';
font-size:20px;
background:transparent;
padding:4px 36px;
margin-left:11px !important;
border-bottom-right-radius:10px;margin-top:-2px#FF1493 dashed
}
/* estilo da data */
.comments .comments-content .datetime a{
background:none !important;
font:bold 11px courier new;
float:right;
font-size:10px;
color:#999;
border:0 !important
}
/* estilo do avatar */
.avatar-image-container {
min-width:60px; /* determina um minimo de largura */
min-height:60px; /* determina um minimo de altura */
border:4px #B452CD solid; /* borda */
padding:0 !important;
margin-left:23px !important;
margin-top:17px !important;
position:absolute !important;
overflow:hidden !important;
background:#B452CD;
border-radius:60px
}
.avatar-image-container img {
margin:1;
max-height:60px;
min-height:60px;
max-width:60px;
min-width:60px;
-moz-border-radius: 60px;  /* para Firefox e Flock*/
-webkit-border-radius: 60px;  /* para Chrome e Safari */
border-radius: 60px;
border:1px solid #B452CD;   /*--- Edite  ---*/
}
/*TEXTO DO COMENTÁRIO*/
.comments p{
font-size:12px !important;
font-family:trebuchet ms !important;
text-shadow:0 1px #ccc !important;
padding-left:55px !important;
padding-bottom:20px;
color:#888 !important
}
/*BOTAO - RESPONDER */
/* botao responder do segundo nível */
.comments .continue a {
background:#fff !important;
color:#999 !important;
float:right;
padding:8px !important;
height:10px !important;
line-height:15px !important;
margin-top:-35px !important;
}
/* botao responder do primeiro nível, mais estilos para o botao do segundo nível */
.comments .comment .comment-actions a,.comments .continue a {
font-size:11px !important;
float:right;
height:10px !important;
color:#fff;
padding:6px;
border:0 !important;
line-height:10px;
margin:5px;
margin-left:40px;
font-family:helvetica;
text-shadow: 0 0;
border-radius: .5em;
background: #B452CD;
font-weight:800;
box-shadow:0 1px 2px #666
}
/* botao hover*/
.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover {
text-decoration:none !important;
padding-bottom:4px
}
/* estilos para bloco de respostas */
.comments .comment-thread.inline-thread {
background-color: transparent !important;
margin-top:40px;
padding:0.5em 1em;
border-radius:5px;
border:2px #B452CD dotted
}
.comments .comments-content .comment-replies {
margin-top:1em;
margin-left:56px !important
}
.comments .continue {border-top:0 !important}
.comments .thread-toggle,.icon.blog-author {display:none !important}
/* Fim*/
  Bom gente esses são os modelos que eu mesma personalizei, portanto se for reblogar coloque os créditos . Se gostou Comente... Em Breve postarei mais modelos de comentários. Se quiserem alguma cor especifica só falar. Bjos ;)

4 comentários:

  1. Paz do Senhor , sempre estou aqui prestigiando seu blog que por sinal é muito bom. Já sigo o mesmo também, quando puder nos visita e nos segue no http://luzevida123.blogspot.com.br/ Obrigado Marcelo Pessoa

    ResponderExcluir
  2. Adorei, vou reblogar o de arcoriis.Pode informar como coloco os seus devidos créditos.

    ResponderExcluir
    Respostas
    1. Oie Luana que bom que vc gostou ^^, em relação aos créditos basta apenas dizer que encontrou esse modelo no meu blog , Coloque o Nome ^^, qualquer coisa só falar...

      Excluir

Antes de fazer um comentário, leia:

• Os comentários são moderados para que eu possa ter um melhor controle sobre eles.
• Deixe o link do seu blog no final do comentário.
• Seja educado (a) comigo e terá o melhor de mim! Faço tudo isso, não por obrigação, mas porque gosto.
• Seja específico ao pedir ajuda e eu te ajudarei no que for possível.
• Não ensino como fazer coisa assim-assado do blog do fulano.
• Não se dê ao trabalho de comentar com a intenção de me ofender. Eu não ligo para opiniões alheias e não tenho o costume de guardar comigo as ofenças que recebo.

Obrigada por comentar! :)

© Semeadores da Palavra de Cristo - 2013. Todos os direitos reservados.
Criado por: Hellen Isterfani.
Tecnologia do Blogger.
imagem-logo
Ultimas