Kode CSS komentar :
/* Comments
===================== */
#comments h4 {
background:#EAE9E9;
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor; }
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
border:0px dotted #ccc; }
#comments-block .comment-author {
color:#808080;
margin:.5em 0;
border-top:1px dotted #ccc; }
#comments-block .comment-body {
text-align:justify;
margin:.25em 0 0; }
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
border-top:1px dotted #ccc;
font-size:9px;
letter-spacing:.1em; }
#comments-block .comment-body p { margin:0 0 .75em; }
.deleted-comment {
font-style:italic;
color:gray; }
Kode HTML komentar :
<dl id='comments-block'>Catatan :
<b:loop values='data:post.comments' var='comment'>
<div style='border:0;float:left;margin: 0 5px 0 0;'>
<script>
myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');
</script>
</div>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.id'>
<a expr:name='data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
<div style='clear:both;'/>
</b:loop>
</dl>
- Kode yang berwarna merah merupakan hasil penambahan avatar MyBlogLog.
- Kode yang berwarna hijau merupakan modifikasi untuk menghilangkan icon komentator default blogger.
- Login dulu ke account blogger kamu.
- Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget".
- Tambahkan kode CSS dalam komentar (Comments).
.comment_avatar {
float: left;
height: 50px;
width: 50px;
position: relative;
padding-top: 5px;
text-align: left;
}
.comment_entry {
float: right;
width: 400px;
}
Catatan :
- Cari kode avatar, seperti di bawah ini.
<div style='border:0;float:left;margin: 0 5px 0 0;'>
<script>
myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');
</script>
</div>
- Tambahkan kode (warna merah) berikut di antara kode di atas.
<div class='comment_avatar'>
<div style='border:0;float:left;margin: 0 5px 0 0;'>
<script>
myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');
</script>
</div>
</div>
- Di bawah kode di atas terdapat kode
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.id'>
<a expr:name='data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
- Tambahkan kembali kode (warna merah) diantaranya, sehingga akan terlihat seperti di bawah ini.
<div class='comment_entry'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.id'>
<a expr:name='data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</div>
- Jangan lupa disimpan.