Como personalizar a área de comentários

COMO PERSONALIZAR A ÁREA DE COMENTÁRIOS

A área de comentários do blogger é padrão, mas existe um jeito muito simples de deixar personalizado, do mesmo jeitinho da decoração do seu blog.

Vamos começar?

Primeiramente você deve ativar as suas postagens para que as pessoas possam comentar. Então, você deve ir em Configurações > Postagens e comentários > Comentários. Nesse trecho, você deve assinalar como 'Qualquer pessoa' e selecionar em 'Incorporado'.

Veja um exemplo abaixo.



Agora vamos até o editor HTML do seu templare.  Vá em modelo > Editar HTML > Clique dentro da caixa do editor e Dê Ctrl+F e localize /* Comments e abaixo dele, cole o código a seguir.

#comments{overflow:hidden} #comments h4{display:inline;padding:10px;line-height:40px} #comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative} #comments h4,.comments .continue a{background:#1e05d8} #comments h4,.comments .user a,.comments .continue a{font-size:16px} #comments h4,.comments .continue a{font-weight:normal;color:#fff} #comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #1e05d8;border-right:20px solid transparent;width:0;height:0;line-height:0} #comments .avatar-image-container img{border:0} .comment-thread{color:#111} .comment-thread a{color:#777} .comment-thread ol{margin:0 0 20px} .comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#1e05d8} .comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px} .comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px} .comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px} .comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em} .comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLrLTPBu3lf4JoddpYgvGEKrenwQh7V5XKUbwZX3SnS6BFLDy70Z0Wq-IzFTJMzPk2yyn6KEkb97hzk4oSIjm2IwyITCMPhMuNZ672euXccpIFrUyvY2H81d5WPceyMM1kGNfiiEtkIgQ/s320/picresized_1338990142_comment-author-blue.gif);width:36px;height:36px} .comments .comments-content .inline-thread{padding:0 0 0 20px} .comments .comments-content .comment-replies{margin-top:0} .comments .comment-content{padding:5px 0;line-height:1.4em} .comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent} .comments .comment-thread.inline-thread .comment{width:auto} .comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px} .comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0} .comments .comment-thread.inline-thread .comment-block{margin-left:48px} .comments .comment-thread.inline-thread .user a{font-size:13px} .comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px} .comments .continue{border-top:0;width:100%} .comments .continue a{padding:10px 0;text-align:center} .comment .continue{display:none} #comment-editor{width:103%!important} .comment-form{width:100%;max-width:100%}

http://www.spiceupyourblog.com/