Menambah Fitur Smiley Emoticon Di Atas Kotak Komentar

Ikuti langkah-langkah sbb :

1. Siapkan url emotion yang ingin digunakan.

2. Download file .js ini > Onion_emo.js file ini yang nanti akan kita edit untuk menganti emoticon yang di inginkan..

Atau cukup copas isi kode javascript dibawah ini ke dalam notepad lalu simpan dengan format .js dan nama sesuai keinginan.

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();
});

Ket. 

Copas di notepad dan simpan dalam bentuk format .js. File name di isi dengan contoh_1.js dan save as type pilih All Files.

3. Edit file .js tadi mengunakan notepad.

4. Editlah kode yang ditandai warna seperti dibawah ini & simpan 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, ganti dengan url gambar emo.gif  yang di inginkan.
Merah, ganti dengan nama (misalnya: senyum) atau simbol misalnya: :].


5. Upload file javascriptnya misalnya ke Google Site atau fileave.com.

6. Buka notepad baru tekan windows+R lalu ketik notepad, agar notepad yg sebelumnya tidak tertutup.

Copy kode dibawah ini dan paste di notepad yang baru tadi.

<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, ganti dengan left jika ingin merubah posisi emo ke kiri.
Merah, merapatkan posisi antara emo dan bisa kamu ubah menjadi 200 atau 500.
Hijau, gantilah dengan url image emo (.gif) yang di inginkan.


7. Login ke blogger > tata letak >  edit html, centang expand template widget.

Ctrl+F cari kode </body> lalu copy link url file javascriptnya di atas kode </body>

Contohnya seperti gambar dibawah ini.

Kemudian kamu cari kode berikut ini,
<p class='comment-footer'>
Paste kode emo html tadi di antara kedua kode ini
<b:if cond='data:post.embedCommentForm'>

Seperti gambar dibawah ini.

8. Simpan template dan lihat hasilnya.

Selamat Mencoba.