Estilos para comentarios 2013 (tutorial blogger)

Hellooo girls and boys!

Finalmente criei novos estilos para area dos comentários (hêeee)!
Não são muitos mas sei que vcs adoram customizar os codigos (está tudo explicadinho em cada seletor pra vcs editar ok?) então não haverá problemas :)

Lembrando que se usar, credite, e principalmente: Não retire os créditos!

O codigo está pronto, vc só precisa copiar e colar no seu template acima da tag
]]></b:skin>

Lets go!!

1- Estilo fofo 1

/**======================================================================
=======================AREA GERAL DOS COMMENTS===========================
========================================================================**/

@font-face {font-family:'Gabriela';font-style:normal;font-weight: 400;src:local('Gabriela'), local('Gabriela-Regular'), url(http://themes.googleusercontent.com/static/fonts/gabriela/v1/fLaucCvjCt_Hmc9smyo_rPesZW2xOQ-xsNqO47m55DA.woff) format('woff')}

.comments{
width:95% !important; /* TAMANHO DA AREA DOS COMMENTS - se passar da coluna diminua */
margin:0 auto;
font:italic 13px georgia !important; /* FONT DO TEXTO - se preferir troque */
background:#fff url(http://4.bp.blogspot.com/-ID8Yu_zzCzk/UWAWAx7mHhI/AAAAAAAAXU0/jl7WpDSihfc/s1600/12.gif) !important;
border-radius:0;
}
/**=======================================================================
HEADING DOS COMMENTS (1 comentario, 2 comentários...)
========================================================================**/
.comments h3,.comments h4{
background:#fff;
opacity:0.6;
text-shadow:0 1px #fff;
width:98%;
padding:7px;
margin-bottom:10px;
color:#b3745a !important; /* COR DO TEXTO - se preferir troque */
font-family:'gabriela' !important;/* FONT-FAMILY - se preferir troque */
font-size:22px !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:#fef6f4; /* COR DO FUNDO */
margin-left:-8px;
padding:0 15px 5px 63px;
border-top:5px #ffedc7 solid;
min-height:100px!important
}
.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{
background:none !important;
color:#ffbda2 !important;
font:normal 20px 'gabriela';
font-weight:400!important;
margin-top:-2px
}
.comments .comments-content .user{
color:#ffbda2 !important;
font:normal 20px 'gabriela';
font-weight:400!important;
padding:4px 16px;
margin-top:-2px
}

/* estilo da data */
.comments .comments-content .datetime a{
background:none !important;
font:bold 11px courier new;
float:right;
font-size:10px;
color:#bac9c5 !important;
border:0 !important
}
/* estilo do avatar */
.avatar-image-container {
min-width:65px; /* determina um minimo de largura */
min-height:65px; /* determina um minimo de altura */
padding:0 !important;
margin-left:0 !important;
margin-top:7px !important;
position:absolute !important;
overflow:hidden /* hack para evitar serrilhado na imagem */;
background:#fff;
}
.avatar-image-container img {
border:0;
margin:0;
max-height:60px;
min-height:60px;
max-width:60px;
min-width:60px;
border-radius:0
}
/** ==================================================================
=====================TEXTO DO COMENTÁRIO=============================
====================================================================**/
.comments p{
background:transparent !important;
border:0 !important;
text-shadow:0 1px #eee !important;
padding-left:30px !important;
color:#888 !important
}
/** ==================================================================
=======================BOTAO - RESPONDER==============================
====================================================================**/
/* botao responder do segundo nível */
.comments .continue a {
background: #bac9c5 !important;
color:#fff!important;
float:right;
padding:2px 4px!important;
height:23px;line-height:23px !important;
margin-top:-40px !important;
text-shadow:0 0!important;
}
/* botao responder do primeiro nível, mais estilos para o botao do segundo nível */
.comments .comment .comment-actions a,.comments .continue a {
float:right!important;
font:normal 11px verdana !important;
color:#fff!important;
padding:3px 6px;
border:0 !important;
line-height:20px!important;
margin:5px;
margin-left:15px;
text-shadow: 0 0;
background: #ffbda2;
font-weight:800;
}
/* botao hover*/
.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover,.comments .continue a:hover {
text-decoration:none !important;
opacity:0.7!important
}

/* estilos para bloco de respostas */
.comments .comment-thread.inline-thread {
background-color:transparent !important;
padding:0.5em 1em;
border-radius:5px;
border:0!important;
margin-right:-15px
}
.comments .comments-content .comment-replies {
margin-top:1em;
margin-left:46px !important
}
.comments .continue {
border-top:0 !important;
margin-top:10px !important
}
.comments .thread-toggle,.icon.blog-author {display:none !important}
#comment-editor{opacity:0.6}
.avatar-image-container img{opacity:0.8}

/** ==================================================================
Fim [by Gizaa// http://candylland.blogspot.com]
====================================================================**/

2- Estilo fofo 2

 /**======================================================================
=======================AREA GERAL DOS COMMENTS===========================
========================================================================**/

@font-face {font-family:'Gabriela';font-style:normal;font-weight: 400;src:local('Gabriela'), local('Gabriela-Regular'), url(http://themes.googleusercontent.com/static/fonts/gabriela/v1/fLaucCvjCt_Hmc9smyo_rPesZW2xOQ-xsNqO47m55DA.woff) format('woff')}

.comments{
width:95% !important; /* TAMANHO DA AREA DOS COMMENTS - se passar da coluna diminua */
margin:0 auto;
font:italic 13px georgia !important; /* FONT DO TEXTO - se preferir troque */
background:#fff url(http://4.bp.blogspot.com/-o5OOFw0ab20/UWAWBQ5aVQI/AAAAAAAAXU8/UuC80Z_5kTo/s1600/19.gif) !important;
border-radius:0;
}
/**=======================================================================
HEADING DOS COMMENTS (1 comentario, 2 comentários...)
========================================================================**/
.comments h3,.comments h4{
background:#fff;
opacity:0.6;
text-shadow:0 1px #fff;
width:98%;
padding:7px;
margin-bottom:10px;
color:#b3745a !important; /* COR DO TEXTO - se preferir troque */
font-family:'gabriela' !important;/* FONT-FAMILY - se preferir troque */
font-size:22px !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:#fef6f4; /* COR DO FUNDO */
margin-left:-8px;
padding:0 15px 5px 63px;
border-top:5px #ffedc7 solid;
min-height:100px!important
}
.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{
background:none !important;
color:#ffbda2 !important;
font:normal 20px 'gabriela';
font-weight:400!important;
margin-top:-2px
}
.comments .comments-content .user{
color:#ffbda2 !important;
font:normal 20px 'gabriela';
font-weight:400!important;
padding:4px 16px;
margin-top:-2px
}

/* estilo da data */
.comments .comments-content .datetime a{
background:none !important;
font:bold 11px courier new;
float:right;
font-size:10px;
color:#bac9c5 !important;
border:0 !important
}
/* estilo do avatar */
.avatar-image-container {
min-width:65px; /* determina um minimo de largura */
min-height:65px; /* determina um minimo de altura */
padding:0 !important;
margin-left:0 !important;
margin-top:7px !important;
position:absolute !important;
overflow:hidden /* hack para evitar serrilhado na imagem */;
background:#fff;
}
.avatar-image-container img {
border:0;
margin:0;
max-height:60px;
min-height:60px;
max-width:60px;
min-width:60px;
border-radius:0
}
/** ==================================================================
=====================TEXTO DO COMENTÁRIO=============================
====================================================================**/
.comments p{
background:transparent !important;
border:0 !important;
text-shadow:0 1px #eee !important;
padding-left:30px !important;
color:#888 !important
}
/** ==================================================================
=======================BOTAO - RESPONDER==============================
====================================================================**/
/* botao responder do segundo nível */
.comments .continue a {
background: #bac9c5 !important;
color:#fff!important;
float:right;
padding:2px 4px!important;
height:23px;line-height:23px !important;
margin-top:-40px !important;
text-shadow:0 0!important;
}
/* botao responder do primeiro nível, mais estilos para o botao do segundo nível */
.comments .comment .comment-actions a,.comments .continue a {
float:right!important;
font:normal 11px verdana !important;
color:#fff!important;
padding:3px 6px;
border:0 !important;
line-height:20px!important;
margin:5px;
margin-left:15px;
text-shadow: 0 0;
background: #ffbda2;
font-weight:800;
}
/* botao hover*/
.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover,.comments .continue a:hover {
text-decoration:none !important;
opacity:0.7!important
}

/* estilos para bloco de respostas */
.comments .comment-thread.inline-thread {
background-color:transparent !important;
padding:0.5em 1em;
border-radius:5px;
border:0!important;
margin-right:-15px
}
.comments .comments-content .comment-replies {
margin-top:1em;
margin-left:46px !important
}
.comments .continue {
border-top:0 !important;
margin-top:10px !important
}
.comments .thread-toggle,.icon.blog-author {display:none !important}
#comment-editor{opacity:0.6}
.avatar-image-container img{opacity:0.8}

/** ==================================================================
Fim [by Gizaa// http://candylland.blogspot.com]
====================================================================**/

3- Estilo fofo 3

  /**======================================================================
=======================AREA GERAL DOS COMMENTS===========================
========================================================================**/

@font-face {font-family:'Gabriela';font-style:normal;font-weight: 400;src:local('Gabriela'), local('Gabriela-Regular'), url(http://themes.googleusercontent.com/static/fonts/gabriela/v1/fLaucCvjCt_Hmc9smyo_rPesZW2xOQ-xsNqO47m55DA.woff) format('woff')}

.comments{
width:95% !important; /* TAMANHO DA AREA DOS COMMENTS - se passar da coluna diminua */
margin:0 auto;
font:italic 13px georgia !important; /* FONT DO TEXTO - se preferir troque */
background:#fff url(http://4.bp.blogspot.com/-FrCeycLcvaM/UWAWBZGAUvI/AAAAAAAAXVA/KDzmqopM25g/s320/91.gif) !important;
border-radius:0;
}
/**=======================================================================
HEADING DOS COMMENTS (1 comentario, 2 comentários...)
========================================================================**/
.comments h3,.comments h4{
background:#fff;
opacity:0.6;
width:98%;
padding:7px;
margin-bottom:10px;
color:#e8656a !important; /* COR DO TEXTO - se preferir troque */
font-family:'gabriela' !important;/* FONT-FAMILY - se preferir troque */
font-size:22px !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:#fef6f4; /* COR DO FUNDO */
margin-left:-8px;
padding:0 15px 5px 63px;
border-top:2px #ddd solid;
min-height:100px!important
}
.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{
background:none !important;
color:#e8656a !important;
font:normal 20px 'gabriela';
font-weight:400!important;
margin-top:-2px
}
.comments .comments-content .user{
color:#e8656a !important;
font:normal 20px 'gabriela';
font-weight:400!important;
padding:4px 16px;
margin-top:-2px
}

/* estilo da data */
.comments .comments-content .datetime a{
background:none !important;
font:bold 11px courier new;
float:right;
font-size:10px;
color:#e8656a !important;
border:0 !important
}
/* estilo do avatar */
.avatar-image-container {
min-width:65px; /* determina um minimo de largura */
min-height:65px; /* determina um minimo de altura */
padding:0 !important;
margin-left:0 !important;
margin-top:7px !important;
position:absolute !important;
overflow:hidden /* hack para evitar serrilhado na imagem */;
background:#fff;
}
.avatar-image-container img {
border:0;
margin:0;
max-height:60px;
min-height:60px;
max-width:60px;
min-width:60px;
border-radius:0
}
/** ==================================================================
=====================TEXTO DO COMENTÁRIO=============================
====================================================================**/
.comments p{
background:transparent !important;
border:0 !important;
text-shadow:0 1px #eee !important;
padding-left:30px !important;
color:#666 !important
}
/** ==================================================================
=======================BOTAO - RESPONDER==============================
====================================================================**/
/* botao responder do segundo nível */
.comments .continue a {
background: #e8656a !important;
color:#fff!important;
float:right;
padding:2px 4px!important;
height:23px;line-height:23px !important;
margin-top:-40px !important;
text-shadow:0 0!important;
}
/* botao responder do primeiro nível, mais estilos para o botao do segundo nível */
.comments .comment .comment-actions a,.comments .continue a {
float:right!important;
font:normal 11px verdana !important;
color:#fff!important;
padding:3px 6px;
border:0 !important;
line-height:20px!important;
margin:5px;
margin-left:15px;
text-shadow: 0 0;
background: #e8656a;
font-weight:800;
}
/* botao hover*/
.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover,.comments .continue a:hover {
text-decoration:none !important;
opacity:0.7!important
}

/* estilos para bloco de respostas */
.comments .comment-thread.inline-thread {
background-color:transparent !important;
padding:0.5em 1em;
border-radius:5px;
border:0!important;
margin-right:-15px
}
.comments .comments-content .comment-replies {
margin-top:1em;
margin-left:46px !important
}
.comments .continue {
border-top:0 !important;
margin-top:10px !important
}
.comments .thread-toggle,.icon.blog-author {display:none !important}
#comment-editor{opacity:0.6}
.avatar-image-container img{opacity:0.8}

/** ==================================================================
Fim [by Gizaa// http://candylland.blogspot.com]
====================================================================**/

4- Estilo Pink Black

 /**======================================================================
=======================AREA GERAL DOS COMMENTS===========================
========================================================================**/

@font-face {font-family:'Merienda';src:local('Merienda'), local('Merienda-Regular_0_wt'), url(http://themes.googleusercontent.com/static/fonts/merienda/v1/4NYVQDcgs3Fbi_xdFMC7lPesZW2xOQ-xsNqO47m55DA.woff) format('woff')}

.comments{
width:95% !important; /* TAMANHO DA AREA DOS COMMENTS - se passar da coluna diminua */
margin:0 auto;
font:normal 12px verdana !important; /* FONT DO TEXTO - se preferir troque */
background:#fff url(http://4.bp.blogspot.com/-5HvIPNqKnQY/UWAuFPj4mOI/AAAAAAAAXVk/N4MHTHfMyYE/s1600/Bg_pattern_by_DigitalGerm.jpg)!important;
border-radius:0;
}
/**=======================================================================
HEADING DOS COMMENTS (1 comentario, 2 comentários...)
========================================================================**/
.comments h3,.comments h4{
background:#;
opacity:0.9;
width:96%;
padding:7px;
margin-bottom:10px;
color:#ff1490 !important; /* COR DO TEXTO - se preferir troque */
font-family:'merienda' !important;/* FONT-FAMILY - se preferir troque */
font-size:20px !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:#000; /* COR DO FUNDO */
margin-left:-8px;
padding:0 15px 5px 63px;
border:1px #222 solid;
border-top:20px #333 solid;
min-height:100px!important;
border-radius:0 0 0 0
}
.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{
background:none !important;
color:#eee !important;
font:normal 20px 'merienda';
font-weight:400!important;
margin-top:-2px;
}
.comments .comments-content .user{
color:#eee !important;
font:normal 20px 'merienda';
font-weight:400!important;
padding:4px 16px;
margin-top:-2px;margin-left:10px
}

/* estilo da data */
.comments .comments-content .datetime a{
background:none !important;
font:bold 11px courier new;
float:right;
font-size:10px;
color:#666 !important;
border:0 !important
}
/* estilo do avatar */
.avatar-image-container {
min-width:59px; /* determina um minimo de largura */
min-height:60px; /* determina um minimo de altura */
padding:0 !important;
margin-left:0 !important;
margin-top:7px !important;
position:absolute !important;
overflow:hidden /* hack para evitar serrilhado na imagem */;
background:#444;
border:3px #333 solid;
}
.avatar-image-container img {
border:0;
margin:0;
max-height:60px;
min-height:60px;
max-width:60px;
min-width:60px;
border-radius:0
}
/** ==================================================================
=====================TEXTO DO COMENTÁRIO=============================
====================================================================**/
.comments p{
background:transparent !important;
border:0 !important;
text-shadow:0 1px #000 !important;
padding-left:30px !important;
color:#777 !important
}
/** ==================================================================
=======================BOTAO - RESPONDER==============================
====================================================================**/
/* botao responder do segundo nível */
.comments .continue a {
background: #ff1490 !important;
color:#fff!important;
float:right;
padding:0px 4px!important;
height:20px!important;
line-height:10px !important;
margin-top:-40px !important;
text-shadow:0 0!important;
}
/* botao responder do primeiro nível, mais estilos para o botao do segundo nível */
.comments .comment .comment-actions a,.comments .continue a {
float:right!important;
font:normal 14px "merienda" !important;
color:#fff!important;
padding:1px 6px;
border:0 !important;
line-height:20px!important;
margin:12px;
margin-left:15px;
text-shadow: 0 0;
background: #ff1490;
font-weight:800;
}
/* botao hover*/
.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover,.comments .continue a:hover {
text-decoration:none !important;
opacity:0.7!important
}

/* estilos para bloco de respostas */
.comments .comment-thread.inline-thread {
background-color:transparent !important;
padding:0.5em 1em;
border-radius:5px;
border:0!important;
margin-right:-15px;
margin-bottom:-60px
}
.comments .comments-content .comment-replies {
margin-top:1em;
margin-left:46px !important
}
.comments .continue {
border-top:0 !important;
margin-top:10px !important
}
.comments .thread-toggle,.icon.blog-author {display:none !important}
#comment-editor{opacity:0.7}
.avatar-image-container img{opacity:0.8}

/** ==================================================================
Fim [by Gizaa// http://candylland.blogspot.com]
====================================================================**/

5- Estilo Pink Gray

 /**======================================================================
=======================AREA GERAL DOS COMMENTS===========================
========================================================================**/

@font-face {font-family:'Merienda';src:local('Merienda'), local('Merienda-Regular_0_wt'), url(http://themes.googleusercontent.com/static/fonts/merienda/v1/4NYVQDcgs3Fbi_xdFMC7lPesZW2xOQ-xsNqO47m55DA.woff) format('woff')}

.comments{
width:95% !important; /* TAMANHO DA AREA DOS COMMENTS - se passar da coluna diminua */
margin:0 auto;
font:normal 12px verdana !important; /* FONT DO TEXTO - se preferir troque */
background:#fff url(http://4.bp.blogspot.com/-gZpJg_cUGdM/UWAy5yIlZrI/AAAAAAAAXVs/MjMkSs4fsZw/s1600/bg+29.jpg)!important;
border-radius:0;
}
/**=======================================================================
HEADING DOS COMMENTS (1 comentario, 2 comentários...)
========================================================================**/
.comments h3,.comments h4{
background:#;
opacity:0.9;
width:96%;
padding:7px;
margin-bottom:10px;
color:#ff1490 !important; /* COR DO TEXTO - se preferir troque */
font-family:'merienda' !important;/* FONT-FAMILY - se preferir troque */
font-size:20px !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:#eee; /* COR DO FUNDO */
margin-left:-8px;
padding:0 15px 5px 63px;
border:1px #fff solid;
border-top:20px #ccc solid;
min-height:100px!important;
border-radius:0 0 0 0
}
.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{
background:none !important;
color:#000 !important;
font:normal 20px 'merienda';
font-weight:400!important;
margin-top:-2px;
}
.comments .comments-content .user{
color:#000 !important;
font:normal 20px 'merienda';
font-weight:400!important;
padding:4px 16px;
margin-top:-2px;margin-left:10px
}

/* estilo da data */
.comments .comments-content .datetime a{
background:none !important;
font:bold 11px courier new;
float:right;
font-size:10px;
color:#666 !important;
border:0 !important
}
/* estilo do avatar */
.avatar-image-container {
min-width:59px; /* determina um minimo de largura */
min-height:60px; /* determina um minimo de altura */
padding:0 !important;
margin-left:0 !important;
margin-top:7px !important;
position:absolute !important;
overflow:hidden /* hack para evitar serrilhado na imagem */;
background:#fff;
border:7px #ccc solid;
box-shadow:0 0 3px #ccc
}
.avatar-image-container img {
border:0;
margin:0;
max-height:60px;
min-height:60px;
max-width:60px;
min-width:60px;
border-radius:0
}
/** ==================================================================
=====================TEXTO DO COMENTÁRIO=============================
====================================================================**/
.comments p{
background:transparent !important;
border:0 !important;
text-shadow:0 1px #eee !important;
padding-left:30px !important;
color:#666 !important
}
/** ==================================================================
=======================BOTAO - RESPONDER==============================
====================================================================**/
/* botao responder do segundo nível */
.comments .continue a {
background: #ff1490 !important;
color:#fff!important;
float:right;
padding:0px 4px!important;
height:20px!important;
line-height:10px !important;
margin-top:-40px !important;
text-shadow:0 0!important;
}
/* botao responder do primeiro nível, mais estilos para o botao do segundo nível */
.comments .comment .comment-actions a,.comments .continue a {
float:right!important;
font:normal 14px "merienda" !important;
color:#fff!important;
padding:1px 6px;
border:0 !important;
line-height:20px!important;
margin:12px;
margin-left:15px;
text-shadow: 0 0;
background: #ff1490;
font-weight:800;
}
/* botao hover*/
.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover,.comments .continue a:hover {
text-decoration:none !important;
opacity:0.7!important
}

/* estilos para bloco de respostas */
.comments .comment-thread.inline-thread {
background-color:transparent !important;
padding:0.5em 1em;
border-radius:5px;
border:0!important;
margin-right:-21px;
margin-bottom:-50px
}
.comments .comments-content .comment-replies {
margin-top:1em;
margin-left:46px !important
}
.comments .continue {
border-top:0 !important;
margin-top:10px !important
}
.comments .thread-toggle,.icon.blog-author {display:none !important}
#comment-editor{opacity:0.9}
.avatar-image-container img{opacity:0.8}

/** ==================================================================
Fim [by Gizaa// http://candylland.blogspot.com]
====================================================================**/

6- Estilo Simple Gray

 /**======================================================================
=======================AREA GERAL DOS COMMENTS===========================
========================================================================**/

@font-face {font-family:'Gabriela';font-style:normal;font-weight: 400;src:local('Gabriela'), local('Gabriela-Regular'), url(http://themes.googleusercontent.com/static/fonts/gabriela/v1/fLaucCvjCt_Hmc9smyo_rPesZW2xOQ-xsNqO47m55DA.woff) format('woff')}

.comments{
width:95% !important; /* TAMANHO DA AREA DOS COMMENTS - se passar da coluna diminua */
margin:0 auto;
font:italic 13px georgia !important; /* FONT DO TEXTO - se preferir troque */
background:#fff!important;
border-radius:0;
}
/**=======================================================================
HEADING DOS COMMENTS (1 comentario, 2 comentários...)
========================================================================**/
.comments h3,.comments h4{
background:#fff;
opacity:0.6;
width:98%;
padding:7px;
margin-bottom:10px;
color:#555 !important; /* COR DO TEXTO - se preferir troque */
font-family:'gabriela' !important;/* FONT-FAMILY - se preferir troque */
font-size:20px !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:#f9f9f9; /* COR DO FUNDO */
margin-left:-8px;
padding:0 15px 5px 63px;
border-top:2px #eee solid;
min-height:100px!important
}
.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{
background:none !important;
color:#777 !important;
font:normal 20px 'gabriela';
font-weight:400!important;
margin-top:-2px
}
.comments .comments-content .user{
color:#777 !important;
font:normal 20px 'gabriela';
font-weight:400!important;
padding:4px 16px;
margin-top:-2px
}

/* estilo da data */
.comments .comments-content .datetime a{
background:none !important;
font:bold 11px courier new;
float:right;
font-size:10px;
color:#ccc !important;
border:0 !important
}
/* estilo do avatar */
.avatar-image-container {
min-width:65px; /* determina um minimo de largura */
min-height:65px; /* determina um minimo de altura */
padding:0 !important;
margin-left:0 !important;
margin-top:7px !important;
position:absolute !important;
overflow:hidden /* hack para evitar serrilhado na imagem */;
background:#fff;
}
.avatar-image-container img {
border:0;
margin:0;
max-height:60px;
min-height:60px;
max-width:60px;
min-width:60px;
border-radius:0
}
/** ==================================================================
=====================TEXTO DO COMENTÁRIO=============================
====================================================================**/
.comments p{
background:transparent !important;
border:0 !important;
text-shadow:0 1px #eee !important;
padding-left:30px !important;
color:#666 !important
}
/** ==================================================================
=======================BOTAO - RESPONDER==============================
====================================================================**/
/* botao responder do segundo nível */
.comments .continue a {
background: #777 !important;
color:#fff!important;
float:right;
padding:0px 4px!important;
height:20px!important;
line-height:10px !important;
margin-top:-40px !important;
text-shadow:0 0!important;
}
/* botao responder do primeiro nível, mais estilos para o botao do segundo nível */
.comments .comment .comment-actions a,.comments .continue a {
float:right!important;
font:normal 11px verdana !important;
color:#fff!important;
padding:1px 6px;
border:0 !important;
line-height:20px!important;
margin:5px;
margin-left:15px;
text-shadow: 0 0;
background: #777;
font-weight:800;
}
/* botao hover*/
.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover,.comments .continue a:hover {
text-decoration:none !important;
opacity:0.7!important
}

/* estilos para bloco de respostas */
.comments .comment-thread.inline-thread {
background-color:transparent !important;
padding:0.5em 1em;
border-radius:5px;
border:0!important;
margin-right:-15px
}
.comments .comments-content .comment-replies {
margin-top:1em;
margin-left:46px !important
}
.comments .continue {
border-top:0 !important;
margin-top:10px !important
}
.comments .thread-toggle,.icon.blog-author {display:none !important}
#comment-editor{opacity:0.6}
.avatar-image-container img{opacity:0.8}

/** ==================================================================
Fim [by Gizaa// http://candylland.blogspot.com]
====================================================================**/

7- Estilo Yellow Car

/**======================================================================
=======================AREA GERAL DOS COMMENTS===========================
========================================================================**/

@font-face {font-family:'Fjalla One';src:local('Fjalla One'), local('FjallaOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/fjallaone/v1/rxxXUYj4oZ6Q5oDJFtEd6hsxEYwM7FgeyaSgU71cLG0.woff) format('woff')}

.comments{
width:95% !important; /* TAMANHO DA AREA DOS COMMENTS - se passar da coluna diminua */
margin:0 auto;
font:italic 13px georgia !important; /* FONT DO TEXTO - se preferir troque */
background:#fff url(http://2.bp.blogspot.com/-ANicrFKn1k0/UWAnAb7PKhI/AAAAAAAAXVU/1fGxE7irK-E/s1600/4.gif)!important;
border-radius:0;
}
/**=======================================================================
HEADING DOS COMMENTS (1 comentario, 2 comentários...)
========================================================================**/
.comments h3,.comments h4{
background:#fff200;
opacity:0.9;
width:98%;
padding:7px;
margin-bottom:10px;
color:#000 !important; /* COR DO TEXTO - se preferir troque */
font-family:'Fjalla One' !important;/* FONT-FAMILY - se preferir troque */
font-size:20px !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:-8px;
padding:0 15px 5px 63px;
border-top:2px #fff200 solid;
min-height:100px!important
}
.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{
background:none !important;
color:#000 !important;
font:normal 20px 'Fjalla One';
font-weight:400!important;
margin-top:-2px
}
.comments .comments-content .user{
color:#000 !important;
font:normal 20px 'Fjalla One';
font-weight:400!important;
padding:4px 16px;
margin-top:-2px
}

/* estilo da data */
.comments .comments-content .datetime a{
background:none !important;
font:bold 11px courier new;
float:right;
font-size:10px;
color:#ccc !important;
border:0 !important
}
/* estilo do avatar */
.avatar-image-container {
min-width:65px; /* determina um minimo de largura */
min-height:65px; /* determina um minimo de altura */
padding:0 !important;
margin-left:0 !important;
margin-top:7px !important;
position:absolute !important;
overflow:hidden /* hack para evitar serrilhado na imagem */;
background:#fff;
}
.avatar-image-container img {
border:0;
margin:0;
max-height:60px;
min-height:60px;
max-width:60px;
min-width:60px;
border-radius:0
}
/** ==================================================================
=====================TEXTO DO COMENTÁRIO=============================
====================================================================**/
.comments p{
background:transparent !important;
border:0 !important;
text-shadow:0 1px #eee !important;
padding-left:30px !important;
color:#666 !important
}
/** ==================================================================
=======================BOTAO - RESPONDER==============================
====================================================================**/
/* botao responder do segundo nível */
.comments .continue a {
background: #000 !important;
color:#fff!important;
float:right;
padding:0px 4px!important;
height:20px!important;
line-height:10px !important;
margin-top:-40px !important;
text-shadow:0 0!important;
}
/* botao responder do primeiro nível, mais estilos para o botao do segundo nível */
.comments .comment .comment-actions a,.comments .continue a {
float:right!important;
font:normal 14px "Fjalla One" !important;
color:#fff!important;
padding:1px 6px;
border:0 !important;
line-height:20px!important;
margin:5px;
margin-left:15px;
text-shadow: 0 0;
background: #fff200;
font-weight:800;
}
/* botao hover*/
.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover,.comments .continue a:hover {
text-decoration:none !important;
opacity:0.7!important
}

/* estilos para bloco de respostas */
.comments .comment-thread.inline-thread {
background-color:transparent !important;
padding:0.5em 1em;
border-radius:5px;
border:0!important;
margin-right:-15px
}
.comments .comments-content .comment-replies {
margin-top:1em;
margin-left:46px !important
}
.comments .continue {
border-top:0 !important;
margin-top:10px !important
}
.comments .thread-toggle,.icon.blog-author {display:none !important}
#comment-editor{opacity:0.9}
.avatar-image-container img{opacity:0.8}

/** ==================================================================
Fim [by Gizaa// http://candylland.blogspot.com]
====================================================================**/

Por hoje é só people, outro dia trago mais, espero que gostem :)

Tutorial original do blog Candylland by Gizaa
Proibido reblogar
Se gostou desta postagem, não esqueça de subscrever o nosso rss feed.

♥ Compartilhar no WhatsApp

tutoriais

Quer dar um up no seu blog, loja ou marca?
Entre em contato.
Personalização de blogs, lojas virtuais(Elo7,Iluria) e sites no blogger.
Identidade visual (Cartões de visita, etiquetas, folhetos, papel timbrado, e muito mais!)
Crio sua marca e papelaria personalizada com qualidade, venha conferir!

quinta-feira, junho 06, 2013

Espia só o que tenho feito:

Estilos para comentarios 2013 (tutorial blogger)

Gostou do que viu? Tem alguma dúvida ou gostaria de deixar sua opnião? Comente abaixo :)

Curta!

Marcadores

Populares

Views