Setelah 2 hari bersemedi akhirnya kelar juga nih proyek Membuat Emoticon untuk Komentar dan Postingan di Blog. Sebenarnya saya pengennya sih bisa buat karakter Emoticon sendiri, tapi berhubung karna saya pun juga masih dalam tahap baru belajar jadi masih pinjem karakter yang sudah ada dulu. Anggap saja lah ini sebagai buka dasar percobaan. Jadi, kali ini pun sahabat saya perkenankan untuk mencicipinya secara GRATIS. Monggo yuuk, langsung disimak aja tutorial berikut. ^D^

Sebelumnya saya tunjukin dulu deh seperti apa aja ekspresi-ekspresi yang ada di fitur Emoticon punya saya ini. Seperti yang saya katakan diawal karena saya belum sempet buat karakter emoticon sendiri, jadi ini saya pakek emoticon yang ada di aplikasi WhatsApp. Wiih, keren kan?? Emoticon kali ini jelas gak sama deh dengan yang udah kebanyakan ada dipasang oleh – lain. Atau kalau emang udah ada yang seperti ini berarti saya yang ketinggalan informasi.

Bagi sahabat pengguna iPhone/Android dan sering main WA pasti udah gak asing lah dengan gambar-gambar lucu dibawah ini:

Lihat aja gambar diatas. Itu masih satu tab aja lhoh yang saya buka, belum lagi tab Places, Nature, Events dan Symbols. Saya gak sempet hitung semuanya ada berapa banyak, yang jelas gak mungkin saya coding emoticon sebanyak itu. Makanya saya ambil beberapa yang memang populer atau sering digunain aja. Sebagai patokan saya pun melihat emoticon Smiley yang ada di Facebook. Jumlahnya ada 28 macam ekspresi. Nah, dari situlah saya kembangkan lagi dan mana yang kurang pun saya tambahin, sehingga akhirnya jadi lah seperti ini:

Ada 36 macam jenis ekspresi yang bisa sahabat gunakan. Kode nya juga gak ribet, hampir kebanyakan rasanya emang sudah sering sekali kita pakai jadi lebih gampang lah untuk bagi yang mau ngehapalin kode-kodenya. Untuk mengetahui kode emoticonnya sahabat cukup mengarahkan kursor mouse tepat diatas gambar yang ingin sahabat gunakan. Nanti secara otomatis akan muncul hover text. Sekali lagi cara ini pun saya adopsi dari smiley emoticon di Facebook, yaitu ketika kursor kita berada diatas gambar smiley akan muncul kode emoticonnya.

Proses untuk membuat fitur komentar WhatsApp agar bisa digunakan di blog seperti ini bisa dibilang cukup gampang-gampang sulit susah juga sob. Karna kalau di WA sendiri kan untuk memasukkan emoticon kita tinggal klik aja. Nah, sayangnya saya belum punya ilmu secanggih itu, jadi terakhir saya cuman bisa ngandalin cara manual aja deh. Dan disitulah letak kesulitannya. Saya harus nyari ide lagi untuk nemuin kode text yang bener-bener cocok untuk dipakek pada emoticon tersebut. Selanjutnya kode text emoticon itu pun harus di translasikan lagi ke bahasa PHP dengan menggunakan istilah Regex yang kemudian dimasukkan ke dalam JavaScript. 😐

Cara Memasang Emoticon WhatsApp pada Komentar dan Postingan Blog

  1. Silahkan masuk terlebih dahulu ke dashboard Blogger masing-masing. (Ini emang udah pasti wajib lah yaa, ngapain juga diajar-ajarin lagi 😀 hehe)
  2. Buka tab Template dan pilih Edit HTML. Kalau mau di-backup dulu data templatenya silahkan sekedar untuk jaga-jaga.
  3. Pastikan terlebih dahulu template sahabat sudah terpasang script Jquery didalamnya. Jika sudah lewati langkah ini, tpi kalau belum silahkan pasang kode berikut ini sebelum tag </head> 
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
  4. Selanjutnya copy-kan kode script HTML berikut ke dalam template yang sahabat gunakan: 
    <style>
.post img.emosmile, .comment-content img.emosmile {max-height:1.1em; bottom:-3px; position:relative; display:inline; margin:0; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; border:none; background-color:transparent;-webkit-border-radius:0px;-moz-border-radius:0px;-o-border-radius:0px;-ms-border-radius:0px;border-radius:0px;}</style>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, .post-body, div.emoWrap",
})
});
//]]>
</script>
<script src='https://googledrive.com/host/0B5BeCAuyk7k9Ml9RQVR1dm9ESkE/' type='text/javascript'></script>
    Sahabat bisa meletakkan kode tersebut sebelum tag </head> atau bisa juga sebelum tag </body>. Bedanya sih kalau di antara head maka kode script emoticon inilah yang akan terlebih dahulu dibaca baru kemudian text konten. Nah, kalau diantara body maka kode script ini akan dibaca paling akhir, jadi waktu loading konten pun bisa lebih cepat. =)
  5. Klik Save untuk menyimpan perubahan. Udah selesai. Sekarang coba boleh coba dilihat dulu salah satu halaman blog sahabat. Gimana??

