Tips: Melihat Comment Tanpa Pindah Halaman

Kebetulan ada temen yang nanyain gimana caranya supaya comment bisa di lihat tanpa harus pindah ke halaman lain (biasanya akan dipindah ke halaman permanent link/permalink). Jadi kalo di klik link "Comment" akan tampil tempat comment & commentnya (kalo ada) tanpa harus pindah ke halaman lain (biasanya ke halaman permalink).

Caranya sebenarnya relatif sederhana, tapi agak sedikit belibet karena paling gak musti "utak-atik" template blog (tentu saja...). Kembali pada tujuan semula gimana caranya supaya bisa membuat blog milik kita dapat menampilkan comment tanpa harus pindah ke halaman lain?. Penjelasan sederhananya adalah kita ambil saja semua comment dalam satu halaman & kita sembunyikan, ketika ada orang yang mengklik link "Comment" baru comment tersebut kita tampilkan (bingungin gak sih bahasanya?)

Dari penjelasan diatas, penjelasannya lebih detailnya sebagai berikut: Ambil semua comment (jika memang ada). Biasanya jika kita membuka suatu halaman di blogspot maka comment tidak akan ditampilkan, hal itu karena memang template blognya membuatnya menjadi seperti itu, lebih-lebih kita biasanya mendapatkan template blog dari template yang dimiliki oleh blogger. Kalo kita ingin ubah tentu saja kita harus mengubah templatenya, biasanya template blog bagian comment tampak seperti berikut:
NB: Kalo kodenya kepotong, coba select & copy paste ke tempat lain seperti notepad atau editor lainnya. Soalnya emang kode aslinya panjang :)

 <!-- Begin #comments -->
 <ItemPage>
   <div class="comments">
   <BlogItemCommentsEnabled><a name="comments"></a>
    <h4><$BlogItemCommentCount$> Comments:</h4>
    <dl class="comments-block">
     <BlogItemComments>
     <dt class="comment-poster" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>
       <$BlogCommentAuthor$> said...
     </dt>
     <dd class="comment-body">
      <p><$BlogCommentBody$></p>
     </dd>
     <dd class="comment-timestamp"><a href="#<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a>
     <$BlogCommentDeleteIcon$>
     </dd><br>
     </BlogItemComments>
    </dl>
    <div class="comment-timestamp" style="text-align:center;"><span class="comment-new"> <$BlogItemCreate$> </span></div>
   </BlogItemCommentsEnabled>
   <br/>
   <div class="comment-timestamp" style="text-align:center;"><span class="comment-new"> <a href="<$BlogURL$>">Back to Home</a> </span></div>
   </div>
 </ItemPage>
 <!-- End #comments -->

Nah kalo liat kode diatas, kita bisa lihat ada tag yang namanya <ItemPage> Tag inilah yang akan membuat comment tidak ditampilkan di halaman depan, tapi begitu kita mengklik link "Comment" dan halaman berpindah ke halaman permanent link (permalink) maka comment baru di tampilkan. Secara sederhana hapus saja tag <ItemPage> dan </ItemPage> maka otomatis comment akan langsung di tampilkan di halaman depan tanpa harus mengklik halaman permalink. Sederhana kan? :)
Tapi ingat SEBELUM MERUBAH TEMPLATE BLOGGER ANDA, PASTIKAN MEM-BACK-UP TERLEBIH DAHULU, kalo terjadi apa-apa kita bisa balik ke template sebelumnya

Tapi bagaiman kalo kita ingin sembunyikan commentnya dulu, kalo ada pembaca blog yang ngeklik "Comment" baru ditampilin commentnya? Caranya kita bisa memanfaatkan Javascript + CSS untuk memanipulasinya. Jadi kita bisa buat definisi block commentnya jadi seperti ini:

   <!-- Begin #comments -->
   <div id="c<$BlogItemNumber$>" class="comments" style="display:none">
   <BlogItemCommentsEnabled>
    <h4><$BlogItemCommentCount$> Comments:</h4>
    <dl class="comments-block">
     <BlogItemComments>
     <dt class="comment-poster" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>
       <$BlogCommentAuthor$> said...
     </dt>
     <dd class="comment-body">
      <p><$BlogCommentBody$></p>
     </dd>
     <dd class="comment-timestamp"><a href="#<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a>
     <$BlogCommentDeleteIcon$>
     </dd><br>
     </BlogItemComments>
    </dl>
    <div class="comment-timestamp" style="text-align:center;"><span class="comment-new"> <$BlogItemCreate$> </span></div>
   </BlogItemCommentsEnabled>
   </div>
   <!-- End #comments -->

Dari kode diatas kita bisa melihat bahwa tag <ItemPage> dan </ItemPage> telah di hapuskan dan ditambahkan atribut 'id="c<$BlogItemNumber$>"' dan atribut 'style="display:none"'.
Atribut id="c<$BlogItemNumber$>" berguna untuk membuat identifikasi block comment. <$BlogItemNumber$> sendiri adalah nomor unik yang akan di hasilkan oleh blogger saat seseorang membuka blog. Sedang atribut style="display:none" berguna untuk menyembunyikan block comment. Untuk menampilkan kembali, kita bisa memanipulasinya melalui javascript.

