11.3.13

Tutorial: Personalizar a Área de Comentários


Os Créditos Vão TOTALMENTE ao Candy Landy que criou esse código!!!
Não repasse dizendo que foram vocês que fizeram, e não deem os crédito a mim, eu só mudei algumas coisas para vocês!!
Eu modifiquei algumas coisas, por exemplo, o fundo que era preto, coloquei branco
e a cor da letra e o tamanho...
Quer aprender a fazer?
então clica em mais informações..
Agora em Editar HTML clique em F3 e procure por ]]></b:skin>
e logo acima cole esse IMENSO código:

/**======================================================================
AREA GERAL DOS COMMENTS
========================================================================**/
@font-face {font-family:'Vibur';src:local('Vibur'), url('http://themes.googleusercontent.com/static/fonts/vibur/v4/e2dR39U2ZC6nUGtJrQCN9Q.woff') format('woff')}
.comments{
width:95% !important;       /* TAMANHO DA AREA DOS COMMENTS - se passar da coluna diminua */
margin:0 auto;
font-style:normal !important;
font-size:17px !important; /* TAMANHO DO TEXTO - se ficar pequeno, aumente os pixels */
font-family:verdana !important; /* FONT DO TEXTO - se preferir troque */
background:#FFF  !important/* COR DO FUNDO */;
color:#000;
border-radius:10px;
}
/**=======================================================================
HEADING DOS COMMENTS (1 comentário, 2 comentários...)
========================================================================**/
.comments h3,.comments h4{
width:98%;
padding:7px;
margin-bottom:10px;
color:#000;             /* COR DO TEXTO - se preferir troque */
font-family:'Vibur' !important;/* FONT-FAMILY - se preferir troque */
font-size:33px !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:transparent !important;         /* COR DO FUNDO */
margin-left:23px;
padding:0 0 0 30px;
border-top:5px #ff1490 solid
}
.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,.comments .comments-content .user{
font-style:normal;
border:0;
color:#fff !important;
text-shadow:0 1px #999;
font-family:'Vibur';
font-size:20px;
background:#ff1490;
padding:4px 36px;
margin-left:-8px;
border-bottom-right-radius:10px;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:#aaa;
border:0 !important
}
/* estilo do avatar */
.avatar-image-container {position:absolute !important;
min-width:60px;
min-height:60px;
border:5px #ff1490 solid;
border-radius:60px;
padding:0 !important;
box-shadow:0 0 3px #ff1490;
margin-left:-9px !important;
margin-top:0 !important;
background:#fff;
overflow:hidden
}
.avatar-image-container img {
margin:0;
display:block;
max-height:60px;
min-height:60px;
max-width:60px;
min-width:60px;
padding:0 !important;
border-radius:60px;
border:0 !important;
overflow:hidden /* hack para evitar serrilhado na imagem */
}
/** ==================================================================
TEXTO DO COMENTÁRIO
====================================================================**/
.comments p{
font-size:12px !important;
font-family:courier new !important;
text-shadow:0 0 !important;
padding-left:20px !important;
color:#000 !important
}
/** ==================================================================
BOTAO - RESPONDER
====================================================================**/
/* botao responder do segundo nível */
.comments .continue a {
background:#fff !important;
color:#777 !important;
float:right;
padding:2px 4px!important;
height:23px;line-height:23px !important;
margin-top:-45px !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 {
font-size:11px !important;
color:#fff;
padding:3px 6px;
border:0 !important;
line-height:30px;
margin:5px;
margin-left:10px;
font-family:helvetica;
text-shadow: 0 1px #999;
border-radius: .5em;
background: #ff1490;
font-weight:800;
box-shadow:inset 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;
padding:0.5em 1em;
border-radius:5px;
border:1px #ddd dashed !important
}
.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}
/** ==================================================================
BONUS - estilos para formatação do texto dos comments
====================================================================**/
.comments .comments-content a{background:#999

url(http://lh3.ggpht.com/_NZJzdRm10Y0/TTSFb1rPnWI/AAAAAAAAAFM/1kbIuCoul8A/s800/th_minisetas.gif)no-repeat left;color:#000;padding-left:15px;font-weight:400}
.comments .comments-content em{font:normal 12px 'segoe script';color:#fff}
.comments .comments-content b{font:bold 11px 'arial';color:#999;text-shadow:0 0}
.comments .comments-content strong {margin:10px 0;border:1px #fff solid;background:url(http://2.bp.blogspot.com/-rRFTCvBi0A4/TwXcVciZO0I/AAAAAAAAWzM/K2dXpNdjcaw/s1600/code.jpg);overflow:auto;width:98%;position:relative;border-radius:10px;box-shadow:0 0 5px rgb(199,198,166);color:#000;display:block;padding:5px 12px;text-shadow:0 1px #fff;line-heigth:18px;font-size:12px}
/** ==================================================================
Fim [by Gizaa// http://candylland.blogspot.com]
====================================================================**/

(como o código realmente é imenso, não coube tudo em um só brockquote, então não  esqueça de copiar as duas partes, que só são uma OK)

1 comentários:

Anônimo disse...

Muito obrigada pelo tutorial!
Estava mesmo procurando ele
beijos :*
minhas-confissoes-2012.blogspot.com

Postar um comentário