jQuery Author Threaded Comments Highlight ~ Belajar Blog

Setelah Blogger menambahkan fasilitas Threaded Comments, sangat sulit untuk membedakan antara komentar pengunjung dengan komentar author (penulis). Hal ini terjadi karena terjadi perubahan struktur dan kode yang digunakan antara komentar versi klasik dengan komentar versi threaded, namun bukan berarti tidak ada cara. Setelah Blogger Tune-Up meneliti kode-kode yang digunakan pada komentar versi threaded baik itu kode HTML maupun kode CSS-nya, maka cara-cara lama yang mengandalkan kode CSS sudah tidak bisa digunakan. Cara terbaik yang ditemukan Blogger Tune-Up adalah dengan melibatkan jQuery untuk memberikan sentuhan berbeda antara komentar pengunjung dengan komentar penulis/author, baik perbedaan warna latar, warna tulisan atau menambahkan background gambar. Mari kita telusuri...

Skenario HTML

Dibawah ini adalah kode HTML untuk threaded comment yang digunakan Blogger pada saat halaman artikel di load (panggil). Ini dilakukan untuk menidentifikasi tag bagian mana yang akan diberi sentuhan berbeda. Berikut kode yang digunakan Blogger:

<!-- Tag HTML dan Class threaded comment untuk author -->
<div class="comment-block">
 <div class="comment-header">
  <cite class="user blog-author">
   <a href="/" rel="nofollow">Hendriono</a>
  </cite>
  <span class="icon user blog-author"></span>
  <span class="datetime">
   <a href="/" rel="nofollow">Mar 23, 2012 01:30 PM</a>
  </span>
 </div>
 <p class="comment-content">Isi komentar Author</p>
</div>
<!-- Tag HTML dan Class threaded comment untuk pengunjung -->
<div class="comment-block">
 <div class="comment-header">
  <cite class="user">
   <a href="/" rel="nofollow">Pengunjung</a>
  </cite>
  <span class="icon user"></span>
  <span class="datetime">
   <a href="/" rel="nofollow">Mar 23, 2012 03:30 PM</a>
  </span>
 </div>
 <p class="comment-content">Isi komentar pengunjung</p>
</div>

Jika di teliti maka hanya ada satu perbedaan yang membedakan antara komentar pengunjung dengan komentar penulis. Perbedaan tersebut terletak pada class blog-author, jika pada komentar penulis menggunakan class="user blog-author" sedangkan pada pengunjung hanya menggunakan class="user". Sedangkan pada tag <p class="comment-content"> tidak dibedakan antara komentar pengunjung dengan komentar penulis, pada bagian inilah Blogger Tune-Up akan memberikan sentuhan untuk membedakan antara komentar penulis dengan komentar pengunjung. Silahkan diteliti untuk dikembangkan lebih lanjut.

Skenario CSS

Setelah diketahui dan ditemukan bagian yang akan diberikan sentuhan berbeda maka selanjutnya kita persiapkan kode CSS untuk membedakan komentar penulis dengan komentar pengunjung. Blogger Tune-Up menuliskan kode CSS seperti di bawah ini, namun silahkan berkreasi sesuai dengan imajinasi anda.

.author-highlight {
 background-image: url(https://lh5.googleusercontent.com/_xcD4JK_dIjU/TasKJgjf1FI/AAAAAAAAFEA/pvkcJFnS-DA/s800/author_mark.png);
 background-repeat: no-repeat;
 background-position: 100% 100%;
 background-color: #F0F0F0;
}

Pada kode CSS ini anda bisa menambahkan property lain, baik itu border, color, font dan lain sebagainya. Silahkan berkreasi...

Skenario jQuery

Setelah kode CSS ditulis, selanjutnya adalah menyisipkan kode CSS tersebut pada skenario HTML yang telah dijelaskan di atas. Blogger Tune-Up kebetulan ingin menyisipkan class author-highlight pada tag HTML <p class="comment-content">, maka kode jQuery di tulis seperti dibawah ini:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){
 $('.user.blog-author').closest('.comment-block').find('p.comment-content').addClass('author-highlight');
});
//]]></script>

Namun jika anda ingin memberikan sentuhan berbeda pada tag <div class="comment-block"> maka kode jQuery di tulis seperti dibawah ini:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>//<![CDATA[
 $(document).ready(function(){
  $('.user.blog-author').closest('.comment-block').addClass('author-highlight');
 });
//]]></script>

Nah sekarang, silahkan berkreasi dengan imajinasi yang anda miliki dan kembangkan lebih cantik dan menarik lagi...

Integrasi jQuery Author Threaded Comments Highlight

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke Edit HTML
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3 (Lihat Skenario CSS):

.author-highlight {
 background-image: url(https://lh5.googleusercontent.com/_xcD4JK_dIjU/TasKJgjf1FI/AAAAAAAAFEA/pvkcJFnS-DA/s800/author_mark.png);
 background-repeat: no-repeat;
 background-position: 100% 100%;
 background-color: #F0F0F0;
}

Langkah 5
Cari kode dibawah ini:

</head>

atau kode:

</body>

Langkah 6
Masukan (copy paste) kode jQuery dibawah ini diatas kode pada langkah 5 (Lihat Skenario jQuery):

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>//<![CDATA[
 $(document).ready(function(){
  $('.user.blog-author').closest('.comment-block').addClass('author-highlight');
 });
//]]></script>

Langkah 7
Simpan template anda dan preview blog...

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Belajar Blog

Tuesday, March 27, 2012