Jadi agar pengguna bisa membuka block comment itu, kita harus membuat fungsi javascript. Fungsi ini bisa kita simpan antara tag <head>...</head> yang penting sebelum tag <body>. Fungsinya dapat kita tuliskan kedalam blog tamplate kita kira-kira seperti berikut:

... dst ...
<script>
function fSC(id) {
 obj = document.getElementById(id);
 obj.style.display = (obj.style.display == 'none')?'':'none';
}
</script>
<head>
<body>
... dst ...

Kita harus membuat fungsi di dalam tag <script>...</script>. Namanya tidak harus fSC bisa juga x bisa abc suka-suka kita yang penting nama fungsi itu harus tidak boleh dimulai dengan angka, mengandung simbol seperti @,~,#, dst. Jangan lupa ingat nama fungsi itu karena kita akan menggantikan link "Comment" yang akan membawa kita ke halaman permalink menjadi memanggil fungsi yang kita definisikan tadi (fungsi fSC).

Cari tag yang berguna untuk merubah target link "Comment" dari template blog kita. Kira-kira tagnya terlihat seperti berikut:

<a class="comment-link" href="<$BlogItemPermalinkUrl$>#comment"><$BlogItemCommentCount$> comments</a>

Kita ganti menjadi

<a class="comment-link" href="javascript:fSC('c<$BlogItemNumber$>')"><$BlogItemCommentCount$> comments</a>

Jika kita menamakan fungsi yang kita buat sebelumnya adalah abc bukan fSC maka ganti saja fSC dengan abc.

Selesai sampai sini maka commentnya akan di sembunyikan sampai orang mengklik tombol "Comment". Kalo berhasil... tercapai sudah tujuan untuk membuat comment ditampilkan dalam satu halaman tanpa harus pindah ke halaman lain.

Ada sedikit tambahan yang perlu di perhatikan, cara diatas akan membuat comment justru tidak ditampilkan jika kita melihat dari halaman permalink. Untuk mengatasinya terpaksa kita harus membuat block commentnya agar dapat ditampilkan di halaman depan ataupun di halaman permalink, kita copy paste aja jadi nanti ada dua bagian satu bagian block comment yang berisi atribut 'id="c<$BlogItemNumber$>"' dan atribut 'style="display:none"' satu lagi gak ada kedua atribut itu tapi diantaranya di tambahkan atribut <ItemPage> dibagian awal block comment dan akhirnya dengan tag </ItemPage>. Kalo definisi comment yang ada di blog akan ditampilkan seperti berikut dan tentu saja akan sedikit/banyak berbeda dengan template yang dipunyai masing-masing... makanya emang agak ribet dikit kalo mau ngerubah-tapi konsepnya sederhana kan?

   <!-- Begin #comments -->

   <!-- Block comment yang akan di tampilkan di halaman depan non permalink -->
   <div id="c<$BlogItemNumber$>" class="comments" style="display:none">
   <BlogItemCommentsEnabled>
    <h4><$BlogItemCommentCount$> Comments:</h4>
    <dl class="comments-block">
     <BlogItemComments>
     <dt class="comment-poster" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>
       <$BlogCommentAuthor$> said...
     </dt>
     <dd class="comment-body">
      <p><$BlogCommentBody$></p>
     </dd>
     <dd class="comment-timestamp"><a href="#<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a>
     <$BlogCommentDeleteIcon$>
     </dd><br>
     </BlogItemComments>
    </dl>
    <div class="comment-timestamp" style="text-align:center;"><span class="comment-new"> <$BlogItemCreate$> </span></div>
   </BlogItemCommentsEnabled>
   </div>

   <!-- Block comment yang akan di tampilkan di halaman permalink saja -->
<ItemPage>
   <div class="comments">
   <BlogItemCommentsEnabled><a name="comments"></a>
    <h4><$BlogItemCommentCount$> Comments:</h4>
    <dl class="comments-block">
     <BlogItemComments>
     <dt class="comment-poster" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>
       <$BlogCommentAuthor$> said...
     </dt>
     <dd class="comment-body">
      <p><$BlogCommentBody$></p>
     </dd>
     <dd class="comment-timestamp"><a href="#<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a>
     <$BlogCommentDeleteIcon$>
     </dd><br>
     </BlogItemComments>
    </dl>
    <div class="comment-timestamp" style="text-align:center;"><span class="comment-new"> <$BlogItemCreate$> </span></div>
   </BlogItemCommentsEnabled>
   <br/>
   <div class="comment-timestamp" style="text-align:center;"><span class="comment-new"> <a href="<$BlogURL$>">Back to Home</a> </span></div>
   </div>
</ItemPage>
   <!-- End #comments -->

Lihat kode diatas kan? yang bagian pertama ada atribut 'id="c<$BlogItemNumber$>"' dan atribut 'style="display:none"' sedang yang bagian kedua tidak ada tapi sebelum dan sesuadahnya ada tag <ItemPage> dan </ItemPage>

Pusink gak? yah kalo masih ada pertanyaan atau ternyata gagal silahkan tanya lagi di bagian comment dari artikel ini... gak jamin kasih solusi sih... setidaknya akan di usahakan :)