Dar estilo ao Threaded Comments do blogger #2

A caixa de comentários do blogger nunca foi das profissonais assim e está muito longe disso, neste ano o Blogger lançou sistema de resposta que caiu como luva na mãos de muitos blogueiros usuários desta plataforma, no início deste blog mostrei como dar um estilo nos comentários, hoje mais uma vez mostrarei como personaliza-los de forma fácil e agradavél dando uma cara nova em seu blog.

OBS: Recomendamos que faça um backup antes de mexer no código do seu template, caso ocorra algum erro terá como recuperá-lo evitando qualquer transtorno no final.

Demosntração

Vamos ao Tutorial:

1º- Clique em Editar HTML e expandir modelos de widgets.
2º - localize o código abaixo ou algo parecido no meu caso é assim:

 /* Comments----------------------------------------------- */
#comments{padding:10px;background-color:#fff;border:1px solid #ddd;}
#comments h4{font-size:16px;font-weight:bold;margin:1em 0;color:$sidebarcolor}
#comments-block3{padding:0;margin:0;float:left;overflow:hidden;position:relative;}
#comment-name-url{width:465px;float:left}
#comment-date{width:465px;float:left;margin-top:5px;font-size:10px;}
#comment-header{float:left;padding:5px 0 40px 10px;margin:5px 0px 15px 0px;position:relative;background-color:#fff;border:1px solid #ddd;}
.avatar-image-container{margin:5px 10px 5px 5px}
.avatar-image-container img{width:32px;height:32px;}
a.comments-autor-name{color:#000;font:normal bold 14px Arial,Tahoma,Verdana}
a.says{color:#000;font:normal 14px Arial,Tahoma,Verdana}
.says a:hover{text-decoration:none}
.deleted-comment{font-style:italic;color:gray}
#blog-pager-newer-link{float:$startSide}
#blog-pager-older-link{float:$endSide}
#blog-pager{text-align:center}
.feed-links{clear:both;line-height:2.5em}

 

OBS: cada template tem um código diferente esse acima é apenas um exemplo.

3º - E substitua todo codigo até o final por:

/* Comments
----------------------------------------------- */

#comments-block.avatar-comment-indent {margin: 2em 0 1.5em !important;position: relative;}
dl#comments-block {line-height: 1.5em;margin: 2em 0 1.5em !important;}
#comments-block .comment-author {color: #fff;font-size: 15px;font-weight: bold;margin-left: 60px;}
#comments-block .comment-author a, dl#comments-block dt.author-comment a {color: #fff;text-decoration: none;}
#comments-block .avatar-image-container {background:  #fff;border: 1px solid #fff;height: 70px !important;left: 0;margin-top: -10px;position: absolute;width: 70px !important;}
#comments-block .avatar-image-container img {border: medium none !important;float: right;height: 70px !important;width: 70px !important;}
#comments-block .avatar-image-container.avatar-stock img {border-width: 0;padding: 0;}
.commentauthorname {background: none repeat scroll 0 0 #464646;border: 1px solid #fff;color: #fff;padding: 0 20px;position: relative;z-index: 99;}
#comments-block .comment-body {background: none repeat scroll 0 0 #464646;border-bottom: 2px solid #E6E6E6;font-size: 14px;margin: 0 0 30px;padding: 5px 5px 20px 90px;}
#comments-block .comment-body p {margin: 0 0 0.75em;}
#comments-block .comment-footer {background: none repeat scroll 0 0 transparent;border: medium none;font-size: 12px;font-style: italic;font-weight: normal;margin: 0 5px;text-decoration: none;}
#comments-block .comment-footer a {color: #444444;text-decoration: none;}
#comments-block .naacomment {background: none repeat scroll 0 0 #444444;color: #fff;font-size: 15px;font-weight: bold;margin-left: 60px;}
#comments-block .naacomment a {color: #fff;text-decoration: none;}
#comments-block .naacomment {background: none repeat scroll 0 0 #E0ECF8;color: #fff;font-size: 15px;font-weight: bold;margin-left: 60px;}
#comments-block .naacommentbody p {margin: 0 0 0.75em;}
#comments-block .naacommentfooter {background: none repeat scroll 0 0 transparent;border: medium none;font-size: 12px;font-style: italic;font-weight: normal;margin: 0 5px;text-decoration: none;}
#comments-block .naacommentfooter a {color: #444444;text-decoration: none;} /* start */
.comment .comment-header{background: none repeat scroll 0 0 #444444;color: #333;font-size: 15px;font-weight: bold;margin-left: 60px;}
.comment .avatar-image-container {-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px; border: 1px solid #B6B6B6;max-height: 70px !important;margin-top: -5px;width: 70px !important;position:relative;z-index:50;-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;}
.comment .comment-header a {color: #fff !important;text-decoration: none;}
.comment .comment-block {margin-left: 75px;}
.comment .avatar-image-container img {border: medium none !important;height: 70px !important;width: 70px !important;max-height: 70px !important;max-width: 70px !important;}
.comment-header cite {background: none repeat scroll 0 0 #444444;border: 1px solid #fff;color: #fff;padding: 0 20px;position: relative;z-index: 99;margin-left:-20px;}
.comment .comment-content {background: none repeat scroll 0 0 #fffff9;border-bottom: 2px solid #fff;font-size: 14px;margin: 0 0 30px;padding: 5px 5px 10px 10px;}
.comment .comment-actions a{
background: none repeat scroll 0 #444444;
color: #fff;
display: inline-block;
line-height: 1;
margin: 0 3px;
padding: 5px 8px !important;text-decoration: none;border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;}
.comments .continue a {display: inline-block;margin: 0;padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #fff !important;
text-align: center;
background: #444444;
padding:2px 8px; margin-right:10px;
-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;
}


.comment .comment-actions a:hover{background:#fff;text-decoration: none !important;}
cite.blog-author {background: none repeat scroll 0 0 #F4B51E !important;;}
.icon.blog-author {display:none;margin-left: 90px;width:60px !important;height:60px !important;position:absolute;right:5px;bottom:5px;top:10px;}

O que achou? deixe seu comentário sua opnião é muito importante