Cabeçalho Arrumado + Tutorial : Personalizando a Área dos Comentários

Taylor tão diva :3

Olá pessoas, como vão vocês?
A Pam fez um novo cabeçalho pro blog, tirou o slide e acabou de arrumar...Então, temos um mais novo banner, eu gostei. Mesmo sem o slide, acho que ficou lindo, o que acharam?
Fico feliz que todos aprovaram o novo layout, obrigada pelo elogios na postagem anterior (:

Além dos elogios recebi alguns pedidos,  para que eu fizesse um tutorial de como personalizar a área dos comentários igual a minha. Como não sabia como tinha sido feita (até porque não fui eu quem a elaborei), a Pam me passou os códigos, então os créditos vão para o blog Go Imagine, pois foi pego lá .

Vamos ver?

Clique em Modelo > Editar Html > Ctrl + F (ou F3) > Procure pela tag  }]]></b:skin>

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

Já está em negrito tudo que você tem que personalizar (se quiser mudar as cores, ou algo do tipo)

Basicamente é isso, agora é só visualizar, ver se está tudo certinho e salvar . Os créditos também vão para o CandyLand. Mais se forem usar, creditem o MEU blog por disponibilizar e avisem nos comentários. 
Espero que gostem.
Beijo e tchau!