Cara Mengedit Smiley Emution Di Atas Kotak Komentar

Postingan ini saya buat dikarenakan ada sobat blogger yang bertanya kepada saya.. "sob.. gimana cara menampilkan emotion sebelum atau di atas kotak komentar ???".. tapi baru sekarang saya jawab karena saya pikir sudah banyak sobat blogging lain yang sudah memposting membahas mengenai trik ini.. dan sudah saya kasih link sobat yang bertanya tersebut ke blog yang sudah pernah membahasnya.. Kemudian dia tanya lagi kayak gini "Boss..tapi postingan sobat yang lain kurang jelas langsung dikasih url sripts java (.js) saja.. karena saya mau menganti sendiri emotion smiles dengan emo yang lainnya..tolong dong ajarin !!!" .. WadoOh kayaknya malah jadi PR nih buat saya..

Ok.. Langsung saja sob.. baca dan pahami langkah-langkah berikut ini ;

1. Carilah dan kumpulkan dahulu emotion yang akan kamu gunakan.. kemudian upload-lah ke PhotoBucket dan buatlah Account di Photobucket terlebih dahulu.. baru kamu bisa men-upload gambar EMO kamu tadi..

2. DownloadLah File Java Scripts ini >> DownLoad NoW Andi_Wong_OniOn_EMO.js .. file ini yang nanti akan kamu edit untuk menganti emotion yang kamu inginkan..

Seperti Gambar ini icon File format .js akan terlihat jika di PC-mu sudah terinstal Program Macromedia Dreamweaver 8

Jika malas mendownload dibawah ini saya kasih Scripts File .js -nya..

function showsbtext(id,index) {
var bookmarktext=document.getElementById(id);
var sbValues= new Array();
sbValues[0] = 'Bookmark:';
sbValues[1] = 'Add to <strong>Digg</strong>';
sbValues[2] = 'Add to <strong>Delicious</strong>';
sbValues[3] = 'Add to <strong>Blinklist</strong>';
sbValues[4] = 'Add to <strong>Yahoo Web</strong>';
sbValues[5] = 'Add to <strong>Netvouz</strong>';
sbValues[6] = 'Add to <strong>Ma.gnolia</strong>';
sbValues[7] = 'Add to <strong>Fark</strong>';
sbValues[8] = 'Add to <strong>Furl</strong>';
sbValues[9] = 'Add to <strong>Technorati</strong>';
sbValues[10] = 'Add to <strong>Simpy</strong>';
sbValues[11] = 'Add to <strong>Spurl</strong>';
sbValues[12] = 'Add to <strong>Newsvine</strong>';
sbValues[13] = 'Add to <strong>Blinkbits</strong>';
sbValues[14] = 'Add to <strong>Smarkings</strong>';
sbValues[15] = 'Add to <strong>Segnalo</strong>';
sbValues[16] = 'Add to <strong>De.lirio.us</strong>';
sbValues[17] = 'Add to <strong>Reddit</strong>';
sbValues[18] = 'Add to <strong>Wists</strong>';
sbValues[19] = 'Add to <strong>Google</strong>';
document.getElementById(bookmarktext.id).innerHTML = sbValues[index];
}
document.getElementsByClassName = function(clsName){
var retVal = new Array();
var elements = document.getElementsByTagName("*");
for(var i = 0;i < elements.length;i++){
if(elements[i].className.indexOf(" ") >= 0){
var classes = elements[i].className.split(" ");
for(var j = 0;j < classes.length;j++){
if(classes[j] == clsName)
retVal.push(elements[i]);
}
}
else if(elements[i].className == clsName)
retVal.push(elements[i]);
}
return retVal;
}

function addSmiley(dummy)
{
var d = [], i=0, def = ['post-body','entry-content','comment-body'];

for(i=0;i<def.length;i++)
{
var content = document.getElementsByClassName(def[i]);
for(var j=0;j<content.length;j++)
d.push(content[j]);
}

for(i=0;i<arguments.length;i++)
{
var content = document.getElementsByClassName(arguments[i]);
for(var m=0;m<content.length;m++)
d.push(content[m]);
}

for(var i=0;i<d.length;i++)
{

d[i].innerHTML = d[i].innerHTML.replace (/\/senyum/ig,"<img style='border: 0; padding:0' src='http://i466.photobucket.com/albums/rr22/wong284/onion%20emo/senyum.gif'/>")
d[i].innerHTML = d[i].innerHTML.replace (/\/kagum/ig,"<img style='border: 0; padding:0' src='http://i466.photobucket.com/albums/rr22/wong284/onion%20emo/Kagum.gif'/>")
d[i].innerHTML = d[i].innerHTML.replace (/\/sip/ig,"<img style='border: 0; padding:0' src='http://i466.photobucket.com/albums/rr22/wong284/onion%20emo/sip.gif'/>")
d[i].innerHTML = d[i].innerHTML.replace (/\/trims/ig,"<img style='border: 0; padding:0' src='http://i466.photobucket.com/albums/rr22/wong284/onion%20emo/thxmale.gif'/>")
d[i].innerHTML = d[i].innerHTML.replace (/\/bingung/ig,"<img style='border: 0; padding:0' src='http://i466.photobucket.com/albums/rr22/wong284/onion%20emo/bingung.gif'/>")
d[i].innerHTML = d[i].innerHTML.replace (/\/pusing/ig,"<img style='border: 0; padding:0' src='http://i466.photobucket.com/albums/rr22/wong284/onion%20emo/Pusing.gif'/>")

}
}

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}

addLoadEvent(function(){
addSmiley();
});

Silahkan di Copas di Notepad dan simpan dalam bentuk format .js..

