Tutorial: Personalizando a aréa de postagens #2

05:15

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 ♥

7 comentários

Blog Harmonia21 de junho de 2015 às 11:57
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
Bia L.6 de julho de 2015 às 19:48
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
Karen Rosewood23 de fevereiro de 2017 às 13:48
Que chique :)
karendesign.blospot.com
ResponderExcluir
Respostas
Mari Revert2 de maio de 2017 às 10:00
Adorei!!!
ResponderExcluir
Respostas
A Guria do Batom Vermelho2 de maio de 2017 às 16:35
MUITO BOM, JÁ ESTOU USANDO <3
ResponderExcluir
Respostas
Chris30 de novembro de 2017 às 23:36
Ameiii
https://coisasdecrespasoficial.blogspot.com/
ResponderExcluir
Respostas
Danielle Cristine19 de julho de 2018 às 18:22
Amei seu blog e já estou usando seu Layout lindo... obrigada por nos ajudar!!!!

https://blogandocomdanidepaula.blogspot.com/
ResponderExcluir
Respostas

Adicionar comentário

Pages

Tutorial: Personalizando a aréa de postagens #2

7 comentários

Quem Escreve

Follow Us

Add Me ON

Pinterest

Labels

Blog Archive

Flickr Images

Pages

Tutorial: Personalizando a aréa de postagens #2

Compartilhe nas redes

Poderá gostar também de:

7 comentários

Quem Escreve

Follow Us

Add Me ON

Pinterest

Labels

Blog Archive

Flickr Images

Subscribe