Membagi Dua Kolom Komentar

Kenapa harus dibagi dua? Wah, ini pertanyaan yang sulit untuk dijawab, karena berpulang kepada diri pribadi masing-masing. Intinya seperti ini, kalau kamu berkeinginan untuk menambah daya tarik blog, tentu perlu juga meracik beberapa elemen agar tampil beda. Tampil beda bukan berarti tidak ada tujuan ke depan.

Kolom pertama berisikan avatar MyBlogLog yang seterusnya kita sebut "comment_avatar" dan kolom kedua disebut "comment_entry" yang terdiri dari author komentator (comment-author), teks komentar (comment-body), dan tanggal komentar (comment-footer). Trik blogger ini tidak merubah struktur dasar kode yang ada, melainkan perlu menambah kode tertentu yang berfungsi untuk memisahkan antara avatar dengan entri komentar.

Nah, sekarang mari bersama-sama kita permak kode template komentar agar terbagi menjadi dua kolom. Yang penting untuk ditelaah adalah untuk kode template komentar (khusus HTML) telah ditambahkan avatar MyBlogLog dan icon komentator default blogger telah dihilangkan.

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'>

<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>

Catatan :

1. Kode yang berwarna merah merupakan hasil penambahan avatar MyBlogLog.


2. Kode yang berwarna hijau merupakan modifikasi untuk menghilangkan icon komentator default blogger.

Baca juga yang ini....