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. Betul ngga? Agar kamu tidak bingung yang seperti apa bentuknya komentar dua kolom tersebut dapat dilihat kolom komentar blog OB (sok lue...). 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 (OB ambil kode template minima) 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&gt

Catatan :

1. Kode yang berwarna merah merupakan hasil penambahan avatar MyBlogLog.
2. 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".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

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

Silakan rubah kode yang berwarna merah sesuai dengan template blog kamu.

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

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan timbul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

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

Sekarang lihat komentar blog kamu sudah jadi dua kolom atau belum...!!!??? Selain itu, kamu juga bisa memodifikasi atau menambahkan kode lain (ex: beda tampilan komentar pemilik blog) dalam trik blogger ini.

Selamat membagi komentar blog menjadi dua kolom...