jQuery Author Highlight di Threaded Comments

Bagi para pemilik blog yang kemarin sudah memposting artikelnya pasti sekarang sudah mulai merasa senang karena blognya sudah memiliki isi, bahkan mungkin blog anda sudah ramai oleh para pengunjung baru anda, tapi apakah pengunjung anda sudah banyak yang berkomentar? ataukah blog anda masih sepi komentar. Untuk meramaikan komentar diblog anda tentu saja anda harus mempunyai tampilan kotak komentar yang menarik, kali ini saya akan menjelaskan cara memberi Highlight untuk Author Comments, jadi nanti jika Anda sebagai pemilik blog memberikan komentar diblog anda maka tampilan kotak komentar anda akan berbeda dengan pengunjung lainnya, Tapi hal ini tidak mudah bagi para pengguna Threaded Comments blogger, itu semua dikarenakan CSS tidak berperngaruh pada Threaded Comments ini, dan jalan satu-satunya adalah menggunakan jQuery untuk memberikan sentuhan berbeda antara pengunjung dengan author blog baik dalam segi warna, background, maupun tulisan.

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 seperti apa 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">Fauzan Ramadhani</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 <div class="comment-content"> tidak dibedakan antara komentar pengunjung dengan komentar penulis, pada bagian inilah saya akan memberikan sentuhan untuk membedakan antara komentar penulis dengan komentar pengunjung. Silahkan diteliti untuk dikembangkan lebih lanjut.

Skenario CSS

Setelah tadi kita mengetahui bagian yang akan diberikan sedikit sentuhan berbeda sekarang saatnya mempersiapkan kode CSS untuk membedakan komentar penulis dengan komentar pengunjung. ini adalah contohdari CSS yang saya berikan 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. Saya kebetulan ingin menyisipkan class author-highlight pada tag HTML

, 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 Blog anda
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...

Kesimpulan

Kesimpulannya adalah apapun bisa anda lakukan dengan blog anda jika anda benar-benar mau berusaha, belajarlah darimanapun dan dari siapapun karena ilmu tidak pandang bulu. Semoga dengan terbitnya artikel ini anda bisa merasa puas ddengan blog ini. Mungkin hanya segini yang bisa saya sampaikan. Tetap pantau Blogger Ramadhani dan kunjungi setiap saat anda perlu. Happy Blogging...

Credit :

468 X 60