Emoticon Blogger dengan JQuery

Sunday, December 22, 2013

Seperti yang pernah ditanyakan oleh pengujung Nur Abrar Isa blog tentang memasang emotion pada komentar pada blog ini. Memasang emotion ini sebagai wujud implementasi dari ungkapan yang dituangkan dalam bentuk gambar / image.

Pemsangan ini secara otomatis akan dimunculkan dalam komentar blog Anda, Admin telah kode emotion otomatis yang akan mengubah simbol-simbol seperti :), :(, , dan yang lainnya menjadi gambar tertentu yang telah ditentukan dalam jQuery.

Dan cara penerapannya sangat gampang juga. Anda hanya menyalin kodenya dan disimopan dalam template Anda.

Mengedit HTML

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='https://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='https://cekidot.96.lt/file/js/emotion.js' type='text/javascript'></script>

Klik Simpan Template

Kode yang Admin tandai diatas adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, tidak perlu dipasang atau abaikan saja

Bagaimana Manipulasi ini Bekerja?

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

Sebagai contoh, Admin akan mengubah teks :) menjadi <img src='smile.gif' />. Maka yang Admin 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, "' />")
);

Source » DTE:]

Pasang Iklan Anda di Sini

Pasang Iklan Anda di Sini