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