Cara Menambahkan Emoticon Kaskus di Kotak Komentar

Kotak komentar adalah sebuah hal yang dirasa sangat penting bagi para admin website maupun blog, karena dengan menyediakan kotak komentar akan bisa melihat secara real kualitas web tersebut. Betapa tidak, dengan menyediakan kotak komentar semacam ini, admin maupun orang-orang yang sedang mengunjungi akan bisa mengetahui bagaimana tanggapan-tanggapan para komentator web tersebut. Semakin blog tersebut berkualitas akan ditunjukkan seberapa banyak responden merespon apa yang ada dalam web tersebut, baik itu mengenai tampilan, maupun konten.

Namun terkadang para admin melihat komentator hanya mencantumkan komentarnya dengan text saja. Tapi kali ini para admin sudah bisa menambahkan beberapa Emoticon untuk dibubuhkan di beberapa komentar yang mengomentari web kita. Akan tetapi trik ini akan saya sampaikan hanya digunakan di blogger.

Sebenarnya Emoticon apa yang akan ditambahkan pada tutorial kali ini, sesuai judul Cara Menambahkan Emoticon Kaskus di Kotak Komentar.
Anda tentunya sudah tak asing lagi dengan yang namanya KASKUS, suatu jejaring sosial yang ada di Indonesia yang sangat familiar di kalangan cyber. Kita tak akan membahas tentang KASKUS nya, akan tetapi kita akan membahas tentang Emoticon yang digunakan pada website KASKUS.

Bagaimana sih caranya menambahkan Emoticon KASKUS pada setiap kotak komentar di blog kita? Berikut adalah langkah-langkahnya :
1. Silahkan login terlebih dahulu di blogger anda
2. Pilih Rancangan > Edit HTML
3. Pastikan anda memberikan tanda centang pada Expand Template Widget
4. Cari kode </body>
5. Letakkan script di bawah ini sebelum kode di atas :

