Emoticon Blogger Otomatis dengan JQuery

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 Template kemudian klik Edit HTML dan klik Lanjutkan:

Temukan kode ini:

</body>

Salin kode di bawah ini dan letakkan di atasnya:

<style type='text/css'>
.emoWrap {
  padding:10px 14px;
  color:black;
  font:bold 12px Tahoma,Arial,Sans-Serif;
  text-align:center;
}

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

input.emoKey {
  border:1px solid #ccc;
  background-color:white;
  font:bold 11px Arial,Sans-Serif;
  padding:1px 2px;
  margin:0px 0px 0px 2px;
  color:black;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![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='http://externalproject.googlecode.com/svn/trunk/eks/js/emo.auto.js' type='text/javascript'></script>

Klik Simpan Template dan lihat hasilnya.

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 div.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 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, maka 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 kitalah 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, "' />")
);