File name di isi dengan Contoh_1.js (ketikan .js -nya) dan Save as type pilih All Files

3. Bukalah File yang kamu Download tadi "Andi_Wong_OniOn_EMO.js" dengan menggunakan Notepad .. bisa juga kamu ganti nama File .js-nya dengan Nama Kamu atau nama lainnya terserah kamu..tapi biarkan dalam format .js ...

4. Jika sudah.. editlah Java Scripts berikut ini... Lalu kamu Save namun tetap biarkan dalam format.js

d[i].innerHTML = d[i].innerHTML.replace (/\/senyum/ig,"<img style='border: 0; padding:0' src='http://i466.photobucket.com/albums/rr22/wong284/onion%20emo/senyum.gif'/>")
d[i].innerHTML = d[i].innerHTML.replace (/\kagum/ig,"<img style='border: 0; padding:0' src='http://i466.photobucket.com/albums/rr22/wong284/onion%20emo/Kagum.gif'/>")
d[i].innerHTML = d[i].innerHTML.replace (/\/sip/ig,"<img style='border: 0; padding:0' src='http://i466.photobucket.com/albums/rr22/wong284/onion%20emo/sip.gif'/>")
d[i].innerHTML = d[i].innerHTML.replace (/\/trims/ig,"<img style='border: 0; padding:0' src='http://i466.photobucket.com/albums/rr22/wong284/onion%20emo/thxmale.gif'/>")
d[i].innerHTML = d[i].innerHTML.replace (/\/bingung/ig,"<img style='border: 0; padding:0' src='http://i466.photobucket.com/albums/rr22/wong284/onion%20emo/bingung.gif'/>")
d[i].innerHTML = d[i].innerHTML.replace (/\/pusing/ig,"<img style='border: 0; padding:0' src='http://i466.photobucket.com/albums/rr22/wong284/onion%20emo/Pusing.gif'/>")

Biru = Gantilah dengan URL gambar emo.gif kamu..copy-Lah direct Link Gambar animasi eMo yang kamu Upload tadi..
Merah = Gantilah dengan nama (misalnya: senyum) atau simbol (misalnya: :] )

5. UpLoad-lah File Java Scripst kamu tsb ke GoogLe Site atau ke Direct File Hosting seperti fileave.com ...

Buatlah account baru terlebih dahulu baru kamu bisa meng-Upload File .js kamu.. dan ingat kamu harus login minimal 1 bulan sekali agar Account Kamu tidak Terhapus di fileave.com.. Atau bisa juga kamu Upload ke tempat File Hosting lainnya.. kalo Google.pages sih sudah ditutup !

6. Buka Notepad baru tekan Windows+R lalu ketik notepad (agar notepad yg sebelumnya tidak tertutup)..

Copy Scripts dibawah ini.. dan Paste-kan di Notepad yang baru & SimpanLah dengan EMO scripts HTML blog atau dengan nama lain sesukamu..

<center>
<table border='0' width='300'><tr>
<td><img alt='' src='http://i466.photobucket.com/albums/rr22/wong284/onion%20emo/senyum.gif' title='Senyum'/>senyum</td>
<td><img alt='' src='http://i466.photobucket.com/albums/rr22/wong284/onion%20emo/Kagum.gif' title='Kagum'/>kagum</td>
<td><img alt='' src='http://i466.photobucket.com/albums/rr22/wong284/onion%20emo/sip.gif' title='Sip'/>sip</td>
<td><img alt='' src='http://i466.photobucket.com/albums/rr22/wong284/onion%20emo/thxmale.gif' title='Terima Kasih'/>trims</td>
<td><img alt='' src='http://i466.photobucket.com/albums/rr22/wong284/onion%20emo/bingung.gif' title='Bingung'/>bingung</td>
<td><img alt='' src='http://i466.photobucket.com/albums/rr22/wong284/onion%20emo/Pusing.gif' title='Pusing'/>pusing</td>
</tr></table>
</center>

Biru = bisa kamu ganti dengan Left jika ingin merubah posisi emo ke kiri
Merah = ini untuk merapatkan posisi antara eMo dan bisa kamu ubah menjadi 200 atau 500
Hijau = Gantilah dengan url image eMo (.gif) kamu..copy-Lah direct Link Gambar animasi eMo yang kamu Upload tadi..

7. LoginLah ke Blogger.. Tab Tata Letak.. Pilih Edit HTML (centang Expand Template Widget jika diperlukan)..

Cari kode ini </body> ..biasanya terletak di bagian bawah kode HTML TempLate BLog-mu..

lalu Copy Direct Link url Hotlinkfiles dari file Java Scripts kamu di atas kode ini </body>

Contoh : Direct Link Url Hotlinkfiles file .js saya seperti dibawah ini..
<script src='http://www.hotlinkfiles.com/files/2417420_xyqqd/Andi_Wong_OniOn_EMO.js'/>

Kemudian kamu cari kode ini ..
<p class='comment-footer'>
PASTE-kan isi EMO scripts HTML blog tadi di antara kedua kode ini
<b:if cond='data:post.embedCommentForm'>

lalu copy kode Scripts untuk HTML tadi sesudah kode ini <p class='comment-footer'>
8. Jika sudah semua..kLik Simpan TempLate.. Selesai sudah.. Lalu lihatlah perubahan yang tampil di bagian Komentar BloG-Mu..

Contoh Jadi kLik Link ini >> eksperimen284.blogspot.com dan lihatlah di bagian komentarnya..

Note : Bisa kamu kembangkan sendiri Scripts2 di atas.. oprek2lah sesukamu yang kreatif... tambahkan beberapa emo-emo yang bagus2..