Emoticon Blogger Otomatis dengan jQuery

Tabel Konten
  1. Lebih Jauh Lagi 
  2. Bagaimana Manipulasi ini Bekerja? 
jQuery Auto Emoticons for Blogger
Emoticon otomatis untuk komentar Blogger

Saya baru memutuskan bahwa eksperimen ini telah berhasil sekitar satu hari yang lalu (sepertinya begitu). Ini adalah fasilitas emoticon otomatis yang akan mengubah simbol-simbol seperti :), :(, dan yang lainnya menjadi gambar tertentu yang telah ditentukan. Saya menggunakan jQuery karena mungkin konsep emoticon dengan jQuery belum ada. Dan juga, lagipula Saya belum begitu berbakat untuk menuliskan kode dengan JavaScript metah. Meskipun di luar sana sudah ada beberapa tutorial sejenis misalnya Add Yahoo Smiley Emoticons on Blogger Comment, tapi Saya hanya ingin memberikan sesuatu yang sedikit berbeda dan dengan proses instalasi yang sangat mudah.

Untuk membuatnya, pertama-tama masuklah ke menu Tema kemudian klik Edit HTML dan klik Lanjutkan:

Edit HTML Blogger
Mengedit HTML

Temukan kode ini:

</body>

Salin kode di bawah ini dan letakkan di atasnya:

<style>
.emoWrap {
  background-color:#EEDE86;
  border:2px solid #D3BA59;
  padding:10px 14px;
  color:black;
  font:normal bold 12px/normal Tahoma,Verdana,Arial,Sans-Serif;
  text-align:center;
}

.emo,
.emoKey {
  display:inline-block; /* Penting! */
  *display:inline;
  vertical-align:middle;
}

.emoKey {
  border:1px solid #ccc;
  background-color:white;
  font:normal bold 11px/normal Arial,Sans-Serif;
  padding:1px 2px;
  margin:0 0 0 2px;
  color:black;
}
</style><script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script><script>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
    putEmoAbove = "#comment-editor",
    emoMessage = "Untuk menyisipkan emoticon setidaknya Anda harus menambahkan satu spasi di awal simbol.";
//]]>
</script>
<script src='//cdn.rawgit.com/tovic/dte-project/0ef9de902cf286a77272f9b3c6f8168c17ab61c6/jquery-emoticons.js'></script>

Klik Simpan Tema dan lihat hasilnya.

Kode yang Saya beri garis bawah adalah jQuery. Jika tema Anda sudah dilengkapi dengan jQuery, singkirkan kode tersebut!


Lebih Jauh Lagi 

Di situ terdapat setidaknya tiga variabel untuk pengaturan lanjutan:

  • emoRange digunakan untuk menentukan daerah mana saja yang akan dikenai manipulasi ini. Pada opsi di atas Saya menargetkan manipulasi pada elemen p yang berada di dalam elemen #comments dan juga pada elemen baris emoticon utama. Anda juga bisa menargetkannya pada elemen lain, misalnya pada posting. Untuk memberlakukan manipulasi ini pada posting, cukup tambahkan selektor .post-body pada variabel tersebut dengan memisahkannya menggunakan tanda koma.
  • putEmoAbove digunakan untuk menentukan di mana (di atas elemen apa) jQuery harus meletakkan daftar emoticon. Di sini Saya menuliskan nilainya pada #comment-editor untuk meletakkannya tepat di atas formulir komentar. Terkadang mungkin ini tidak berhasil. Anda harus mencoba untuk mengubahnya dengan div.comment-replybox-thread atau yang lainnya sebagai elemen sasaran. Intinya adalah, carilah elemen formulir komentar pada blog Anda dan temukan ID atau kelasnya sebagai petunjuk peletakkan daftar emoticon.
  • emoMessage digunakan untuk menentukan pesan yang akan muncul saat pertama kali pengunjung mengeklik salah satu emoticon. Anda bisa mengubah pesan itu sesuka hati.

Bagaimana Manipulasi ini Bekerja? 

Pada dasarnya Saya hanya menggunakan regex sederhana untuk mencari format teks tertentu. Dan dengan menggunakan fungsi .replace() Saya mengubah setiap susunan karakter yang cocok dengan elemen <img> dengan alamat gambar tertentu.

Sebagai contoh, Saya akan mengubah teks :) menjadi <img src='smile.gif'>. Maka yang Saya butuhkan hanyalah dua buah fungsi jQuery yaitu .html() untuk menyalin dokumen dan .replace() untuk mengubah teks/karakter tertentu di dalam dokumen:

