Rahasia emoticon kotak komentar


Wah, udah lama gak posting nih, mumpung hari jum'at, besok cuma ada ekstra doank, pingin posting ahhhhhh.
tapi posting apa ya??? oh iya, aku kan dah banyak banget memberitahu kalian tentang emoticon di kotak koomentar. kayak gini nih:
1. Emoticon baby tv, kayak di kotak komentarku
2. Emoticon Kepiting
3. Emoticon onion

Lha sekarang aku mau kasih tau rahasianya??? mau kan?? kalian bisa membuat emoticon dengan pilihan gambar kalian sendiri. lihat tutorial di bawah ini.



1. Buat file js dengan isi sebagai berikut

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://emo.huhiho.com/set/tvbaby/74.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:b:/gi, "<img src='http://emo.huhiho.com/set/tvbaby/71.gif' class='smiley'/>");
_str = _str.replace(/:c:/gi, "<img src='http://emo.huhiho.com/set/tvbaby/67.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:d:/gi, "<img src='http://emo.huhiho.com/set/tvbaby/60.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:e:/gi, "<img src='http://emo.huhiho.com/set/tvbaby/46.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:f:/gi, "<img src='http://emo.huhiho.com/set/tvbaby/40.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:g:/gi, "<img src='http://emo.huhiho.com/set/tvbaby/39.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:h:/gi, "<img src='http://emo.huhiho.com/set/tvbaby/34.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:i:/gi, "<img src='http://emo.huhiho.com/set/tvbaby/22.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:j:/gi, "<img src='http://emo.huhiho.com/set/tvbaby/12.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:k:/gi, "<img src='http://emo.huhiho.com/set/tvbaby/6.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:l:/gi, "<img src='http://emo.huhiho.com/set/tvbaby/3.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:m:/gi, "<img src='http://emo.huhiho.com/set/tvbaby/73.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:n:/gi, "<img src='http://emo.huhiho.com/set/tvbaby/57.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:o:/gi, "<img src='http://emo.huhiho.com/set/tvbaby/18.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://emo.huhiho.com/set/tvbaby/74.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:b:/gi, "<img src='http://emo.huhiho.com/set/tvbaby/71.gif' class='smiley'/>");
_str = _str.replace(/:c:/gi, "<img src='http://emo.huhiho.com/set/tvbaby/67.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:d:/gi, "<img src='http://emo.huhiho.com/set/tvbaby/60.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:e:/gi, "<img src='http://emo.huhiho.com/set/tvbaby/46.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:f:/gi, "<img src='http://emo.huhiho.com/set/tvbaby/40.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:g:/gi, "<img src='http://emo.huhiho.com/set/tvbaby/39.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:h:/gi, "<img src='http://emo.huhiho.com/set/tvbaby/34.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:i:/gi, "<img src='http://emo.huhiho.com/set/tvbaby/22.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:j:/gi, "<img src='http://emo.huhiho.com/set/tvbaby/12.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:k:/gi, "<img src='http://emo.huhiho.com/set/tvbaby/6.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:l:/gi, "<img src='http://emo.huhiho.com/set/tvbaby/3.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:m:/gi, "<img src='http://emo.huhiho.com/set/tvbaby/73.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:n:/gi, "<img src='http://emo.huhiho.com/set/tvbaby/57.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:o:/gi, "<img src='http://emo.huhiho.com/set/tvbaby/18.gif' alt='' width='40' class='smiley'/>");
c.item(i).innerHTML = _str;
}
}
}

*Perhatikan file js diatas, tulisan yang berwarna biru, harus sama persis dengan tulisan warna merah, begitu juga sebaliknya. jadi, jika yang berwarna biru di tambah dengan emoticon yang baru, tulisan yang berwarna merah juga harus di tambah dengan url yang sama persis.




2. HOSTING FILE JAVASCRIPT ITU.
caranya ada pada postingan kemarin yang berjudul hosting file javascript dengan google




3. BUAT SEBUAH DOKUMEN DI NOTEPAD (BUKAN FILE JS)
silahkan buat dokumen dengan isi sebagai berikut

<b><img height='50' src='http://emo.huhiho.com/set/tvbaby/74.gif' width='50'/>
:a:
<img height='50' src='http://emo.huhiho.com/set/tvbaby/71.gif' width='50'/>
:b:
<img height='50' src='http://emo.huhiho.com/set/tvbaby/67.gif' width='50'/>
:c:
<img height='50' src='http://emo.huhiho.com/set/tvbaby/60.gif' width='50'/>
:d:
<img height='50' src='http://emo.huhiho.com/set/tvbaby/46.gif' width='50'/>
:e:
<img height='50' src='http://emo.huhiho.com/set/tvbaby/40.gif' width='50'/>
:f:
<img height='50' src='http://emo.huhiho.com/set/tvbaby/39.gif' width='50'/>
:g:
<img height='50' src='http://emo.huhiho.com/set/tvbaby/34.gif' width='50'/>
:h:
<img height='50' src='http://emo.huhiho.com/set/tvbaby/22.gif' width='50'/>
:i:
<img height='50' src='http://emo.huhiho.com/set/tvbaby/12.gif' width='50'/>
:j:
<img height='50' src='http://emo.huhiho.com/set/tvbaby/6.gif' width='50'/>
:k:
<img height='50' src='http://emo.huhiho.com/set/tvbaby/3.gif' width='50'/>
:l:
<img height='50' src='http://emo.huhiho.com/set/tvbaby/73.gif' width='50'/>
:m:
<img height='50' src='http://emo.huhiho.com/set/tvbaby/57.gif' width='50'/>
:n:
<img height='50' src='http://emo.huhiho.com/set/tvbaby/18.gif' width='50'/>
:o:
</b>

