Memasang emoticon kotak komentar versi baru

Dulu saya pernah memberi tutorial tentang memasang emoticon di kotak komentar disini. Sekarang saya akan memberi tutorial tentang memasang emoticon versi baru. Saya mendapatkan tutorial ini ketika jalan-jalan di blognya grandis. Disana saya mendapatkan tutorial tentang memasang emoticon versi baru. Kalau yang belum tahu versi lama dan versi baru seperti ini :

Emoticon Yahoo :




Emoticon Kucing :


Maka,Dalam versi baru,emoticonnya adalah seperti berikut:



Gimana lebih menarik kan...Cara memasangnya adalah :

1. Tata Letak --->> Edit HTML.

2. Centang "Expand Widget Template"

3. Lalu letakkan script berikut sebelum kode </body>


<script type='text/javascript'>
//<![CDATA[
a = document.getElementsByTagName('LABEL');
if(a) {
for(i=0; i < a.length; i++) {
_str = b.item(i).innerHTML.replace(/:a:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-001.gif' alt='' class='smiley'/>");
_str = _str.replace(/:b:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-005.gif'' class='smiley'/>");
_str = _str.replace(/:c:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-009.gif' alt='' class='smiley'/>");
_str = _str.replace(/:d:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-013.gif' alt='' class='smiley'/>");
_str = _str.replace(/:e:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-014.gif' alt='' class='smiley'/>");
_str = _str.replace(/:f:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif' alt='' class='smiley'/>");
_str = _str.replace(/:g:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-018.gif' alt='' class='smiley'/>");
_str = _str.replace(/:h:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-001.gif' alt='' class='smiley'/>");
_str = _str.replace(/:i:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-002.gif' alt='' class='smiley'/>");
_str = _str.replace(/:j:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-005.gif' alt='' class='smiley'/>");
_str = _str.replace(/:k:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-007.gif' alt='' class='smiley'/>");
_str = _str.replace(/:l:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-009.gif' alt='' class='smiley'/>");
_str = _str.replace(/:m:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-008.gif' alt='' class='smiley'/>");
_str = _str.replace(/:n:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-012.gif' alt='' class='smiley'/>")




a.item(i).innerHTML = _str;
}
}


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://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-001.gif' alt='' class='smiley'/>");
_str = _str.replace(/:b:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-005.gif'' class='smiley'/>");
_str = _str.replace(/:c:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-009.gif' alt='' class='smiley'/>");
_str = _str.replace(/:d:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-013.gif' alt='' class='smiley'/>");
_str = _str.replace(/:e:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-014.gif' alt='' class='smiley'/>");
_str = _str.replace(/:f:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif' alt='' class='smiley'/>");
_str = _str.replace(/:g:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-018.gif' alt='' class='smiley'/>");
_str = _str.replace(/:h:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-001.gif' alt='' class='smiley'/>");
_str = _str.replace(/:i:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-002.gif' alt='' class='smiley'/>");
_str = _str.replace(/:j:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-005.gif' alt='' class='smiley'/>");
_str = _str.replace(/:k:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-007.gif' alt='' class='smiley'/>");
_str = _str.replace(/:l:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-009.gif' alt='' class='smiley'/>");
_str = _str.replace(/:m:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-008.gif' alt='' class='smiley'/>");
_str = _str.replace(/:n:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-012.gif' alt='' 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') == 'owner-Body') {
_str = b.item(i).innerHTML.replace(/:a:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-001.gif' alt='' class='smiley'/>");
_str = _str.replace(/:b:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-005.gif'' class='smiley'/>");
_str = _str.replace(/:c:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-009.gif' alt='' class='smiley'/>");
_str = _str.replace(/:d:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-013.gif' alt='' class='smiley'/>");
_str = _str.replace(/:e:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-014.gif' alt='' class='smiley'/>");
_str = _str.replace(/:f:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif' alt='' class='smiley'/>");
_str = _str.replace(/:g:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-018.gif' alt='' class='smiley'/>");
_str = _str.replace(/:h:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-001.gif' alt='' class='smiley'/>");
_str = _str.replace(/:i:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-002.gif' alt='' class='smiley'/>");
_str = _str.replace(/:j:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-005.gif' alt='' class='smiley'/>");
_str = _str.replace(/:k:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-007.gif' alt='' class='smiley'/>");
_str = _str.replace(/:l:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-009.gif' alt='' class='smiley'/>");
_str = _str.replace(/:m:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-008.gif' alt='' class='smiley'/>");
_str = _str.replace(/:n:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-012.gif' alt='' class='smiley'/>")
c.item(i).innerHTML = _str;
}
}
}
//]]>
</script>

4. Kemudian cari kode berikut ini :

<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>

5. Ketemu kan?Kalo sudah ketemu letakkan kode2 berikut setelah kode <p class='comment-footer'>
(Kode diatas biasanya ada dua, pilih di kode yang nomor dua atau terakhir)
<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 200; text-align: center; border: 0px solid #90be35; padding: 5px; background: #ffffff; height:350'>
<b>
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-001.gif' width='30'/> :a:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-005.gif' width='30'/> :b:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-009.gif' width='30'/> :c:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-013.gif' width='30'/> :d:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-014.gif' width='30'/> :e:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif' width='30'/> :f:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-018.gif' width='30'/> :g:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-001.gif' width='30'/> :h:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-002.gif' width='30'/> :i:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-005.gif' width='30'/> :j:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-007.gif' width='30'/> :k:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-009.gif' width='30'/> :l:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-008.gif' width='30'/> :m:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-012.gif' width='30'/> :n:
</b>
</div>
6. Save.

( Sumber : http://blog-triks.blogspot.com )


102 komentar:

  1. Pertamaxxx...wakakakaka...

    BalasHapus
  2. wow keren info na sob makasih ya

    BalasHapus
  3. punya saya koq ga bisa berfungsi?

    BalasHapus
  4. @Budi : Q uda lihat blog u,emoticon u ada di bawah postingan. itu terjadi karena sobat salah meletakkan kode, Coba diteliti lagi. letakkan kode di tempat yang tepat.

    BalasHapus
  5. semoga infonya bermanfaat untuk semua... :h:

    BalasHapus
  6. mau tanya .. misalkan mau isi comment selain admin nya .. harus isi verification code .. tapi kenapa ga bsa input verification codenya ya ? mohon bantuannya .. terima kasih :h:

    BalasHapus
  7. wahh... keren!
    ijin masang yach!
    :h:

    BalasHapus
  8. alhamdulillah mas bisa emoticonnya...awal buat muncul dibawah kotak, penasaran nyoba lagi alhamdulillah bisa....
    :f: :c:

    BalasHapus
  9. Kereeeennnnnn Bgt ni Gan......
    ijin mencobanya,,,,,,,,,,
    :c:

    BalasHapus
  10. Ikutan ngetes sob :j:

    BalasHapus
  11. kak,,sya bingung nih,,sy kn udah muncul emotion nya,,tpi kok di bawah kotak komentar,,ada emotion lg (tpi gak ada gambarnya),,gmn cara menghilangkannya? saya pusiiing nih jdna,,
    btw kok saat sya ketik kode gambarnya,,setelah di post,,gambarnya gak muncul? knp itu kak? mohon dbalas yaa :i:

    BalasHapus
  12. suciyellow: coba kamu cek lagi letak kode2 nya.

    BalasHapus
  13. Salam kenal mas...Infonya berguna sekali buat saya...Sudah saya pasang n hasilnya berhasil...

    BalasHapus
  14. http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-009.gif

    BalasHapus
  15. udah d coba tapi kok ngga bisa muncul d komentarnya....blogQ tdk punya p class='comment-footer' gmana donk....... :a:

    BalasHapus
  16. :a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n:

    BalasHapus
  17. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  18. d blog ane ga bz gan. Ap yg salah ya?

    Regards
    nzhu19.blogspot.com

    BalasHapus
  19. keren2..mampir ya mas :d:

    BalasHapus
  20. kok jadinya di tempatku vertikal ya??? makan tempat banget om, gmna ubah seperti punya ente???/ :a:

    BalasHapus
  21. AS.GAN MAU TANYA CARA MEMBAGI HEADER KAYAK PUNYA PEN SEPERTI BAWAH ITU MENJADI 3BAGIAN ITU GIMANA???BISA KASIH TAU GAK!!!MAKASIH

    BalasHapus
  22. thanks ya.. :e:

    BalasHapus
  23. :c:
    AGAN sebaik nya komentar nya di alas --- emang iya sering gtu emang dah muncul tapi tatkala ada orang posting nggak keluat di kotak coment,makasih agan dan blog agan ini sebenar salah satu blog yang saya percaya dan sebagai acuan blog saya.jadi sebaik nya di balas ya gan coment .na.makasih

    BalasHapus
  24. berhasil gan,tapi koq malah muncul di bawah kotak komentar...??
    bingung.. :j:

    BalasHapus
  25. mas napa punya ku ga munccul yach.. mohon bantuannya neh...sexan cara ubah warna latarnya gimana..soalnya kodenya ga kelihatan..makasih

    BalasHapus
  26. mas ko punya saya nga jadi ya... padahal dah bener cara-caranya...:a:

    BalasHapus
  27. salam.........
    mas mohon bantuannya.............
    mas fungsi emoticon nya kok gk berfungsi di blog saya...
    mohon kesediaan bntuannya.....
    bilaqalbuberbicara.blogspot.com

    BalasHapus
  28. Salam kenal, ya ... Terima kasih pencerahannya :h:

    BalasHapus
  29. Maaf, mas. Kok tidak berhasil, ya? Emoticonnya sudah ada, tapi tidak bisa digunakan. Apa yang kurang? Mohon bantuannya

    BalasHapus
  30. @All: Postingan ini telah saya perbaiki agar lebih jelas dan coba kembali. Alhamdulillah, masih bisa. Apabila ada yang belum berhasil, silakan dicoba kembali, mungkin ada kesalahan dalam peletakan kode.

    BalasHapus
  31. kode nya udah ada tapi g bisa di gunain...gmn sih cara ngegunainnya? nulis code ataw emoticon nya di klik??

    BalasHapus
  32. Maksih maS,,udah saya pasang di blog saya...
    awalnya saya gak bisa menemukan kode "p class='comment-footer'"
    tp akhirnya saya cari dengan cara laein...
    maksih....... :f:

    BalasHapus
  33. banyak banget.,. apa gk bikin jadi lemot?!
    ntar malah error mulu., blogku aja udah lemot., kebanyakan widget kali.,

    BalasHapus
  34. hihi.,. smoga bisa nih emoticon :a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n:
    pas saya ketik begitu., gk keluar gambarnya kk., gk fungsi., mohon bantuannya.,

    BalasHapus
  35. :e: gk bisa., gk bisa.,. udah dicoba sesuai petunjuknya., tapi koq gk bisa juga., mohon bantuannya.,.

    BalasHapus
  36. Mungkin karena blog sobat terlalu berat, jadi efek java scriptnya tidak mau dipanggil.

    BalasHapus
  37. Kakak...Akhirnya...Aku udah cari, kesini, kesana..Uuuuuuuu akhirnya dapet jugaaa makasih kakakakkkkkk :h:

    BalasHapus
  38. We were unable to save your template
    Please correct the error below, and submit your template again.
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "b:includable" must be terminated by the matching end-tag "". <----- malah keluar notif itu..

    punyaku kenapa ngga bisa. padahal tempatnya udah sama.. trus dimana slahnya?
    help me,please.

    ossy,
    :i:

    BalasHapus
  39. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  40. kalau ga muncul emoticonnya, coba mampir kesini

    http://ijo-blogtricks.blogspot.com/2010/12/emoticon-tidak-muncul-pada-kotak.html

    numpang lapak ya gan..

    BalasHapus
  41. :a Punyaq tak bisaaa :a

    BalasHapus
  42. :a: Punyaq Tak Bisa :a:

    BalasHapus
  43. nice, http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-009.gif

    BalasHapus
  44. bro gimana buat contoh emoticon di bawah kotak komentar plizzz pencerahannya gan kalo bisa buat entrinya ya gan plizz

    BalasHapus
  45. wah perlu di coba nie....

    makasi bang....

    BalasHapus
  46. alhamdulillah, berhasil mas. Makasih ya :h:

    BalasHapus
  47. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  48. :: gmana caranya biar muncul gan di komentar... di Blog saya ndak muncul,,, :a:

    BalasHapus
  49. Yang baru tambah keren,, makasih tutorialnya,,,,

    BalasHapus
  50. ga jadi :a: gimana cara'a nieh biar di blog gw bisa da animasi'a :e: :h:

    BalasHapus
  51. waaaaaaaaaaaaaaa gak fungsi nih

    kasih penjelasan dong

    :g: :i: :a: :b:

    BalasHapus
  52. http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-009.gif

    BalasHapus
  53. hallo... kok ga bsa disaya bro...

    BalasHapus
  54. punyaku menunya aja yg muncul terus pas dicoba gambarnya gk muncul :a:

    BalasHapus
  55. mas kok template saya gak ada p class comment-footer
    solusinya ada gak atau bisa pake alternatif kode yang lain gitu ...... :(

    BalasHapus
  56. http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-013.gif

    BalasHapus
  57. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  58. xie xie...da bisaaaa! :f: :l:

    BalasHapus
  59. kok gak bisa, script comment-footer nya gak ada ,padahal sudah Ctrl+F tetep gak ada :a:

    BalasHapus

Mau tukeran link? silakan buka Link Sahabat dan apabila ada pertanyaan silakan tulis di Kotak Pertanyaan. Terima Kasih...

Kami akan menghapus komentar yang: Tak sopan, memakai HURUF BESAR, berupa caci maki, mengandung kata-kata kebun binatang, debat kusir, provokasi, di luar konteks, berupa undangan/ reklame. Komentar yang terlalu panjang, tanpa paragraf dan sulit dipahami. Komentar copy-paste, silakan di-link saja.

Isi komentar adalah tanggung jawab penulis komentar, bukan tanggung jawab pengelola blog/situs ini. Harap maklum.