Personalização da área do comentário

                  
                                          Homenagem pra Tati do All Lovely and Fluffy
Oieee my cutes tudo bem(de novo)? Hoje eu vou fazer um goodie bem legal que é sobre como personalizar os comentários do blog fica um amor, olhe aqui como (mais ou menos)vai ficar:
            
(Foto : Cherry Bomb)
Aperte em leia mais para continuar o tutorial.

Agora vá ao Design  Editar HTML  e procure ( F3) por }]]></b:skin (é mais fácil procurar só ]]>)  e cole o seguinte código:

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

  Atenção: Testado somente no modelo Viagem/Travel!

Então você pode personalizar como quiser ou deixar assim mesmo fica lindo dos dois jeitos. Beijinhos <3