Emoticon Blogger Otomatis Dengan Jquery

Saya gres memutuskan bahwa eksperimen ini telah berhasil sekitar satu hari yang kemudian (sepertinya begitu). Ini yakni akomodasi emoticon otomatis yang akan mengubah simbol-simbol menyerupai :), :(, dan yang lainnya menjadi gambar tertentu yang telah ditentukan. Saya memakai jQuery alasannya mungkin konsep emoticon dengan jQuery belum ada. Dan juga, lagipula Saya belum begitu berbakat untuk menuliskan arahan dengan JavaScript metah. Meskipun di luar sana sudah ada beberapa tutorial sejenis contohnya Add Yahoo Smiley Emoticons on Blogger Comment, tapi Saya hanya ingin menunjukkan sesuatu yang sedikit berbeda dan dengan proses instalasi yang sangat mudah.

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

Temukan arahan ini:

</body>

Salin arahan 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 yakni jQuery. Jika tema Anda sudah dilengkapi dengan jQuery, singkirkan arahan tersebut!

Lebih Jauh Lagi

Di situ terdapat setidaknya tiga variabel untuk pengaturan lanjutan:

emoRange dipakai untuk memilih kawasan 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 sanggup menargetkannya pada elemen lain, contohnya pada posting. Untuk memberlakukan manipulasi ini pada posting, cukup tambahkan selektor .post-body pada variabel tersebut dengan memisahkannya memakai tanda koma.
putEmoAbove dipakai untuk memilih di mana (di atas elemen apa) jQuery harus meletakkan daftar emoticon. Di sini Saya menuliskan nilainya pada #comment-editor untuk meletakkannya sempurna 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 dipakai untuk memilih pesan yang akan muncul ketika pertama kali pengunjung mengeklik salah satu emoticon. Anda sanggup mengubah pesan itu sesuka hati.

Bagaimana Manipulasi ini Bekerja?

Pada dasarnya Saya hanya memakai regex sederhana untuk mencari format teks tertentu. Dan dengan memakai fungsi .replace() Saya mengubah setiap susunan huruf 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 huruf dengan format “satu spasi di depan + simbol :)” menjadi elemen <img src='smile.gif'>.

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

g yakni global, artinya bahwa fungsi ini akan mencari semua huruf yang cocok tanpa terkecuali kemudian ia akan mengubahnya menjadi elemen gambar.

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

[img]emoticon.gif[/img]

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

Dalam jQuery kita sanggup menuliskannya menyerupai ini:

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

Coba Sendiri

Sumber emoticon: Emoticons4u

Sumber https://www.dte.web.id/