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

41 komentar untuk “Membagi Dua Kolom Komentar”

  1. wah,udh lama ga mampir ke blog mas OB..
    sip,ntr dicoba dh,,

    BalasHapus
  2. Waw.. keren2.. makin mantap2 aj postingannya dah mulai nampak beda dengan blog lain... Hehe

    BalasHapus
  3. aku mo nanya nih mas,
    sori klo ga nyambung
    he :D

    -gimana yang bikin menu home,tips seo dan bla3, supaya ada warna background yg bgus ky gitu???

    - membuat menu search nya di samping menu kanan kaya gitu???

    tq

    BalasHapus
  4. Keren banget kolom komentarnya....tapi cocok ga ya di blog gua?

    BalasHapus
  5. waw mantapszzzzzzz mas TPO eh salah TOP maksudnya :)) dech!

    BalasHapus
  6. Tutorial yang sangat bermanfaat. Terimakasih Mas, ijin saya copy dan saya save sebagai ilmu baru :)

    Mas, saya mau tanya (mungkin gak ada hubungan dengan posting ini secara langsung), kenapa ya, form komentar ini di komputer saya tidak berfungsi kalo saya buka pakai Mozilla FireFox dan Opera? Namun kalo memakai IE bisa.

    Mohon Pencerahannya,
    Thanks :)

    BalasHapus
  7. Mantaf... boleh juga ni di coba, maklum lagi bikin blog baru, lagi semangat2nya, tapi mudah2an semangat terus ya,,
    salam kenal bro!

    BalasHapus
  8. ok mas OB,. ku coba dl trmksh mas ...

    BalasHapus
  9. Wih, codingnya keren dan berguna nih untuk kolom komentar, thanks bro.

    BalasHapus
  10. inimah terlalu keren mass...mas OB mang paling mantaaap dah :D !!

    BalasHapus
  11. to all: thanks banget :D

    to weeeeeee: tunggu posting selanjutnya :p

    to Stop Dreaming Start Action: OB kurang tahu juga, mas. Sebab dalam browser OB (baik IE, Firefox, dan Opera) tidak menemukan kejanggalan seperti itu ~x(

    BalasHapus
  12. Wah hebat juga. Kalau dipaksakan bisa mirip komen Facebook.

    BalasHapus
  13. hohoho...
    makasih infonya mas...
    =)) =)) =)) :)]

    BalasHapus
  14. okey ya triknya, tapi ngak semua templete bisa di terapkan, seperti yang satu ini, tapi ada juga yang beberapa di modifikasi dikit langsung jadi ;))

    BalasHapus
  15. perfecto bos, persis kayak punya sampai-an, sampai warnanya ngak aku rubah, good trik...,

    BalasHapus
  16. mantap mas infonya...izin sedot scriptnya....mau di coba.
    Thanks.

    BalasHapus
  17. wah saya banyak bljar ne dr blog ne.............thanx ya bang..........

    BalasHapus
  18. ini yang saya cari cari

    BalasHapus
  19. mas kode yang ini di pasang di mana?

    .comment_avatar {
    float: left;
    height: 50px;
    width: 50px;
    position: relative;
    padding-top: 5px;
    text-align: left;
    }

    .comment_entry {
    float: right;
    width: 400px;
    }

    BalasHapus
  20. @maulana ni'ma alhizbi letakkan saja di bawah kode CSS komentar, supaya terorganisir.

    BalasHapus
  21. @OB

    ko kodenya ga da sih mas di blog ku....

    BalasHapus
  22. @Anonim Kode yang mana, mas/mba?

    BalasHapus
  23. aduh mas masih ga ngerti nih... di blogku ga ada kode css komentar... apa harus di tambahkan dulu ya kode css nya? jdi mau pasang kode

    .comment_avatar {
    float: left;
    height: 50px;
    width: 50px;
    position: relative;
    padding-top: 5px;
    text-align: left;
    }

    .comment_entry {
    float: right;
    width: 400px;
    }

    ga bisa... ~x( ... help me....

    BalasHapus
  24. aduh mas masih ga ngerti nih... di blogku ga ada kode css komentar... apa harus di tambahkan dulu ya kode css nya? jdi mau pasang kode

    .comment_avatar {
    float: left;
    height: 50px;
    width: 50px;
    position: relative;
    padding-top: 5px;
    text-align: left;
    }

    .comment_entry {
    float: right;
    width: 400px;
    }

    ga bisa... ~x( ... help me....

    BalasHapus
  25. @maul Supaya ngga bingung lg letakkan aja kodenya di atas kode ]]></b:skin>, mudah-mudahan ngga salah

    BalasHapus
  26. @OB

    tetep ga bisa mas... malah brantakan..... :D... ya udah deh... nanti aja di pakenya.. mksih buat pengarahannya mas... :X

    BalasHapus
  27. @maul saya lihat di blog maul, avatar default blogspot belum dihapus, coba dihapus dulu....

    BalasHapus
  28. udah mas.... trus gmna lgi?

    BalasHapus
  29. lo..lo...lo...panjang bgt scripnya. Waduh gak mudeng deh ni...

    BalasHapus
  30. ><:::"KL>":?>>?L:":"*66$$&*(*0 alias pusiiiiiiiiing....

    BalasHapus