<script type='text/javascript'>
//<![CDATA[
a = document.getElementById('comments');
if(a) {
b = a.getElementsByTagName("DD");
for(i=0; i < b.length; i++) {
if (b.item(i).getAttribute('CLASS') == 'comment-body') {
_str = b.item(i).innerHTML.replace(/:a:/gi, "<img src='http://grandis.web.id/blog-triks/sundul.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:b:/gi, "<img src='http://grandis.web.id/blog-triks/jempol2.gif' class='smiley'/>");
_str = _str.replace(/:c:/gi, "<img src='http://grandis.web.id/blog-triks/bingung.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:d:/gi, "<img src='http://grandis.web.id/blog-triks/ngakak.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:e:/gi, "<img src='http://grandis.web.id/blog-triks/hammer.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:f:/gi, "<img src='http://grandis.web.id/blog-triks/najis.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:g:/gi, "<img src='http://grandis.web.id/blog-triks/capede.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:h:/gi, "<img src='http://grandis.web.id/blog-triks/s_sm_maho.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:i:/gi, "<img src='http://grandis.web.id/blog-triks/takut.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:j:/gi, "<img src='http://grandis.web.id/blog-triks/sorry.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:k:/gi, "<img src='http://grandis.web.id/blog-triks/marah.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:l:/gi, "<img src='http://grandis.web.id/blog-triks/ngacir2.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:m:/gi, "<img src='http://grandis.web.id/blog-triks/I-Luv-Indonesia.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:n:/gi, "<img src='http://grandis.web.id/blog-triks/cewek.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:o:/gi, "<img src='http://grandis.web.id/blog-triks/shakehand2.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:p:/gi, "<img src='http://grandis.web.id/blog-triks/malu.gif' alt='' width='40' class='smiley'/>");
b.item(i).innerHTML = _str;
}
}
}
a = document.getElementById('comments');
if(a) {
c = a.getElementsByTagName("DD");
for(i=0; i < c.length; i++) {
if (c.item(i).getAttribute('CLASS') == 'comment-body-author') {
_str = b.item(i).innerHTML.replace(/:a:/gi, "<img src='http://grandis.web.id/blog-triks/sundul.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:b:/gi, "<img src='http://grandis.web.id/blog-triks/jempol2.gif' class='smiley'/>");
_str = _str.replace(/:c:/gi, "<img src='http://grandis.web.id/blog-triks/bingung.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:d:/gi, "<img src='http://grandis.web.id/blog-triks/ngakak.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:e:/gi, "<img src='http://grandis.web.id/blog-triks/hammer.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:f:/gi, "<img src='http://grandis.web.id/blog-triks/najis.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:g:/gi, "<img src='http://grandis.web.id/blog-triks/capede.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:h:/gi, "<img src='http://grandis.web.id/blog-triks/s_sm_maho.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:i:/gi, "<img src='http://grandis.web.id/blog-triks/takut.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:j:/gi, "<img src='http://grandis.web.id/blog-triks/sorry.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:k:/gi, "<img src='http://grandis.web.id/blog-triks/marah.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:l:/gi, "<img src='http://grandis.web.id/blog-triks/ngacir2.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:m:/gi, "<img src='http://grandis.web.id/blog-triks/I-Luv-Indonesia.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:n:/gi, "<img src='http://grandis.web.id/blog-triks/cewek.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:o:/gi, "<img src='http://grandis.web.id/blog-triks/shakehand2.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:p:/gi, "<img src='http://grandis.web.id/blog-triks/malu.gif' alt='' width='40' class='smiley'/>");
c.item(i).innerHTML = _str;
}
}
}
//]]>
</script>

6. Setelah itu, silahkan cari kode berikut :

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

7. Kalau sudah ketemu, silahkan letakkan script di bawah ini setelah kode <p class='comment-footer'>
( Jika kode tersebut ada dua, silahkan pilih yang paling awal )

<b><img src='http://grandis.web.id/blog-triks/sundul.gif' width='40'/>
:a:
<img src='http://grandis.web.id/blog-triks/jempol2.gif' width='40'/>
:b:
<img src='http://grandis.web.id/blog-triks/bingung.gif' width='40'/>
:c:
<img src='http://grandis.web.id/blog-triks/ngakak.gif' width='40'/>
:d:
<img src='http://grandis.web.id/blog-triks/hammer.gif' width='40'/>
:e:
<img src='http://grandis.web.id/blog-triks/najis.gif' width='40'/>
:f:
<img src='http://grandis.web.id/blog-triks/capede.gif' width='40'/>
:g:
<br/><img src='http://grandis.web.id/blog-triks/s_sm_maho.gif' width='40'/>
:h:
<img src='http://grandis.web.id/blog-triks/takut.gif' width='40'/>
:i:
<img src='http://grandis.web.id/blog-triks/sorry.gif' width='40'/>
:j:
<img src='http://grandis.web.id/blog-triks/marah.gif' width='40'/>
:k:
<img src='http://grandis.web.id/blog-triks/ngacir2.gif' width='40'/>
:l:
<img src='http://grandis.web.id/blog-triks/I-Luv-Indonesia.gif' width='40'/>
:m:
<img src='http://grandis.web.id/blog-triks/cewek.gif' width='40'/>
:n:
<img src='http://grandis.web.id/blog-triks/shakehand2.gif' width='40'/>
:o:
<img src='http://grandis.web.id/blog-triks/malu.gif' width='40'/>
:p:
</b>

8. Pilih Save / Simpan

Catatan : Ada beberapa hal yang perlu anda perhatikan yaitu kemungkinan setiap template memiliki perbedaan script. Ada kalanya saat anda mencari script terlalu kepayahan, kalau pun sudah menemukan dan berhasil masuk tanpa kesalahan akan tetapi Emoticon tidak muncul. Hal ini dipicu kemungkinan besar adalah karena setiap template berbeda, dan ada kalanya javascript yang ada di server sedang ada masalah.

Selamat belajar!