Bedakan Komentar Penulis Dan Pengunjung (jQuery)

Bismillah. Telah banyak yang membahas tentang cara membedakan komentar penulis dengan komentar pengunjung, bahkan jika kita mencari di mesin pencari dengan kata kunci tersebut maka kita akan menemukan ribuan blogger membahas hal tersebut, dari master sampai newbie. Tips trik blogger hack kali ini tidak akan menggunakan teknik yang sama (yang pernah dibahas kebanyakan blogger dengan menggunakan XHTML) tetapi kali ini akan melibatkan jQuery sebagai styler-nya (baca; pemberi sentuhan). Dengan beberapa keunggulan tentunya, diantaranya; lebih sederhana kode yang digunakan; lebih mudah di modifikasi; dan silahkan temukan sendiri kelebihan lainnya.

Persyaratan Untuk Memodifikasi Komentar

Dibawah ini beberapa hal yang harus diterapkan sebelum memodifikasi komentar, diantaranya:

• Blogger anda harus memiliki widget profile/tentang/about bawaan blogger (wajib hukumnya)
• Template anda harus sudah terpasang perpustakaan jQuery^[1] (wajib hukumnya)

Kode jQuery Komentar

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:

</head>

Langkah 5
Masukan perpustakaan jQuery dibawah ini diatas kode pada langkah 4:

<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'/>

Langkah 6
Cari kode dibawah ini (kode dibawah ini tersedia jika blogger anda memiliki widget profile):

<b:widget id='Profile1' locked='false' title='xxx' type='Profile'>

Masukan (copy paste) kode pada langkah 7 disini (yang di blok "xxx" sesuai penamaan yang anda berikan)

<b:else/> <!-- normal blog profile -->

Langkah 7
Masukan (copy paste) kode jQuery dibawah ini diantara kode pada langkah 6:

<script type='text/javascript'>
$().ready(function() {
$('dl#comments-block dt a').each(function(i) {
if($(this).attr('href') == '<data:userUrl/>') {
$(this).parent('dt').addClass('author-comment').next('dd.comment-body').addClass('author-comment').next('dd.comment-footer').addClass('author-comment');
}
});
});
</script>

Langkah 8
Simpan Template dan lanjutkan ke langkah berikutnya...

Kode CSS Komentar

Langkah 9
Cari kode dibawah ini:

]]></b:skin>

Langkah 10
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 9:

dl#comments-block dt.author-comment {
background-image: none;
background-color: #EDE5BE;
margin-bottom: 0px;
padding: 6px 0 6px 10px;
border: 1px solid #ccc;
border-bottom: 1px solid #FFF7CF;
}
dl#comments-block dd.comment-body.author-comment {
color: #593622;
background-color: #EDE5BE;
margin-top: 0px;
margin-bottom: 0px;
padding: 10px;
border: 1px solid#ccc;
border-top: 1px solid #CBC4AC;
}
dl#comments-block dd.comment-footer.author-comment {
background-color: #CBC39C;
padding: 3px;
margin-top: 0px;
border: 1px solid #ccc;
border-top: none;
}

Langkah 11
Simpan Template dan preview blog anda...

Keterangan:

• Jika setelah dilakukan modifikasi ini komentar tidak mengalami perubahan ada kemungkinan kode CSS standar blogger sudah di rubah oleh pembuat template
• Dan atau terjadi konflik (tambrakan) kode jQuery yang digunakan dengan kode jQuery lainnya
• Lihat Demonya disini

Penjelasan tentang kode jQuery dan kode CSS akan dibahas dalam kesempatan mendatang dan itu juga jika sedang semangat untuk menulis... Happy blogging... :)