Tutorial - Personalize a área de comentários

Oii meus amores,como vão? Bem hoje eu vou ensinar a modificar a área dos comentários , mas como todo tutorial sempre tem devidos créditos para certas pessoas : Adália Sá do Cherry Bomb .
Aviso :                                                                                                                                                        
  --  O  tuto só funciona em blogs que tenham configurado o comentário para abrir em janela pop-up ou em outra guia!
-eu uso a nova interface do blog então...
Leia mais


Antes de modificar a área de comentários é sempre importante baixar uma cópia do modelo,pois não dá para visualizar sem antes salvar, agora vamos ao tutorial : No blog da Liah ela mostrou como ficou o que ela
fez e ficou assim :

        

Abra o painel do blog clique em : Modelo→Editar HTML→Prosseguir ,Aperte Ctrl+F e procure por : #comments você deve apagar todo esse código : 

#comments {  background: $(comments.background);  padding: 15px;}#comments .comment-author {  padding-top: 1.5em;}#comments h4,#comments .comment-author a,#comments .comment-timestamp a {  color: $(post.title.text.color);}#comments .comment-author:first-child {  padding-top: 0;  border-top: none;}.avatar-image-container {  margin: .2em 0 0;}

e colar esse no lugar : 

#comments h4 { /* Este é titulo do formulario, onde mostra "X Comentários" e "Postar um comentário" */margin:0;color:#ff4d8e;font-family: Lucida Handwriting;font-weight: normal;font-size:36px;text-shadow: none;}#comments-block .comment-author { /* O espaço do nome de quem comentou */background: #FFF; /*Cor de fundo do nome de quem comentou*/color: #8fddf6; /*Cor da fonte*/font-family: Trebuchet MS; /*Nome da fonte*/font-size:16px; /*Tamanho da fonte*/border-bottom: double 3px #8fddf6; /*Borda de baixo do nome*/padding: 5px;margin:.5em 0;height:30px; /*Altura do espaço do nome*/font-weight: normal; /*Peso da fonte. Mude de normal para strong se quiser o texto em negrito*/}#comments-block .comment-author a:link {text-decoration: none;}#comments-block .comment-body { /* Area do texto do comentario */background: #000; /*Fundo da área do comentário*/margin-top: -2px; /*Margem externa do topo*/padding: 5px;font-family:Trebuchet MS; /*Nome da Fonte*/font-size: 12px;/*Tamanho da fonte*/color:#fff; /*Cor da fonte*/width: 500px; /*Largura da área dos comentários, altere de acordo com seu blog*//*Bordas arredondadas da área do comentário*/-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;/*Fim do código da borda arredondada*/}#comments-block .comment-footer {margin:7px 0 2em;line-height: 1.4em;font-size: 95%; /* tamanho da fonte da data do comentário */text-align: right; /* alinhamento da data do comentário */letter-spacing:.1em;}#comments-block .comment-footer a:link{background: #b9ff46; /*Fundo da data do comentário*/}.deleted-comment a {margin: 10px 0 2em;font-style: italic;color: #ccc; /*** cor do recado de 'comentário deletado' ***/}

mude o que precisar e depois procure por(aperte Ctrl+F) /*Content e antes  da tag body } cole o seguinte código : 

div.avatar-image-container {-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;box-shadow: 1px 1px 3px #a7a7a7; /*Sombra do avatar*/margin-top: -2px; /*Margem externa do topo, para alinhar o avatar*/}div.avatar-image-container img {display:none;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s;}/*Efeito de quando passar o mouse em cima da foto*/div.avatar-image-container img:hover {-moz-border-radius: 0px;-webkit-border-radius: 0px;border-radius: 0px;opacity: 0.8; /*Opacidade*/-moz-opacity: 0.8; /*Opacidade*/-webkit-opacity: 0.8; /*Opacidade*/}div.avatar-image-container img.delayLoad {display:block;}

 
 

A Liah passou o código acima para arrumar a foto da pessoa que comentou exemplo quando você põe o mouse em cima da foto da pessoa (que as bordas estão arredondadas) a imagem fica quadrada assim ó : 














Viram? todos os créditos vão para a Liah que é um amor de pessoa que eu admiro muito !


    Beijos e abraços :)