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 )


99 komentar:

  1. wow keren info na sob makasih ya

    BalasHapus
  2. punya saya koq ga bisa berfungsi?

    BalasHapus
  3. @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
  4. semoga infonya bermanfaat untuk semua... :h:

    BalasHapus
  5. 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
  6. wahh... keren!
    ijin masang yach!
    :h:

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

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

    BalasHapus
  9. Ikutan ngetes sob :j:

    BalasHapus
  10. 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
  11. suciyellow: coba kamu cek lagi letak kode2 nya.

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

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

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

    BalasHapus
  15. Komentar ini telah dihapus oleh pengarang.

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

    Regards
    nzhu19.blogspot.com

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

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

    BalasHapus
  19. tanks banget dah bisa.... :b:

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

    BalasHapus
  21. :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
  22. berhasil gan,tapi koq malah muncul di bawah kotak komentar...??
    bingung.. :j:

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

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

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

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

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

    BalasHapus
  28. @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
  29. kode nya udah ada tapi g bisa di gunain...gmn sih cara ngegunainnya? nulis code ataw emoticon nya di klik??

    BalasHapus
  30. 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
  31. banyak banget.,. apa gk bikin jadi lemot?!
    ntar malah error mulu., blogku aja udah lemot., kebanyakan widget kali.,

    BalasHapus
  32. 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
  33. :e: gk bisa., gk bisa.,. udah dicoba sesuai petunjuknya., tapi koq gk bisa juga., mohon bantuannya.,.

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

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

    BalasHapus
  36. 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
  37. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  38. 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
  39. :a Punyaq tak bisaaa :a

    BalasHapus
  40. :a: Punyaq Tak Bisa :a:

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

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

    BalasHapus
  43. wah perlu di coba nie....

    makasi bang....

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

    BalasHapus
  45. Komentar ini telah dihapus oleh pengarang.

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

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

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

    BalasHapus
  49. waaaaaaaaaaaaaaa gak fungsi nih

    kasih penjelasan dong

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

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

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

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

    BalasHapus
  53. Komentar ini telah dihapus oleh pengarang.

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

    BalasHapus
  55. 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.