Tuesday, October 27, 2009

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 e.

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.



54 comments:

  1. mantap sob aku coba dulu ya untuk blog baru aku makasih sob

    ReplyDelete
  2. keren sob tutorialnya, ntar saya coba deh kapan2

    ReplyDelete
  3. Terimakasih banyak tutorial - nya sobat,

    nice post sobat!!!!!!!

    ReplyDelete
  4. nah yang ini yang saya tunggu - tunggu sob...script emo pada shout widget...
    thank's ya...

    ReplyDelete
  5. @ Asep Canda : eW..bikin Blog baru ya sep.. siip dah ;-)

    @ Ocim : oke.. cobain aja sob kapan2..hehe :-)

    @ blog buat bloggers : sama2 sob.. thx jg krn telah komeng.. sung gw balas komeng sob.. ;-)

    @ Taris : bukan pada shout widget sob tapi emo yg ditampilkan sebelum kotak komentar postingan blog mu.. :-) ntar gw komeng balik sob

    ReplyDelete
  6. salam sahabat
    siip...cocok buat aku yg masih belajar,thnxs ya...good luck

    ReplyDelete
  7. Terima kasih ilmunya. Ahli kode HTML nih

    ReplyDelete
  8. @ Rihardiana : sma2 Dhana..thx krn telah komeng2 sering mampir ya..gw udah komeng duluan di blog mu.. ;-)

    @ Muchlisin : kagak sob masi NewBie gw kalo soal HTML....wkwkwkwk :D

    ReplyDelete
  9. keren sih sob tp ini bikin berat blog kita
    apalagi gw yg inetnya lemot
    hihihih

    ReplyDelete
  10. @ Nada : Bener da... gw aja kagak pasang.. emg berpengaruh ma kecepatan Loading Blog.. hehehe.. gw hanya buat PR-nya aja sob ;-)

    ReplyDelete
  11. sip mas andi komen jadi lebih hidup :D

    ReplyDelete
  12. Wah!!! bagus tuh Q coba. Biar lebih keren, n pengunjung lebih betah bercomment-comment posting!!!!!!!

    ReplyDelete
  13. @ Mas Doyok : Hehe.. hanya buat PR mas.. hanya buat PR .. ;-)

    ReplyDelete
  14. Wah!!! bagus tuh Q coba. Biar lebih keren, n pengunjung lebih betah bercomment-comment posting!!!!!!!

    ReplyDelete
  15. Di blog ini saya banyak dapatkan ilmu. Ini adalah blog masa depan. Share your knowledge for us. Terus berkarya kami menanti. GOD BLESS!

    ReplyDelete
  16. @ Aku Bisa : Coba aj Sob.. siiip :-)

    @ Yogabama : GOD BLESS U Too Bro.. ;-) sharing your knowledge too for us..

    @ Artikel Psikologi : :-) mencoba tuk berbagi pengetahuan sj sob.. maklum gw masih NewBie.. wkwkwkwk ;-)

    ReplyDelete
  17. bagus... udah disenggol kag adsensenya...

    ReplyDelete
  18. @ iNa : okey Na.. :-) thx bgt yaa .. ;-)

    ReplyDelete
  19. Wah boleh juga nih triknya...!!!

    ReplyDelete
  20. waduh,,,
    keren sob!!
    ntar ku coba!!
    thx sobat,,!

    ReplyDelete
  21. btw,,, aku dh pasang linkmu,,,
    link back yah,,,!!

    ReplyDelete
  22. @ Akhatam : hehe.. di cobain aj sob kapan2.. ;-)

    ReplyDelete
  23. @ Jamal-home : ya..di cobain aja sob..ntar gw pasang jg Link Text BloG-Mu ;-)

    ReplyDelete
  24. @ Firex Santos : makasih sob.. Just sharing knowledge.. :-)

    ReplyDelete
  25. info yg keren sob
    ksh tauya kalo ada update terbaru

    ReplyDelete
  26. wah good infoo, kapan-kapan pengen emoticon yg gambarnya presiden sama mentri2nya deh, hahhahahah

    ReplyDelete
  27. keren nich tutor yang gini nich cocok buat pemula seperti saya

    ReplyDelete
  28. keren mas banyakin tutor kayak ginian

    ReplyDelete
  29. @ NaDa : okay nada nanti gw kasih tw kalo ada postingan baru ya.. ;-)

    @ Teplok : waah .. eMo Mentri2 yaa.. boleh juga tuch sarannya.. pasti Lucu.. wkwkwkwk :D

    @ Download Free : :-) ..gw senang jika kamu menyukai tutor ini..

    @ SoloPunya : yups.. gw usahain Mas.. selagi ada waktu luang akan gw posting tutor2 yg lainnya tpi tergantung inspirasi juga.. hehe ;-)

    @ Prafangga Permana : SaLam Kenal juga Sob.. Trims krn telah berkunjung & KomenG.. :-)

    ReplyDelete
  30. ya ini yg roomen cari master,,, makasih uda mau berbagi

    ReplyDelete
  31. Makasih ya bos... kemarin2 masihh sempat make, pas ganti template hilang, dan dah lupa caranya... ntar kalau sempat mau pasang lagi ah..
    sekali lagi makasih ya...

    ReplyDelete
  32. Ini dia yang lagi aku cari2..
    thanks berat bro...

    ReplyDelete
  33. @ romen : iya sob.. sama2. thx jg krn sdh mampir & komen.. ;-)

    @ ica : silahkam ca.. dicoba lagi pasang emo-nya.. :-)

    I2 : sama2 sob..sering2 mampir & komeng ya :-D

    ReplyDelete
  34. terima kasih infonya, mantaplah itu

    ReplyDelete
  35. Oxa > silahkan sob..

    Bang Adhie > sama2 gan..

    ReplyDelete
  36. mantab juga neh,
    mga aja berhasil
    aminn...
    thx gan :D

    ReplyDelete
  37. Indra > cobalah gan.. smoga berhasil ya.. :)

    ReplyDelete
  38. gan klo emoticon d cbox gmana??
    tuh keren bged emotnya kning2
    ;)

    ReplyDelete
  39. indra > cara menganti emo di cbox ada disini gan..silahkan dibaca tutornya -> http://ecaknyo.blogspot.com/2010/02/emo-untuk-shout-cbox.html DAN smiley emo Big smiley-nya -> http://ecaknyo.blogspot.com/2009/10/berbagi-emo-big-smiles.html ..selamat mencoba.. ;)

    ReplyDelete
  40. KRESEKpikiran > di pahami dulu benar2 gan.. :)

    ReplyDelete
  41. This comment has been removed by the author.

    ReplyDelete
  42. wach saya sedang mencari yg kya gni mbah..
    makasih ya...
    dicoba nich mbah..

    ReplyDelete
  43. @eLz.:

    iya sob... saat ini smiley emotion-nya gk akan tampil krn bentrok dg wigdet Follower google.. jd file javascript smiley-nya sy remove dulu.. :)

    ReplyDelete
  44. keren..!!!!!!
    tp ko waktu saya tes commentnya gk muncul emotionnya

    ReplyDelete
  45. kalo gitu kk bisa bantuin saya gk gimana varanya buat emotions kaya kk gitu
    contoh :
    :))
    :)]
    ;))

    ReplyDelete
  46. @dicky:

    kan udah gw posting cara buatnya..coba deh kamu cari dick di bagian tutorial blogku.. oooh soalnya script js smiley nya sngaja gw del..makanya gk tampil.. :D

    ReplyDelete
N.B.
1. Berkomentarlah dengan sopan.
2. Dilarang membuat spam, terutama yang mengandung SARA/ Pornografi/ Judi dan Iklan.