*warna merah adalah URL gambar, harus sama dengan yang di file javascript tadi
warna biru adalah kode yang ingin di tampilkan di kotak komentar, juga harus sama dengan di javascript


4. PASANG DI KOTAK KOMENTAR
1. login ke blogger
2. masuk ke tata letak (layout)
3. masuk ke edit html. jangan lupa di centang
4. cari kode </body>
5. letakan kode di bawah ini, di atas kode </body>

<script src='http://sites.google.com/site/egablogspot/javascript/Emoticon-TV.js' type='text/javascript'/>

*warna merah ganti dengan tempat kamu menyimpan file js tadi

6. cari kode di bawah ini:
<b:if cond='data:post.embedCommentForm'>


Letakan kode yang kamu simpan di notepad tadi di atas kode <b:if cond='data:post.embedCommentForm'>


GIMANA??? PUSING TUJUH KELILING GAK???? AKU PERTAMA JUGA PUSING BANGET, TAPI SETELAH BELAJAR, AKHIRNYA BISA JUGA. SEMOGA BERHASIL
By On:
Tags: ,

18 komentar:

  1. van5 Februari 2010 pukul 21.22

    manteppp dehhh...
    bisa dikreasi sendiri...

    BalasHapus
  2. van5 Februari 2010 pukul 21.35

    ngetes dulu ah...:c:
    :i:
    :n:

    BalasHapus
  3. akhatam6 Februari 2010 pukul 19.52

    Wih Lucu juga yak kalo komentar di kasih emotion.. BoleH deh Triknya Sob!!

    BalasHapus
  4. Berita Bola7 Februari 2010 pukul 08.54

    mantab sob...ilmu yg keren
    :f:

    BalasHapus
  5. adminsc7 Februari 2010 pukul 22.03

    dapat ilmu baru ini.... :d:

    BalasHapus
  6. Unknown8 Februari 2010 pukul 18.57

    nek pengen ra nggae hosting, karek nambahi script iki ga!:

    <script type='text/javascript'>
    //<![CDATA[

    isi script

    //]]>
    </script>

    :o:

    BalasHapus
  7. rental mobil9 Februari 2010 pukul 10.39

    trims frenn
    sangat bermanfaat buat blog koment

    BalasHapus
  8. EgaBlogSpot10 Februari 2010 pukul 06.19

    @yuzrond: suwun zrond, tapi aku pilih nggawe hosting, ben ketok rapi :e:

    BalasHapus
  9. Anonim18 Februari 2010 pukul 02.32

    :p:test

    BalasHapus
  10. Endi16 Maret 2010 pukul 23.04

    nais info gan, tp di t4 q ga jalan :h:....

    BalasHapus
  11. Lee18 Maret 2010 pukul 16.11

    aku udah ikutin caranya, tapi masih gak bisa juga nih.. yang salah apanya yah.. :i:

    BalasHapus
  12. subtitlefilm3 April 2010 pukul 03.20

    kok di coba di bolg wa ga tampil ikon-nya yach, cuma code huruf aja, pdhal dah di ikutin semuanya :o:

    BalasHapus
  13. Ega Priatma3 April 2010 pukul 05.53

    @aubtitlefilm: boleh minta alamat e-mail-nya gak?:g:
    file js-nya mas salah deh, tolong di telitiin banget mas. :f:

    BalasHapus
  14. Unknown21 April 2010 pukul 14.30

    kuq punya gw gagal yak?? padahal dah ikutin step by step :h:

    BalasHapus
  15. Ega Priatma21 April 2010 pukul 14.38

    @adjie: anda gagal waktu membuat-nya atau waktu di pasang di blog?

    BalasHapus
  16. rifweb13 Mei 2010 pukul 20.13

    Terimakasih atas infonya Sob,,, Sya jadi mengerti bagaimana membuat emo.js!

    Salam Kenal

    [rifweb]

    BalasHapus
  17. ntiems18 Juni 2010 pukul 15.13

    thanks sob tutornya...gue pake nih!!!

    BalasHapus
  18. Yuli Panca23 Juni 2010 pukul 14.17

    aku coba mas... memang agak puuuusing ni...

    BalasHapus

Langganan: Posting Komentar (Atom)