Tuesday, October 27, 2009

CARA MENGEDIT SMILEY EMOTION DI ATAS KOTAK KOMENTAR...

Bookmark and Share

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

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

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

MySpace
...Akhirnya PR-nya gw Kerjakan jg...

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.

Emoticon : Untuk menyisipkan emoticon dalam komentar, silahkan klik pada emoticons icon yang tersedia dibawah ini untuk melihat kodenya lalu tinggal di copy dan di paste [ sisipkan ] kodenya ke dalam komentar.