$('body').html($('body').html().replace(/\s:\)/g, " <img src='smile.gif' />"));

Kode di atas akan mengubah semua karakter dengan format “satu spasi di depan + simbol :)” menjadi elemen <img src='smile.gif'>.

Dalam regular expression, karakter spasi diwakili dengan simbol \s. Dan juga, karena simbol ) merupakan salah satu karakter khusus dalam regex, oleh karena itu kita harus menonaktifkan karakter tersebut dengan cara menuliskan karakter \ di depannya, dengan begitu komputer tidak akan membaca karakter tersebut sebagai fungsi, melainkan sebagai teks biasa.

g adalah global, artinya bahwa fungsi ini akan mencari semua karakter yang cocok tanpa terkecuali kemudian dia akan mengubahnya menjadi elemen gambar.

Dalam forum-forum tertentu mungkin Anda juga akan melihat peraturan yang berbeda untuk menyisipkan gambar, misalnya seperti ini:

[img]emoticon.gif[/img]

Tidak ada perbedaan dengan semua itu. Pada dasarnya kita lah yang membuat peraturan. Dalam metode penyisipan emoticon yang ke dua, Anda harus mengubah baris karakter tersebut menjadi elemen <img> dengan nilai src berupa teks yang berada di antara simbol [img]...[/img].

Dalam jQuery kita bisa menuliskannya seperti ini:

$('body').html(
    $('body').html()
        .replace(/\[img\]/g, "<img src='")
            .replace(/\[\/img\]/g, "' />")
);

Coba Sendiri


Sumber emoticon: Emoticons4u