Penjelasan sedikit untuk script kode emoticon diatas:

  • CSS di dalam tag <style>…</style> sebenarnya bisa juga sahabat masukkan ke dalam     <b:skin><![CDATA[/* tapi saya sengaja buat terpisah gitu supaya lebih maintainable aja.
  • Untuk max-height:1.1em; ini sifatnya boleh diganti sesuai dengan keinginan dan kebutuhan template masing-masing. Kode ini menentukan besarnya gambar emoticon sahabat.
  • bottom:-3px; Ini berfungsi agar gambarnya pas ditengah-tengah baris dari tulisan.  Kalau tanpa ini gambar emoticon akan terlihat lebih tinggi dari font tulisan.
  • Script kode berikut ini emoRange:”#comments p, .post-body, div.emoWrap”, berfungsi untuk mengatur dimana saja emoticon mau ditampilkan. Disitu saya masukkan pada bagian komentar #comments p dan pada bagian postingan .post-body . Bisa jadi kalau template kita berbeda range ini wajib disesuaikan.

Jadi, kalau toh ternyata script emoticon ini gak bekerja, kemungkinan penyebabnya bisa karna template sahabat belum terpasang Jquery atau versinya belum di-update dan bisa juga mungkin emoRange-nya belum sesuai. Dan kalau pun sewaktu-waktu tetep gak bisa juga, berarti file javascript emoticon-nya lah yang sedang dalam maintainance. Hehehe.. =D

Cara Menampilkan Pesan Diatas Kotak Komentar

Seperti yang terlihat pada cuplikan gambar sebelumnya, kan ada tuh muncul pesan pemberitahuan yang letaknya diatas kotak form pengisian komentar. Sebenarnya lagi-lagi itupun hanya menggunakan cara manual dan sederhana saja. Saya sengaja gak memasukkannya ke dalam bagian dari script, agar supaya sahabat pun bisa lebih gampang untuk menyesuaikan pesannya dengan selera masing-masing.

Karna saya tahu, pastinya ada beberapa yang memang sudah menampilkan pesan-pesan tertentu diatas form komentarnya. Jadi, untuk bisa memunculkan daftar emoticon tersebut pun cukup mudah, sahabat tinggal letakkan saja kode-kode text emoticonnya dibawah dari pesan komentar tersebut. Bagi yang belum pernah memasang pesan komentar, ikuti saja langkah-langkah berikut:

  1. Pada dashboard sahabat, silahkan buka tab Settings (Pengaturan) dan kemudian pilih option Posts and Comments.
  2. Pada kotak Comment Form Message, silahkan tuliskan sendiri pesan yang ingin ditampilkan dan juga jangan lupa buat list/daftar kode emoticon dibawahnya.
  3. Klik Save Settings untuk menyimpan perubahan. Silahkan cek, apakah pesan komentar ini sudah muncul?
  4. Jika mau memodifikasi bentuk tampilan dari pesan komentar tersebut, tinggal ditambahkan aja pengaturan pada CSS template sahabat masing-masing. Gunakan property #form-wrapper p, .comment-form p { …value… }

Euyah, selain dari 36 macam kode text emoticon yang saya tampilkan diatas itu, sebenarnya masih ada lagi sih kode text emoticon lainnya yang sudah berhasil saya convert dengan regex dan bisa digunakan. Cuman saya pikir-pikir kalau pun nanti terlalu banyak emoticon yang ingin dimunculkan bisa-bisa script nya jadi terlalu besar size nya. Saya khawatir hal itu bisa membuat template kita menjadi kurang efisien dalam hal loading time. Kalau sahabat penasaran dan pengen berkreasi dengan emoticon ini silahkan check sendiri disini jsFiddle.

Oke, sekian dulu yaa tutorial kali ini. Semoga dengan Emoticon Smiley karakter WhatsApp ini bisa membuat suasana blog kita menjadi lebih hidup dan menarik. Jika ada masalah atau hal yang ingin didiskusikan bersama silahkan tinggalkan pesan lewat kotak komentar dibawah tulisan ini aja yaa. 😉

SEKEDAR INFO: Pemasangan Emoticon WhatsApp ini sebelumnya sudah saya uji di 3 (tiga) blog berbeda sekaligus dan hasilnya gak ada masalah kok. Salah satunya boleh mampir ke blog ini Lampunya.

Selamat Mencoba dan Semangat Berkreatifitas Sahabat!! 😉