[BLOGGER] Khung comment đẹp cho Blogger

#comments-block {...}

.comment-body {...}

.comment-footer {...}

......

.comments-block a,.comments-block p,.comments-block a img{margin:0;padding:0;outline:none;border:none}

.comments-block{width:600px;background:#fff;padding:10px;font-family:Arial;line-height:18px}

.comments-block .arrow{float:left;margin:22px 0 0  6px;display:block;width:8px;height:16px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2xttL97C6mJ0OHbdF7D3Xqh2PFQlwO2DjXM8g2tS-xt_VZG1LIKSMoaU6Gh5szRK9a58S7z468MmmmF5lLhYc_LkMz2A5NAsiLgkR4SUAGlJsw4fhTiOgme_8h5SyP2c6dgqhoS84_1c/)  no-repeat}

#comments-box{float:right;width:510px;margin-bottom:10px;border:5px solid #e3e3e3;border-radius:8px}

.comments-avatar{float:left}

.comments-meta{padding:5px;background:#F1F1F1;border-bottom:1px solid #E3E3E3}

.comments-meta{font-size:18px}

.comments-meta a{font-size:18px;color:#0E6284;text-decoration:none}

.comments-timestamp{color:#0E6284;font-size:12px}

.comments-body{font-size:13px;padding:5px;background:#fff}

a.comments-reply{margin:10px 10px 0 0;display:block;width:68px;height:28px;float:right}

.avatar-image-container{width:60px;height:60px;padding:2px;border:1px solid #ccc}

.avatar-image-container img{background:#fff  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK3kNZswBgGRwKR6UWviFsEa7GPyCKeSZElfKy4Hr74f1dXA1hb2YMUtpmJx-HFwHW0c1xS3K-PpdPd-r5JI9YWxNflqROvNCuqUZtUZ-qozreN-DcGOblousXgBZijFKfqo2W_Whwzwk/)  no-repeat;width:60px;height:60px}

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

<b:loop values='data:post.comments' var='comment'>

...........

</b:loop>

</dl>

<div class='clear'/>

<div class='comments-block'>         

<b:loop values='data:post.comments' var='comment'>

<div class='comments-avatar'>

<b:if cond='data:comment.favicon'>

<img expr:src='data:comment.favicon'/>

</b:if>

<a expr:name='data:comment.anchorName'/>

<b:if cond='data:blog.enabledCommentProfileImages'>

<data:comment.authorAvatarImage/>

</b:if>

</div>

<div class='arrow'/>

<div id='comments-box'>

<a class='comments-reply' expr:href='&quot;https://www.blogger.com/comment.g?blogID=6885746016973304322&amp;postID=&quot;  + data:post.id +  &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot;  + data:comment.anchorName + &quot;%22%3E&quot; +  data:comment.author + &quot;%3C%2F%61%3E%20%3A#form&quot;'  onclick='javascript:window.open(this.href,&quot;bloggerPopup&quot;,&quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=650,height=450&quot;);return  false;' rel='nofollow'><img  src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV9pSoy-VuGMHkhO8UKC4M3sfL9l7MDqTiwHlcjJ7dpGKHI3qnYGeDaFg_0b27pP4_0yIDH-EtOKtHNi3hS0wUF4-beG5AuWa3aoiaPNA89kYmyw7ChTQuBk7WhlrEQ_e15rfx5a-JOow/'/></a>

<div class='comments-meta'>

<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

<b:else/><data:comment.author/>

</b:if><data:commentPostedByMsg/>

<div class='comments-timestamp'>

<data:comment.timestamp/>

<b:include data='comment' name='commentDeleteIcon'/>

</div></div>

<div class='comments-body'>            

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'><data:comment.body/></span>

<b:else/>

<p><data:comment.body/></p>

</b:if></div>

</div>

<div class='clear'/>

</b:loop>

</div>