197 Komentar

  • Randy

    bang mantap nih anyway biar link hdup terhapus otomatis gimana nihh kodenya??

  • MUX SPARROW

    \o/ mantap, Gan! tutorial emot yang inovatif.. :-bd

  • MUX SPARROW

    @MUXLIMO

    Btw, Gan.. kalau platform blogspot itu memang gak bisa ya bikin emotikon yang sistem onclick seperti di wordpress??

  • Unknown

    WEWWW Kerennnnn HOREEEEEEE Aku Seneng \o/

  • Taufik Nurrohman

    @randy yang penting share Saya cuma menggunakan JQuery .remove() kemudian menargetkan elemen paragraf di dalam komentar:

    $(function() {
    $('#comments p').find('a').remove();
    });
  • Taufik Nurrohman

    @MUXLIMOPertanyaan bagus :-bd Kendalanya ada pada formulir komentar Blogger yang hanya menggunakan <iframe> sehingga Saya tidak bisa melakukan apa-apa terhadap elemen itu. Seandainya formulir komentar Blogger adalah elemen nyata yang diletakkan di dalam template, mungkin Saya bisa mengakses elemen tersebut dan menyisipkan emoticon dengan menggunakan manipulasi .append(), .val() atau semacamnya.

  • Taufik Nurrohman

    @system of blog \o/ \o/ \o/ \o/ \o/ \o/ \o/

  • MUX SPARROW

    @Taufik Nurrohman
    Ooh.. gitu ya, Gan.. pantesan saya dari dulu cari2 di seantero jagad blogger sampe tanya sana-sini gak dapet yang seperti di wp. sesuai dugaan ane, Gan.

    Makasih banyak, Gan.. :-bd Di antara semua tutor yang ane tanya, cuma Agan yang baek 0:) mau jelasin penyebabnya. :-bd

    Saya doain moga Agan makin keren dan makin banyak rezekinya. Amiin. :)

  • Taufik Nurrohman

    @MUXLIMO Amiiinn... ya robbal alamiinn... ^_^

  • Yopi Hasopa

    Mantapp gan, langsung saya coba :-bd

  • Putra

    kalau pakai treded coment letak nya dimana yah?? 7:(

  • Taufik Nurrohman

    @Alam Perwira Sama saja. Saya sudah mengetesnya.

  • Dixy

    @Taufik Nurrohman letaknya kok ada di bawah form komentar? (kalau postingannya udah ada komentar) :/

  • Dixy

    @system of blog gila ni orang :p

  • Taufik Nurrohman

    @KIDFiveThree Coba ganti selektor ini:

    putEmoAbove = "iframe#comment-editor"

    menjadi seperti ini:

    putEmoAbove = "div.comment-replybox-thread, div.comment-replybox-single"
  • Putra

    @Taufik Nurrohmanwakaka jadi berdobel dobel :p

  • Taufik Nurrohman

    @Alam Perwira Hahaha... :D \o/ \o/ \o/ \o/ \o/ \o/ \o/
    Kalau begitu ambil yang pertama saja:

    putEmoAbove = "div.comment-replybox-thread"

    Ngomong-ngomong, screenshootmu gede banget!!! ~x(

  • Dixy

    @Taufik Nurrohman kalo yg ini malah gak muncul kalo belum ada komentarnya..

    mending pake form komentar seperti punya sobat Taufik Nurrohman ini.. :D

  • Dixy

    @Taufik Nurrohman AL-FATIHAH....!! **p

  • Beben Koben

    sudah jd arsip kalau sy mslh emoticon mah :D
    http://beben-koben.blogspot.com/2011/03/emoticon-jquery-for-blogger.html
    seabrek-abrek dah trik emot mah :p

  • admin

    mas kalo mau menghilangkan alert message nya gimana??

  • MUX SPARROW

    :'( udah 2 hari 2 malem coba edit javascript emotikon punya
    Agan supaya kode pemanggilannya :1 dst dan gambar emotnya dituker pake onion head yang ane pake di [pramuxlair.blogspot.com] tp gagal molo! :'( kadang gambarnya muncul; kadang enggak, kadang emot yang muncul ama kode yang diketik beda.. arrghh! pls, Gan.. bantuin.. biar blog ane bisa idup lagi dengan postingan2 baru :'(

  • Taufik Nurrohman

    @MUXLIMO Kalau metodenya cuma pakai angka, asalkan salah satu sudah berhasil:

    emo(/\s:1/g, "URL-gambar1.gif", ":1");

    yang lain tinggal mengikuti:

    emo(/\s:2/g, "URL-gambar2.gif", ":2");
    emo(/\s:3/g, "URL-gambar3.gif", ":3");
    emo(/\s:4/g, "URL-gambar4.gif", ":4");

    Setidaknya cuma sampai angka sembilan. Kalau sudah ke angka puluhan biasanya agak aneh hasilnya. Saya masih belajar regex hehe... :p

    • Unknown

      om bisa tidak kalo metode nya diulang,sepeti in jadi nya:
      emo(/\s:8/g, "URL-gambar2.gif", ":8");
      emo(/\s:9/g, "URL-gambar3.gif", ":9");

      selanjutnya:
      emo(/\s:8:/g, "URL-gambar4.gif", ":8:");
      emo(/\s:9:/g, "URL-gambar3.gif", ":9:");

      atau membuat nya seperti pada forum...
      contoh:
      emo(/\s:senyum/g, "URL-gambar2.gif", ":8");
      emo(/\s:9/g, "URL-gambar3.gif", ":senyum");

      • Taufik Nurrohman

        Kalau kodenya mirip-mirip, lebih baik utamakan yang lebih banyak karakternya terlebih dahulu, lalu lanjutkan dengan karakter yang lebih sedikit:

        emo(/\s:8:/g, "URL-gambar4.gif", ":8:");
        emo(/\s:9:/g, "URL-gambar3.gif", ":9:");
        emo(/\s:8/g, "URL-gambar2.gif", ":8");
        emo(/\s:9/g, "URL-gambar3.gif", ":9");
  • MUX SPARROW

    @Taufik Nurrohman

    hoho! makasih, Gan.. udah ane coba 14 emot [pake kode a1 dst., b1 dst. di pramuxlair.blogspot]. :Q
    cuman ada bug-nya, Gan.. yang a1 gak bisa muncul2 emotnya. :(

    tanya juga, Gan:
    mungkin gak ukuran emot ane yang aslinya gede gitu dikecilin jadi 30px seperti di blog asli ane? *moga2 bisa.. **p

    ane bakal masih banyak tunya-tanya ni Gan... jangan dulu :-a ya.. tar aja :-a -nya kalo udah sukses ane terapin di blog :D

  • Taufik Nurrohman

    @MUXLIMO a1 gak muncul itu pasti cuma kesalahan kecil. Memperkecil gambar bisa, kalau di kode sumber emotikon bergambar besar itu ada kelasnya tinggal diubah ukuran lebar dan tingginya, tapi ini sama sekali tidak akan mengurangi beban muat gambar, cuma mengubah ukurannya saja. Kalau di emotikon Saya memakai kelas emo, jadinya ya begini:

    img.emo {
    width:30px;
    height:30px;
    }

    Tunya-tanya nggak masalah asal masih di tempat yang sama, biar pikirannya nggak kesasar ke mana-mana hehe... @@,

  • Taufik Nurrohman


    Pembaharuan: Menambah beberapa emotikon baru :-d

  • Taufik Nurrohman

    @MUXLIMO a1 gagal tampil karena tidak ada spasi di depannya. Coba tambahkan satu spasi di depan simbol, pasti jadi! Sama seperti yang Saya tuliskan pada kotak peringatan. Sebenarnya ini memang agak merepotkan, terutama saat seseorang mencoba "menggambar" emotikon di awal kata. Tapi ini demi keamanan:

    Sesuatu hal yang tidak diinginkan bisa saja terjadi karena belum tentu karakter-karakter yang kita tulis dimaksudkan sebagai emotikon. Saya pikir, kebiasaan umum yang menjadi harafiah emotikon adalah spasi di depan sekelompok karakter untuk memastikan bahwa ini benar-benar menunjukkan gambaran ekspresi wajah. Setiap kali ada spasi di depan simbol, itu akan menjadi pelolos syarat, tapi jika tidak ada spasi di depan, jangan diubah karena itu bukan emotikon! :W

    Jadi Saya memberikan persyaratan berupa satu spasi di depan kelompok karakter emotikon. Dalam hal ini adalah kode \s :yaya:
    Bisa dilihat bahwa kebanyakan emotikon yang dituliskan pengunjung di awal kata gagal membentuk gambar, itu terjadi karena tidak ada spasi di depannya <=)

  • MUX SPARROW

    @Taufik Nurrohman

    \o/ WOW! makasih tambahan kode CSS-nya, Gan..! Siap laksanakan. alhamdulillah si Agan masih akan selalu sedia membantu menjuwab-jawab tunya-tanya saya di satu tempat.
    :-bd <3 :D

  • chuppie

    saya blum bisa..
    :'(

  • chuppie

    bisa bisa .. :*
    makasih.. :)

  • Y.K. Priandanu

    mas, kalo emot pnya mas kok cuma sedikit,
    bagi2 dong kodeanya mas :) ;)

  • Taufik Nurrohman

    @Yosse Kurnia Priandanu Sengaja Saya kurangi soalnya kalau kebanyakan nanti isi komentar di blog ini bakalan penuh sama emotikon semua. Lihat aja tuh di atas. Dikasi segini aja sudah bisa serame itu haha :D

  • Y.K. Priandanu

    saya minta kode emot yang sedikit dong mas ^_^ :D

  • Taufik Nurrohman

    @Yosse Kurnia Priandanu Pakai kode ini saja nggak apa-apa. Karena pada dasarnya semua emotikon bisa diklik, maka kita buat saja daftar emotikonnya sendiri. Jadi jumlah emotikon bisa ditentukan sesuka hati:

    Pertama-tama hilangkan elemen bar emotikon dengan mengedit kode CSS .emoWrap di atas menjadi seperti ini:

    .emoWrap {display:none !important;}

    Lalu masuk ke menu Setelan ⇒ Bahasa dan Pemformatan
    Pada bagian Pesan Formulir Komentar paste-kan kode ini:

    <b> :) :( ^_^ :D ;) :-bd :&#39;( :\ :p B) :Q :Ozz 7:( \o/ **p &lt;3 0:) :-a 7:O *fck* x@ X@ ~x( :yaya: =p* Klik untuk melihat kode!</b>
    • Unknown

      maaf mas, saya mau nanya berkaitan dengan kode emo yg dikit itu, tp agak melencen dikit karena aku mau taruh emo nya di dalam formulir pesan komentar... saya udah coba terapkan seperti komen mas diatas tapi ga work yah, emoticon yang muncul pada form pesan komentar hanya dalam bentuk kode-kode saja bukan tampilan gambar emo nya...
      saya coba2 ganti kode putEmoAbove = "#comment-editor", dengan kode putEmoInside = "kode form pesan komentar", ga work juga, hehehe...

      • Taufik Nurrohman

        putEmoAbove itu nama variabel, tidak bisa diganti-ganti. Yang harus diperbaharui itu ada di bagian emoRange, supaya emotikon yang ada di dalam formulir komentar juga bisa ikut masuk di dalam range:
        var emoRange = "#comments p, div.emoWrap, #comment-form, #threaded-comment-form"
  • Y.K. Priandanu

    mas mau tanya, kok pumya saya Pesan Formulirnya berada di bawah kotak komentar ya ? Gimana solusinya mas :D

  • Taufik Nurrohman

    @Yosse Kurnia Priandanu Itu memang bug fitur thread commenting dari Blogger sendiri. Saya masih belum tahu bagaimana cara mengatasinya. Saya harap suatu saat Blogger akan memperbaiki masalah ini.

  • Rosyd Aqbar

    Hasseeekk, Dapet Tutor baru kie bang, BTW, esih mandan bingung nih Kang Tofik, Ada penjelasan singkatnya gk nih ?

  • Taufik Nurrohman

    @Bukan Master Ini penjelasan singkatnya:

    Baca sekali lagi. Kalau belum jelas, baca sekali lagi. Kalau belum jelas, baca sekali lagi. Kalau belum jelas, baca sekali lagi ;)

  • Rosyd Aqbar

    pas saya pasang, trus komentar, gk ada Emonya bang Tofik.

  • Taufik Nurrohman

    @Bukan Master JQuery-nya dobel-dobel. Hapus kode ini (yang di dalam widget) lalu simpan lagi:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

    Setelah itu baru terapkan emotikon ini, tapi kode yang Saya beri garis bawah tidak usah diikutkan.

  • Rizky Wardiansyah

    gan kok contoh emoticonnya ada di bawah comments-form ya? hel me gan cekidot ke blog ane ya :)

  • Taufik Nurrohman

    @Rizky Wardiansyah Coba ganti ini:

    putEmoAbove = "iframe#comment-editor"

    menjadi seperti ini:

    putEmoAbove = "#comment-form"
  • Rizky Wardiansyah

    @Taufik Nurrohmankok malah jadi ilang ya gan? kaya gini

  • Taufik Nurrohman

    @Rizky Wardiansyah Hmmm... Sepertinya memang harus membuat elemen sendiri, khusus untuk meletakkan bar emotikon :gitaris:

  • Unknown

    Mas, misalnya emoticon ini kan backgrounda warna orange, bisa di ganti ga mas taufik, ?
    Trus, , untuk gambar emoticonya bisa di ganti dengan gambar saya, (sebagai contoh misalnya tanda :) nanti akan muncul emöticon milik saya, )
    Mohon pencerahaanya. .
    Matur Nuhun

  • Taufik Nurrohman

    @trii waluyo Bisa, seperti yang selalu MUXLIMO tanyakan di sini, yaitu dengan cara mengubah semua daftar eksekusi fungsinya. Misalnya begini:

    emo(/\s:\)/g, "URL-gambar-emotikonmu.gif", ":)");
    • Unknown

      Berarti untuk ngeditnya,ambil dulu .js nya ya mas, ?
      Ntar kalau sudah diedit taruh di hostingan sendiri ya mas, ?
      Kira-kira begitu ga mas

  • Taufik Nurrohman

    @trii waluyo Betul. Betul. Betul.

    • Unknown

      Dugaan saya betul :-D

      Oh y mas, kalo Emoticon yg ini kan tanda :) bisa berubah otomatis didalam komentar,
      Lah, pertanyaan saya :
      1. Apakah tanda :) didalam postingan apa juga bisa berubah menjadi emoticon, ?

      2. Misalnya jawabanya Tidak, apakah bisa simbol :-) bisa berubah menjadi emoticon di dalam postingan.? Dan caranya gimana mas, ?

      Terima kasìh :-P

  • Taufik Nurrohman

    @trii waluyo Tanda :) di dalam postingan bisa berubah menjadi emotikon. Tambah saja selektor JQuery di dalam variabel emoRange menjadi seperti ini:

    var emoRange = "#comments p, div.emoWrap, div.post-body"

    Nanti emotikon akan diberlakukan juga ke dalam posting secara otomatis karena selektor div.post-body akan menyeleksi tubuh posting.
    Simbol :-) juga bisa berubah menjadi emotikon, tapi regexnya harus diubah dulu menjadi seperti ini:

    emo(/\s:\-\)/g, "URL-gambar-emotikonmu.gif", ":-)");
  • Unknown

    @Taufik Nurrohman mas,, aku ga jadi lah..... tolong liat javascript aku ya mas nie alamatnya http://goo.gl/aagKF

    ko gagal ya mas,,, ???
    ga jadi koh,,, coba liat blog aku ya mas.... :'(

  • Taufik Nurrohman

    @trii waluyo Banyak simbol yang salah di dalam mas. Coba ini:

    /**
    * Simple regex experiment to create an automatic emoticons modified by Mob3se7en
    * Visit: http://mob3se7en.blogspot.com
    * Original: http://hompimpaalaihumgambreng.blogspot.com
    */
    $(function() {
    // Append an emoticon bar before comment-form
    $(putEmoAbove).before('<div class="emoWrap"> :) ;) B) :( :&#39;( :)): :| :~ :@ :? x( :p :o :* :D</div>');
    var emo = function(emo, imgRep, emoKey) {
    $(emoRange).each(function() {
    $(this).html($(this).html()
    .replace(/<br>:/g, "<br> :")
    .replace(/<br>;/g, "<br> ;")
    .replace(/<br>=/g, "<br> =")
    .replace(/<br>\^_\^/g, "<br> ^_^")
    .replace(/<br>\^o\^/ig, "<br> ^o^")
    .replace(emo, " <img src='" + imgRep + "' class='emo delayLoad' alt='" + emoKey + "' />"));
    });
    }
    emo(/\s:\)+/g, "http://lh4.googleusercontent.com/-rpctlZZPrX8/T6NQj_yVWWI/AAAAAAAAAcc/CuElXy44_-o/s128/Flirty.gif", ":)");
    emo(/\s;\)+/g, "http://lh5.googleusercontent.com/-UxYqzFTKgME/T6NQpZCQGRI/AAAAAAAAAdc/bjWN-MznbE0/s128/Wink.gif", ";)");
    emo(/\sB\)/ig, "http://lh5.googleusercontent.com/-0hJwVLhHspU/T6NQj4H-pkI/AAAAAAAAAck/WGSRK6YK2Xc/s128/Glasses.gif", "B)");
    emo(/\s:\(/g, "http://lh6.googleusercontent.com/-7Ek34gqKjzA/T6NQnwLPfHI/AAAAAAAAAdI/WALVNDJYab0/s128/Sad.gif", ":(");
    emo(/\s:&#39;\(/g, "http://lh3.googleusercontent.com/-PChZ52qAc5c/T6NQiun5CxI/AAAAAAAAAcI/qbMCrPN5mJs/s128/Crying.gif", ":&#39;(");
    emo(/\s:\)\):/ig, "http://lh6.googleusercontent.com/-TIeUpNlgrTg/T6NQnDAqmEI/AAAAAAAAAdM/7eQs6Qovh90/s128/Happy.gif", ":)):");
    emo(/\s:\|/ig, "http://lh3.googleusercontent.com/-E8zx2DnmvF8/T6NQlHIH8CI/AAAAAAAAAc0/DAX16CYZ_T0/s128/Indifferent.gif", ":|");
    emo(/\s:\~/g, "http://lh3.googleusercontent.com/-q1OuJImqar0/T6NQn7L0nNI/AAAAAAAAAdQ/ka6i25MgnXU/s128/Sceptical.gif", ":~");
    emo(/\s:@/g, "http://lh3.googleusercontent.com/-tpO1gtBKK9Q/T6NQjBK7B6I/AAAAAAAAAcQ/f7-2VYd32wg/s128/Devil.gif", ":@");
    emo(/\s:\?/g, "http://lh6.googleusercontent.com/-KTEKKcMG61w/T6NQiooAkxI/AAAAAAAAAcM/GXYFqzRPjcQ/s128/Confused.gif", ":?");
    emo(/\sx\(/g, "http://lh4.googleusercontent.com/-c1Y1pIkmVCE/T6NQiegHjdI/AAAAAAAAAcE/FV-zEoedrho/s128/Angry.gif", "x(");
    emo(/\s:p/g, "http://lh3.googleusercontent.com/-FBazI6RPlcI/T6NQo-j8zPI/AAAAAAAAAdg/p_0kpu1-oRA/s128/Tongue.gif", ":p");
    emo(/\s:o/g, "http://lh6.googleusercontent.com/-WQW3U_juaYA/T6NQrP0CGzI/AAAAAAAAAd0/9NbYeCvXlpU/s128/Wow.gif", ":o");
    emo(/\s:\*/g, "http://lh3.googleusercontent.com/-fMiHFqG8nQc/T6NQleD-wbI/AAAAAAAAAc4/m3AW7-3SvIo/s128/Kiss.gif", ":*");
    emo(/\s:D/g, "http://lh5.googleusercontent.com/-PV96j0NX-RA/T6NQm7pW62I/AAAAAAAAAdA/wVvJpV9MdHE/s128/Laughter.gif", ":D");
    // Show alert one times!
    $('div.emoWrap').one("click", function() {
    alert(emoMessage);
    });
    // Click to show the code!
    $('img.emo').css('cursor', 'pointer').live("click", function(e) {
    $('input.emoKey').remove();
    $(this).after('<input class="emoKey" type="text" size="' + this.alt.length + '" value=" ' + this.alt + '" />');
    e.stopPropagation();
    });
    $('input.emoKey').live("click", function() {
    $(this).focus().select();
    });
    });

Komentar telah ditutup.