Personalizando os Comentários

Oiie Gente! Bom, agora que eu já postei dois tutoriais eu irei postar mais um que é como personalizar os comentários do blog. Irei mostrar dois modelos muito fofos para vc escolher e colocar em seu blog.

PASSOS:

1- Vá em modelo>>Editar HTML>>CTRL F>> Procure por:

]]></b:skin>

2- Em seguida, escolha qual modelo vc quer e cole acima do código procurado.

MODELOS:

1)

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

.comments{

width: 95% !important; /* largura da caixa de postagem, se sair pra fora do post diminua*/

margin:0 auto;

font-style: normal !important;

font-size: 12px !important;

font-family: verdana !important;

background: url(http://migre.me/aC1IZ) !important; /* fundo dos comentários - se desejar coloque outro background (trocando a url) */

border-radius: 10px; /* bordas arredondadas no fundo- se não quiser apague essa linha */

box-shadow:0 0 5px #aaa; /* sombra na caixa do fundo - se não quiser apague essa linha */

}

/**== HEADING DOS COMMENTS (1 comentario, 2 comentários...) ==**/

.comments h3,.comments h4{

width: 98%;

padding: 7px;

margin: 10px 0 !important;

color: #87CEEB !important; /* cor da fonte */

text-align: center; /* alinhamento */

text-shadow:0 0 2px #ccc; /* sombra – se não quiser apague essa linha */

font-family:'Dancing Script' !important; /* fonte - se preferir troque */

font-size: 37px !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 da caixinha dos comentários */

margin-left: 23px;

padding: 0 15px 0 23px;

border-top: 15px #FF80BC solid; /* borda encima da caixinha de comentário */

border-radius: 5px; /* bordas arredondadas */

box-shadow:0 0 3px #ccc, inset 0 0 11px #eee /* sombra na caixinha – apague se não quiser */

}

.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: #CD96CD !important; /* cor da fonte do nome de quem comenta */

letter-spacing: 1px;

font-family:'Dancing Script'; /* fonte do nome de quem comenta */

font-size: 26px; /* tamanho da fonte */

text-shadow:1 1px #aaa; /* sombra na fonte do nome */

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: #FF80BC !important;

letter-spacing:1px;

font-family:'Dancing Script';

font-size: 26px;

text-shadow: 0 1px #aaa;

background: transparent;

padding: 4px 36px;

margin-left: 11px !important;

border-bottom-right-radius:10px;margin-top:-2px

}

/*Nome do autor do comentário hover*/

.comments .comments-content .user a:hover {

text-decoration:none !important;

color: #A1DBE4 !important; /* cor do nome do autor do comentário quando passa o mouse */

}

/* estilo da data */

.comments .comments-content .datetime a{

background: none !important;

font-family: times new roman; /* fonte - mude se desejar */

float: right; /* posicionamento */

font-size: 12px; /* tamanho da fonte da data */

color: #fff !important; /* cor da data */

border:0 !important;

margin-top: -15px; /*aumente/diminua o nº para mover a data – negativo sobe e positivo desce*/

}

/* estilo do avatar */

.avatar-image-container {

min-width: 60px; /* determina um mínimo de largura */

min-height: 60px; /* determina um mínimo de altura */

padding:0 !important;

margin-left: 30px!important; /*aumente/diminua o nº para mover o avatar p/ os lados */

margin-top: 20px !important; /*aumente/diminua o nº para mover p/ cima/baixo */

position: absolute !important;

overflow: hidden !important;

background: #fff;

}

.avatar-image-container img {

border: 3px #EAEAEA solid; /* borda do avatar */

margin:0;

max-height: 48px;

min-height: 48px;

max-width: 48px;

min-width: 48px;

}

/**=========== TEXTO DO COMENTÁRIO ===========**/

.comments p{

font-size: 14px !important; /* tamanho da fonte do comentário */

font-family: Times new roman !important; */ fonte do comentário */

text-shadow: 0 1px #eee !important; /* sombra na fonte */

padding-left: 55px !important;

padding-bottom: 20px;

color: #888 !important /* cor do texto */

}

/**=========== BOTAO – RESPONDER ===========**/

/* botão responder do segundo nível */

.comments .continue a {

background: #87CEEB !important; /* cor do fundo */

color: #fff !important; /* cor da fonte */

float: right; /* posicionamento */

padding: 8px !important;

height: 10px !important;

line-height: 15px !important;

margin-top: -35px !important;

}

/* botão responder do primeiro nível, mais estilos para o botão do segundo nível */

.comments .comment .comment-actions a,.comments .continue a {

font-size: 11px !important;

float: right;

height: 10px !important; /* altura do botão */

color: #fff !important; /* cor da fonte */

padding: 6px;

border: 0 !important;

line-height: 10px;

margin: 5px;

margin-left: 40px;

font-family: helvetica; /* fonte - mude se desejar*/

text-shadow: 0 0;

border-radius: .5em; /* bordas arredondadas */

background: #CD96CD; /* cor do fundo */

font-weight: 800;

box-shadow: 0 1px 2px #666 /* sombra no botão - apague a linha se não quiser */

}

/* botão hover*/

.comments .comment .comment-actions a:hover {

text-decoration:none !important;

background: #FF80BC; /* cor do fundo do botão hover */

}

/* estilos para bloco de respostas */

.comments .comment-thread.inline-thread {

background-color: transparent !important;

margin-top: 40px;

padding: 0.5em 1em;

border-radius: 5px; /* bordas arredondadas – apague a linha se não quiser */

}

.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 [candylland.org] [goimagines.blogspot.com] =======**/

_________________________________________________________________________________

2)

#comments h4, #comments .comment-author a, #comments .comment-timestamp a {

color: #c19bdf;

font-family: Verdana;

font-size: 18px; }

#comments {

background: #fff;

padding: 15px;

}

.comments .comment-block { margin-left: 70px; }

.comment-header {

background: #c19bdf;

border: 1px solid #9e80b6;

padding: 3px;}

.comment-header a {

color: #fff !important;

font-family: Verdana;

font-size: 16px;

font-weight: normal; }

.comment-header a:hover { color: #684980 !important;

text-decoration: none;}

.comments .comments-content .datetime a{

font-size: 10px !important;

float: right;

line-height: 16px; }

.comments .comments-content .comment-content{

margin-top: -10px;

position: relative;

background: #e7dceb;

border: 1px solid #cdc3d0;

padding: 10px;

color: #4c4c4c;

font-size: 11px; }

.comments .avatar-image-container {

max-width: 50px;

max-height: 50px;

min-height: 50px;

min-width: 50px;

background: #d2b6e5;

padding: 3px;}

.comments .avatar-image-container img{

max-width: 50px;

max-height: 50px;

min-height: 50px;

min-width: 50px;}

.comments .comments-content .comment {

padding:20px 10px !important;

margin-bottom:15px !important}

.comments .comment .comment-actions a {

padding: 5px;

background: #d2b6e5;

border: 1px solid #b59dc6;

color: #fff !important;

font-family: verdana;

font-weight: bold;

margin-right: 10px;}

.comments .comment .comment-actions a:hover {

background: #e3c6f6;

border: 1px solid #b59dc6;

color: #684980 !important;

text-decoration: none;}

.comments .continue { border-top: none;}

.comments .continue a {display: none;}

_________________________________________________________________________________