Emoticon Blogger Otomatis dengan jQuery
Tabel Konten
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:
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 elemenp
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 dengandiv.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, "' />")
);
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.
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
dengan code ini
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
Taufik Nurrohman
⇒ /2012/05/masalah-pesan-formulir-komentar-yang.html
Muhamad Zainut Taqwim
Mas Cara Nyembunyiin Formulir Komentar Saat Balas Ini Gimana http://prntscr.com/4u552u
Taufik Nurrohman
Pelajari → /2013/02/ajax-jquery-memuat-beberapa-bagian.html
Iwan Efendi
Kang taufik, bisa gak emoticonnya diintegrasikan ke comment FB kang, yang kita pasang di blog kang... :)
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: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 .
Taufik Nurrohman
Unknown
yang aku maksud jsfiddle yang emo facebook itu pak https://jsfiddle.net/tovic/b2ounccv/1
Unknown
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.