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

  • Unknown

    Makasih tutorialnya Kak Taufik, tapi bagaimana membuat pesan komentar ?

  • dhanyn10

    bedanya kode2 ini apa ya kak?
    )+/g
    (/g
    ig

  • Unknown

    Mas Taufik, saya punya problem nih tntang emotikon ini, ketika saya klik tombol balas kan otomatis comment-editornya pindah jadi dibawah komentar terkait, nah waktu di klik emotikonnya ga ada efek apa2, kurang tahu deh apa namanya, pokoknya kan kalo di klik gambar senyum jadi muncul kode :) ..

    Saya menggunakan thread comment yang dapet dri sebuah blog, saya gak tahu akar masalahnya dimana (ga ngerti mah iyaaa), apa karna thread commentnya atau apanya mas? mumet nii ..

    fahmi-hardian.blogspot.com

    • Unknown

      Oiyah, kalo pas pertamaaa kali klik (tidak mengklik tombol balas) itu bisa mas, tpi pas klik tombol balas maka kesananya gabisa, koneksi rata-rata mas .. :'(

  • Goez ini

    :-bd Artikel yang sangat bagus dan terperinci, sangat membantu bagi rekan-rekan blogger yang ingin memasang emoticon pada form komentar, salam kenal !

  • Unknown

    Makasih gan, emoticonnya bisa di Blog saya :) :) :) :)

  • Saeful Rahman

    Mas kan sya sudah pasang emoticon ini, tapi emoticon ini sudah saya modifikasi kembali. Pertanyaan saya, setelah memasang ini JS auto selection pada tag pre menjadi tdk berfungsi. Kira-kira gimana solusinya mas ? :)
    //Selection
    var pres=document.getElementsByTagName("pre");for(var i=0;i<pres.length;i++){pres[i].addEventListener("dblclick",function(){var selection=getSelection();var range=document.createRange();range.selectNodeContents(this);selection.removeAllRanges();selection.addRange(range)},false)}

    Cek disini mas http://saeful13.blogspot.com.

    • Saeful Rahman

      gk jadi mas, sekarang sudah jadi. Saya ganti codinya.

  • Unknown

    Mas, mau nanya. Cara modifikasi tampilan Alertnya kayak punyak mas taufik gimana Ya ? :-bd

    • Anonim

      udah dijawab diatas itu masbero http://www.dte.web.id/2012/03/jquery-auto-emoticons-for-blogger.html?showComment=1373426659720#c6639328224155726780

  • BrayenL

    Wah, lebih ampuh dari blog kembaran sebelah :D.

  • Unknown

    Mas mau tanya, gimana caranya agar pesan komentar tidak tampil ketika membalas komentar terkait?

  • Arif

    gan,, ane minta tolong banget ni gan, penasaran banget ane. emoticon onion head pada blog ane knp ngga mau muncul ya gan. segala macam cara udah ane buat. tanya kesana kemari tp belum juga bisa gan. segala jquery udah ane pasang gan. apa ya masalahnya gan tolong di bantu. ane masih newbie. :'(

  • Imron Fhatoni

    assalamualaikum mas taufik saya nanya bagaimana menerapkan emoticon seperti pada from komentarnya mas taufik lihat kode disini:emo ,,emo,,emo,,
    kira-kira bisa dikasih ngak tipsnya mas dari kemaren bingungnya disitu mas :)

  • Unknown

    Mas taufik, saya mau minta izin untuk menggunakan kode emocticon yang Anda simpan di filce google code nya. Untuk menambhakan emocticon yang belum ada di dalam kolom komentar yang saya pakai.
    Boleh tidak ?

    • Taufik Nurrohman

      1). Boleh.
      2). Untuk menampilkan kode emotikon seperti gambar di bawah sudah ada jawabannya di atas, kode ditulis manual.

  • Unknown

    Satu lagi mas, untuk menampilkan emo list seperti ini
    caranya bagaimana mas ?

  • Unknown

    :(

  • Alpha Dian Tamalanrea

    mas, kenapa ya ketika klik balas komentar di blog saya, kok kode untuk emotikonnya ga keluar?
    cuma muncul emotikon tp ketika emotikonnya di klik, kodenya tidak keluar

    • Taufik Nurrohman

      Karena HTML sudah berpindah tempat.

      This method provides a means to attach delegated event handlers to the document element of a page, which simplifies the use of event handlers when content is DYNAMICALLY ADDED TO A PAGE.

      https://api.jquery.com/live/

  • Unknown

    mas, di dalam emorange, saya tambahkan .post, tapi malah membuat spoiler seperti yg mas tulis disiini http://www.dte.web.id/2012/02/membuat-spoiler-sederhana-dengan-jquery.html menjadi terbuka dan tidak bisa ditutup. mohon bantuannya mas

  • Kang Mousir

    mas, saya ada masalah pada emoticon nya. onclick nya tidak muncul saat reply komentar. Kenapa ya mas ?
    cek sini mas : http://kang-mousir.blogspot.com/2014/03/pentingnya-tag-alt-pada-gambar.html

    • Unknown

      saya mau membantu menjawab pertanyaan,

      coba ganti ini dengan

              var one = 0;
      $(document.body).on("click", function () {
      $('.emoKey').remove()
      });
      $('.emo').css('cursor', 'pointer').on("click", function (e) {
      $('.emoKey').remove();
      $(this).after('<input class="emoKey" type="text" size="6" value=" ' + this.alt + '" />');
      $('.emoKey').trigger("select");
      if (emoMessage && one === 0) {
      alert(emoMessage);
      one = 1
      }
      e.stopPropagation()
      })
      })
      })(jQuery);

      dengan code ini

              var one = 0;
      $(document.body).on("click", function () {
      $('.emoKey').remove()
      });
      $('.emo').css('cursor', 'pointer').live("click", function (e) {
      $('.emoKey').remove();
      $(this).after('<input class="emoKey" type="text" size="6" value=" ' + this.alt + '" />');
      $('.emoKey').trigger("select");
      if (emoMessage && one === 0) {
      alert(emoMessage);
      one = 1
      }
      e.stopPropagation()
      })
      })
      })(jQuery);
  • Unknown

    Mas Taufik kembali lagi saya :)

    Oh ya mas ada yang ingin saya tanyakan.
    Emoticon ini saya terapkan diblog baru aku iWebTri malah ga bisa Mas. Dulu kan saya sudah terapkan ini ke blogku yang lama Mob3se7en jadi Mas. Aku juga dulu pernah komentar disini Mas.
    Yang jadi masalahnya ko ga muncul ya mas ? Coba di lihat ya...

    Terima kasih

    • Unknown

      Alhamdulilah Mas...
      Akhirnya jadi juga...

      Mungkin ini dikarenakan penempatan jQuery yang salah...

      Setelah kode diatas saya salin dan tidak mengahpus <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> dan berhasil

      Terima kasih

      Maju terus DTE :)

  • Unknown

    Gua maunya seperti punya abang :D

  • Unknown

    Mau tanya nih mas Taufik.
    Kenapa pada saat klik balas komentar, kotak emoticonnya turun dibawah form komentar ? :p

  • Zen

    Keren \o/

  • Unknown

    makasih atas referensinya mas :)

  • Unknown

    mas taufik ,minta bantuannya mas.
    aku lagi bikin emotikon ala facebook untuk blogger menggunakan javascript murni tanpa sentuhan jquery, dan menggunakan event click untuk melihat kodenya seperti postinagnnya mas taufik ini,

    tapi pas udah jadi kok emotikonnya yang bisa diklik cuma emotikon pertama ya, gmna ya mas agar semua emotikonnya bisa di klik dan muncul kode emotnya,

    nih link proyeknya : Proyek Emotikon

    • Taufik Nurrohman

      Pakai document.querySelectorAll, lalu di-loop:

      // Pakai `querySelectorAll`, lalu di-loop
      var r = a.querySelectorAll('.emo');
      for (var i = 0, len = r.length; i < len; ++i) {
      clickThatEmoticon(r[i]);
      }
      function clickThatEmoticon(elem) {
      elem.addEventListener("click", function() {
      this.parentNode.insertBefore(sa, this.nextSibling);
      sa.type = "text";
      sa.className = "texte";
      sa.value = this.title;
      sa.select();
      }, !1);
      }

      Demo: https://jsfiddle.net/tovic/b2ounccv/1

      • Unknown

        terima kasih, semoga sehat selalu mas taufik

      • Unknown

        pak yang di jsfiddle itu sudah aku coba pasang di blog bisa, supaya emoticonnya juga bisa nongol di id comment-holder nambahinya gimana pak? *mumet .

  • Unknown

    gambar emotikonnya udah rusak tuh mas

    • Taufik Nurrohman

      BTW, tren jQuery sudah berakhir (menurut Saya loh). Peramban moderen saat ini sudah cukup mendukung JavaScript document.querySelectorAll yang setara dengan $ pada jQuery. Mungkin kapan-kapan bisa Saya perbaharui supaya plugin ini bisa bekerja tanpa jQuery.

Komentar telah ditutup.