Tutorial: Personalizando a aréa de postagens #2

Olá meus amores... hoje vim disponibilizar um tutorial de como personalizar a area dos comentarios Modelo2, para quem não viu Clique AQUI e veja o modelo 1.

Os créditos desse tutorial vai para Aline Web Designer

O modelo de hoje como prometido, será esse aí abaixo :

Vou deixar aqui duas observações:

Por ser um codigo longo será um pouco dificil para uma pessoa leiga no assunto codifica-lo.
Caso o codigo nao funcione acima da linha do }]]></b:skin> , faça outra tentativa: Ctrl+F e procure por /* Comments selecione todo codigo abaixo dele ate a ultima linha acima de /* Widgets e substitua pelo codigo dessa personalização abaixo:

/* AREA GERAL DOS COMENTÁRIOS*/
.comments{ width:90% !important;/* tamanho da área do comentários, pode diminuir ou aumentar*/ margin:0 auto; font: 1em normal  "verdana"!important; background:#fff !important/* cor de fundo */; color:#fff; border-radius:50px; }
/*HEADING(1 comentario, 2 comentários...)*/
.comments h3,.comments h4{ width:98%; padding:7px; margin-bottom:10px; color:#8B8B83; /* Cor do texto*/ font: 33px "verdana" !important; }
/*BLOCO*/
.comments .comment-block { position:static !important; /* Mantém o Avatar na Frente */ background:#fff; /* Cor de fundo */ margin-left:28px; padding:0 15px 5px 23px; border-top:5px #febdc4 solid; border-bottom-left-radius:30px; border-bottom-right-radius:5px; box-shadow:0 0 3px #aaa }
.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; font: 22px "verdana"; background:#febdc4; padding:4px 36px; margin-left:-8px; border-bottom-right-radius:10px;margin-top:-2px }
/* estilo da data */
.comments .comments-content .datetime a{ background: transparent !important; font: 9px bold  courier new; float:right; color:#aaa; border:0 !important }
/* estilo do avatar */
.avatar-image-container {position:absolute !important; min-width:60px; min-height:60px; border:5px #febdc4 solid; border-radius:60px; padding:0 !important; box-shadow:0 0 3px #febdc4; 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:1em "courier new" !important; text-shadow:0 0 !important; padding-left:20px !important; color:#9C9C9C !important }
/* 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:1em "helvetica" !important; color:#fff; padding:3px 6px; border:0 !important; line-height:30px; margin:5px; margin-left:10px; text-shadow: 0 1px #999; border-radius: .5em; background: #ff82ab; 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}
/*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*/

Bom, espero que tenham gostado! Não esqueçam de deixar seus comentários ok?! Um abraço e até o próximo post ♥

10 Comments

Renata Massa

10 comentários

Unknown21 junho
Boa tarde!! Antes de mas nada quero dizer que o post me ajudou muito. Bom eu comecei com o blog não tem uma semana e meu primeiro post foi um top 10 de melhores layout's free,um dos seus layouts entraram e eu achei que seria bom te avisar.. Parabéns pelo blog! (minha-harmonia)
ResponderExcluir
Respostas
Marcela Kemmely26 junho
Super fofo esse modelo <3
http://gamagoodies.blogspot.com.br/
ResponderExcluir
Respostas
Unknown06 julho
Achei super fofo flor.. e aqui eu peguei um template seu e editei um pouco mas deixei seus creditos la certinho do jeitinho que veio ta bom?
parabens pelo seu trabalho !
Blog Estilo Certo
Fanpage Estilo Certo
ResponderExcluir
Respostas
Karen23 fevereiro
Que chique :)
karendesign.blospot.com
ResponderExcluir
Respostas
Doce Cereja02 maio
Adorei!!!
ResponderExcluir
Respostas
A Guria do Batom Vermelho02 maio
MUITO BOM, JÁ ESTOU USANDO <3
ResponderExcluir
Respostas
Chris 30 novembro
Ameiii
https://coisasdecrespasoficial.blogspot.com/
ResponderExcluir
Respostas
Unknown19 julho
Amei seu blog e já estou usando seu Layout lindo... obrigada por nos ajudar!!!!

https://blogandocomdanidepaula.blogspot.com/
ResponderExcluir
Respostas
𝘗𝘖𝘙 𝘋𝘌𝘉𝘖𝘙𝘈 𝘚𝘈𝘗𝘗𝘏𝘐𝘙𝘌11 setembro
Amei esse modelo! Inclusive, já irei usar no meu blog.
ResponderExcluir
Respostas