31 de ago de 2016

Comentários do Blogger personalizados - Modelo 2

Oi gente, tudo bem?

Hoje trago mais um tutorial de personalização pra blogs, hoje iremos ver como personalizar os comentários do Blogger e deixar eles mais bonitos e organizados. Os comentários sem personalização ficam com uma aparência meio bagunçada, por isso é importante seguir esse passo-a-passo simples para um resultado encantador.


1- Vá em Modelo> Editar HTML

2- Clique em CTRL+F e pesquisa por essa tag: ]]></b:skin>

3- Cole esse código acima da tag encontrada e salve

/************COMENTARIOS PERSONALIZADOS POR BLOG DA ROCKY**************/
.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 #FF7DBE solid; border-bottom-left-radius: 5px; 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 "Dancing Script"; background:#FF7DBE; 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 #FF7DBE solid; border-radius:60px; padding:0 !important; box-shadow:0 0 3px #FF7DBE; 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 "Josefin Sans" !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: #33CCCC; font-weight:800;  }
/* 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 DOS COMENTARIOS POR BLOG DA ROCKY********/

Prontinho! Seus comentários já estão personalizados.
As cores usadas nele foram #FF7DBE (rosa) e #33CCCC (azul tiffany), você pode trocar pelas cores de sua preferência.

Se quiser ver o modelo 1 é só clicar aqui

Para funcionar os comentários do Blogger devem estar Incorporados.

Um comentário :