Memberi Nomor Urut Pada Komentar di Blogspot

Hilanglah satu kepenasaran untuk memberi nomor urut pada komentar / menomori komentar sesuai dengan urutan komentar dari pembaca pada tulisan kita, khususnya kita yang menggunakan Blogspot. Pada Platform Blog Wordpress sering kita temui pada kolom komentar terdapat nomor urut untuk masing-masing pemberi komentar, sesuai dengan datangnya komentar tersebut. Lalu apakah penomoran ini bisa dilakukan di blogger a.k.a blogspot (itu gaya bicara adik saya, jika menyebut kata "alias"). Maka jawabnya bisa.

Tulisan berikut adalah terjemahan bebas dari tulisan Fernandooo1 di blog miliknya Randomness. Kawan-kawan bisa langsung merujuk kesana jika menginginkan. Setelah saya baca dan praktekkan, kemudian yang saya lakukan adalah mencari dengan Google dengan keyword "Memberi Nomor Urut Pada Komentar". Harapan saya adalah menemukan tutorial tersebut dalam bahasa indonesia. Sebuah blog memang ada, di urutan pertama pula, yaitu blog Tito-Kun. Tapi sayang malah keterangan "Page not found" muncul. Maka sampailah saya pada penulisan ini. Tulisan ini tak lain hanyalah usaha pembelajaran.

Menurut Fernandooo1, cara ini punya kelebihan juga kekurangan. Jangan mengerutkan dahi dulu, sekarang lihat alasan yang dia kemukakan

Advantages:
• It is a nice way of differencing each comment.
• It allows you to get the permalink of each comment, and this may work for future references (e.g.: “You should read this comment [URL goes here], I found it very interesting”).
• Indispensible for design purposes.

Possible disadvantage:
• If you’re lazy, you may find it too long and difficult, though that’s exactly how styling your blog is always going to be. Patience is the clue!

Ternyata itu alasannya kekurangannya. Huruf yang saya tebali "permalink of each comment" maksudnya adalah, memberi alamat/URL unik untuk tiap-tiap komentar. Sebagai contohnya adalah permalink berikut:

http://randomnessf1.blogspot.com/2008/08/translation-numbering-comments.html?showComment=1218148560000#comment-2725052588975512324

Alamat diatas adalah URL Unik milik komentar saya di Blog milik Fernandooo1. Jadi ketika di klik maka kita akan langsung dibawa ke blog dia, sekaligus langsung ke kolom komentar yang saya berikan. Sebenarnya untuk templates standar, permalink untuk masing-masing komentar juga telah ada, yaitu pada "tanggal/waktu" komentar. Nah untuk yang menggunakan templates modifikasi, bisa jadi permalink ini dihilangkan, maka cara ini akan sekaligus mengembalikan permalink pada komentar di blog kawan-kawan.

Jadi jika kawan-kawan ingin mengutak-atik blog kawan-kawan dan juga merasa bukan pemalas, maka silahkan melanjutkan. Tapi jika sebaliknya.. atau memang ragu atau tidak mau maka saya pun tidak bisa memaksa :)

Kita mulai saja

1. Setelah Sign-in dan masuk ke Dashboard >> Layout >> Edit HTML, lalu beri tanda centang(thick) di "Expand Widget Templates".
2. BACKUP templates kawan-kawan sebelum memulai pengeditan . Harap perhatikan karena ini penting, dan jadikanlah perilaku ini sebagai kebiasaan, sebelum melakukan perubahan pada templates kita.
3. Cari kode dibawah ini dan tambahkan kode yang saya beri warna merah. Agar lebih mudah gunakan fasilitas "find" atau "search" pada browser kawan-kawan :
   

   ”<dl id='comments-block'>
   
   <script type='text/javascript'>var CommentsCounter=0;</script>
   
   <b:loop values='data:post.comments' var='comment'>
   
   <div class='' expr:id='data:comment.id'>
   
   <dt class='comment-author' expr:id='"comment-" + data:comment.id'>
   <a expr:name='"comment-" + data:comment.id'/>
   <b:if cond='data:comment.authorUrl'>
   <a expr:href='data:comment.authorUrl' rel='nofollow'>
   <data:comment.author/>
   </a>
   <b:else/>
   <data:comment.author/>
   </b:if>
   <data:commentPostedByMsg/> <!-- Mungkin saja baris ini tidak terdapat
   pada templates kawan-kawan. Tapi itu tidak masalah -->
   
   <span class='numberingcomments'>
   <a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
   <script type='text/javascript'>
   CommentsCounter=CommentsCounter+1;
   document.write(CommentsCounter)
   </script>
   </a>
   </span>
   
   </dt>
   
   <dd class='comment-body'>
   .......
   </dd>
   
   </div>
   </b:loop>
   </dl>

4. Selanjutnya kita tinggal menambahkan kode berikut pada bagian CSS templates kita. Letakkan kode berikut tepat diatas kode ]]></b:skin> :
   

   ”/*Mulai css Comments Numbering*/
   .numberingcomments{
   float: right;
   display: block;
   width: 50px;
   margin-right: 5px;
   margin-top: -35px; /*POSISI NOMOR URUT KOMENTAR*/
   text-align: right;
   font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
   font-size: 30px;
   font-weight: normal;
   }
   
   /*since the numbers are actually links, we need to force the color properties*/
   .numberingcomments a:link, .numberingcomments a:visited {color: #445566 !important; text-decoration: none !important;}/*selesai css Comments Numbering*/
   
   .numberingcomments a:hover, .numberingcomments a:active {color: #FF9933 !important; text-decoration: none !important;}/*selesai css Comments Numbering*/

5. Save Templates dan Selesai.
   

Jika ingin mengubah bentuk font, warna atau mungkin posisi nomor urut tersebut, tentu seperti yang kita ketahui yang perlu dilakukan hanyalah dengan mengganti kode pada poin ke 4. Sekaligus mengingatkan, bahwa bentuk templates yang berbeda-beda menyebabkan letak kemunculan nomor urut pada komentar ini berlainan pula, sekali lagi, ubah kode yang diperlukan pada kode css saja (poin ke-4).

Yup, kita bisa melakukannya. lakukan dengan teliti. Jika terjadi sesuatu, kembalikan templates kawan-kawan dengan file Back-up tadi. Kemudian ulangi sekali lagi. Contohnya bisa kawan-kawan lihat di blog ini. Selamat mencoba bagi yang ingin mencoba.

#PS :

• Ijin dari Fernandooo1 melalui komentar bisa dilihat di sini.
• Berhubung menurut Fernandooo1, script ini didapat dari seorang kawan, maka saya sampaikan juga terimakasih kepada JMiur dari Vagabundia.
• Terimakasih juga untuk Amanda, karena lewat informasinya saya bisa menemukan tulisan ini.
• Setelah mencari-cari lagi, saya menemukan review posting diatas, telah ditulis oleh o-om pada tanggal 6 kemarin. Saya sarankan untuk menuju ke blog o-om untuk membaca tulisan beliau.