Emoticon Blogger Otomatis dengan jQuery
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
193 Comments:
bang mantap nih anyway biar link hdup terhapus otomatis gimana nihh kodenya??
By Mr.Randy, at Friday, March 23, 2012 at 3:58:00 AM GMT+7
\o/ mantap, Gan! tutorial emot yang inovatif.. :-bd
By MUX SPARROW, at Friday, March 23, 2012 at 5:32:00 AM GMT+7
@MUXLIMO
Btw, Gan.. kalau platform blogspot itu memang gak bisa ya bikin emotikon yang sistem onclick seperti di wordpress??
By MUX SPARROW, at Friday, March 23, 2012 at 5:54:00 AM GMT+7
WEWWW Kerennnnn HOREEEEEEE Aku Seneng \o/
By Sinto, at Friday, March 23, 2012 at 8:27:00 AM GMT+7
@randy yang penting share Saya cuma menggunakan JQuery .remove() kemudian menargetkan elemen paragraf di dalam komentar:
$(function() {
$('#comments p').find('a').remove();
});
By Taufik Nurrohman, at Friday, March 23, 2012 at 8:49:00 AM GMT+7
@MUXLIMOPertanyaan bagus :-bd Kendalanya ada pada formulir komentar Blogger yang hanya menggunakan <iframe> sehingga Saya tidak bisa melakukan apa-apa terhadap elemen itu. Seandainya formulir komentar Blogger adalah elemen nyata yang diletakkan di dalam template, mungkin Saya bisa mengakses elemen tersebut dan menyisipkan emoticon dengan menggunakan manipulasi .append(), .val() atau semacamnya.
By Taufik Nurrohman, at Friday, March 23, 2012 at 8:54:00 AM GMT+7
@system of blog \o/ \o/ \o/ \o/ \o/ \o/ \o/
By Taufik Nurrohman, at Friday, March 23, 2012 at 8:56:00 AM GMT+7
@Taufik Nurrohman
Ooh.. gitu ya, Gan.. pantesan saya dari dulu cari2 di seantero jagad blogger sampe tanya sana-sini gak dapet yang seperti di wp. sesuai dugaan ane, Gan.
Makasih banyak, Gan.. :-bd Di antara semua tutor yang ane tanya, cuma Agan yang baek 0:) mau jelasin penyebabnya. :-bd
Saya doain moga Agan makin keren dan makin banyak rezekinya. Amiin. :)
By MUX SPARROW, at Friday, March 23, 2012 at 3:52:00 PM GMT+7
@MUXLIMO Amiiinn... ya robbal alamiinn... ^_^
By Taufik Nurrohman, at Friday, March 23, 2012 at 11:39:00 PM GMT+7
Mantapp gan, langsung saya coba :-bd
By Yopi Hasopa, at Saturday, March 24, 2012 at 6:39:00 AM GMT+7
kalau pakai treded coment letak nya dimana yah?? 7:(
By Putra, at Sunday, March 25, 2012 at 8:23:00 PM GMT+7
@Alam Perwira Sama saja. Saya sudah mengetesnya.
By Taufik Nurrohman, at Sunday, March 25, 2012 at 9:18:00 PM GMT+7
@Taufik Nurrohman letaknya kok ada di bawah form komentar? (kalau postingannya udah ada komentar) :/
By Dixy, at Sunday, March 25, 2012 at 9:42:00 PM GMT+7
@system of blog gila ni orang :p
By Dixy, at Sunday, March 25, 2012 at 9:43:00 PM GMT+7
@KIDFiveThree Coba ganti selektor ini:
putEmoAbove = "iframe#comment-editor"
menjadi seperti ini:
putEmoAbove = "div.comment-replybox-thread, div.comment-replybox-single"
By Taufik Nurrohman, at Sunday, March 25, 2012 at 10:16:00 PM GMT+7
@Taufik Nurrohmanwakaka jadi berdobel dobel :p
http://1.bp.blogspot.com/-q1yOre4nPwA/T2__x6aLyrI/AAAAAAAAAPw/4tLo7VD8GMo/s1600/wakaka.jpg
By Putra, at Monday, March 26, 2012 at 12:35:00 PM GMT+7
@Alam Perwira Hahaha... :D \o/ \o/ \o/ \o/ \o/ \o/ \o/
Kalau begitu ambil yang pertama saja:
putEmoAbove = "div.comment-replybox-thread"
Ngomong-ngomong, screenshootmu gede banget!!! ~x(
By Taufik Nurrohman, at Monday, March 26, 2012 at 1:01:00 PM GMT+7
@Taufik Nurrohman kalo yg ini malah gak muncul kalo belum ada komentarnya..
mending pake form komentar seperti punya sobat Taufik Nurrohman ini.. :D
By Dixy, at Monday, March 26, 2012 at 7:17:00 PM GMT+7
@Taufik Nurrohman AL-FATIHAH....!! **p
By Dixy, at Monday, March 26, 2012 at 7:41:00 PM GMT+7
sudah jd arsip kalau sy mslh emoticon mah :D
http://beben-koben.blogspot.com/2011/03/emoticon-jquery-for-blogger.html
seabrek-abrek dah trik emot mah :p
By Beben Koben, at Tuesday, March 27, 2012 at 8:22:00 PM GMT+7
mas kalo mau menghilangkan alert message nya gimana??
By admin, at Thursday, March 29, 2012 at 5:31:00 PM GMT+7
:'( udah 2 hari 2 malem coba edit javascript emotikon punya
Agan supaya kode pemanggilannya :1 dst dan gambar emotnya dituker pake onion head yang ane pake di [pramuxlair.blogspot.com] tp gagal molo! :'( kadang gambarnya muncul; kadang enggak, kadang emot yang muncul ama kode yang diketik beda.. arrghh! pls, Gan.. bantuin.. biar blog ane bisa idup lagi dengan postingan2 baru :'(
By MUX SPARROW, at Saturday, April 7, 2012 at 11:12:00 PM GMT+7
@MUXLIMO Kalau metodenya cuma pakai angka, asalkan salah satu sudah berhasil:
emo(/\s:1/g, "URL-gambar1.gif", ":1");
yang lain tinggal mengikuti:
emo(/\s:2/g, "URL-gambar2.gif", ":2");
emo(/\s:3/g, "URL-gambar3.gif", ":3");
emo(/\s:4/g, "URL-gambar4.gif", ":4");
Setidaknya cuma sampai angka sembilan. Kalau sudah ke angka puluhan biasanya agak aneh hasilnya. Saya masih belajar regex hehe... :p
By Taufik Nurrohman, at Saturday, April 7, 2012 at 11:54:00 PM GMT+7
@Taufik Nurrohman
hoho! makasih, Gan.. udah ane coba 14 emot [pake kode a1 dst., b1 dst. di pramuxlair.blogspot]. :Q
cuman ada bug-nya, Gan.. yang a1 gak bisa muncul2 emotnya. :(
tanya juga, Gan:
mungkin gak ukuran emot ane yang aslinya gede gitu dikecilin jadi 30px seperti di blog asli ane? *moga2 bisa.. **p
ane bakal masih banyak tunya-tanya ni Gan... jangan dulu :-a ya.. tar aja :-a -nya kalo udah sukses ane terapin di blog :D
By MUX SPARROW, at Sunday, April 8, 2012 at 6:34:00 AM GMT+7
@MUXLIMO a1 gak muncul itu pasti cuma kesalahan kecil. Memperkecil gambar bisa, kalau di kode sumber emotikon bergambar besar itu ada kelasnya tinggal diubah ukuran lebar dan tingginya, tapi ini sama sekali tidak akan mengurangi beban muat gambar, cuma mengubah ukurannya saja. Kalau di emotikon Saya memakai kelas emo, jadinya ya begini:
img.emo {
width:30px;
height:30px;
}
Tunya-tanya nggak masalah asal masih di tempat yang sama, biar pikirannya nggak kesasar ke mana-mana hehe... @@,
By Taufik Nurrohman, at Sunday, April 8, 2012 at 10:19:00 AM GMT+7
http://2.bp.blogspot.com/-aG6oaNGK0ns/T4EA4yO3PQI/AAAAAAAACco/yOAIKuLwLeA/s1600/newemoticon.png
Pembaharuan: Menambah beberapa emotikon baru :-d
By Taufik Nurrohman, at Sunday, April 8, 2012 at 10:21:00 AM GMT+7
@MUXLIMO a1 gagal tampil karena tidak ada spasi di depannya. Coba tambahkan satu spasi di depan simbol, pasti jadi! Sama seperti yang Saya tuliskan pada kotak peringatan. Sebenarnya ini memang agak merepotkan, terutama saat seseorang mencoba "menggambar" emotikon di awal kata. Tapi ini demi keamanan:
Sesuatu hal yang tidak diinginkan bisa saja terjadi karena belum tentu karakter-karakter yang kita tulis dimaksudkan sebagai emotikon. Saya pikir, kebiasaan umum yang menjadi harafiah emotikon adalah spasi di depan sekelompok karakter untuk memastikan bahwa ini benar-benar menunjukkan gambaran ekspresi wajah. Setiap kali ada spasi di depan simbol, itu akan menjadi pelolos syarat, tapi jika tidak ada spasi di depan, jangan diubah karena itu bukan emotikon! :W
Jadi Saya memberikan persyaratan berupa satu spasi di depan kelompok karakter emotikon. Dalam hal ini adalah kode \s :yaya:
Bisa dilihat bahwa kebanyakan emotikon yang dituliskan pengunjung di awal kata gagal membentuk gambar, itu terjadi karena tidak ada spasi di depannya <=)
By Taufik Nurrohman, at Sunday, April 8, 2012 at 5:43:00 PM GMT+7
@Taufik Nurrohman
\o/ WOW! makasih tambahan kode CSS-nya, Gan..! Siap laksanakan. alhamdulillah si Agan masih akan selalu sedia membantu menjuwab-jawab tunya-tanya saya di satu tempat.
:-bd <3 :D
By MUX SPARROW, at Sunday, April 8, 2012 at 7:38:00 PM GMT+7
saya blum bisa..
:'(
By chuppie, at Thursday, April 12, 2012 at 4:18:00 PM GMT+7
bisa bisa .. :*
makasih.. :)
By chuppie, at Thursday, April 12, 2012 at 4:24:00 PM GMT+7
mas, kalo emot pnya mas kok cuma sedikit,
bagi2 dong kodeanya mas :) ;)
By Y.K. Priandanu, at Friday, April 20, 2012 at 6:10:00 PM GMT+7
@Yosse Kurnia Priandanu Sengaja Saya kurangi soalnya kalau kebanyakan nanti isi komentar di blog ini bakalan penuh sama emotikon semua. Lihat aja tuh di atas. Dikasi segini aja sudah bisa serame itu haha :D
By Taufik Nurrohman, at Friday, April 20, 2012 at 6:18:00 PM GMT+7
saya minta kode emot yang sedikit dong mas ^_^ :D
By Y.K. Priandanu, at Friday, April 20, 2012 at 10:14:00 PM GMT+7
@Yosse Kurnia Priandanu Pakai kode ini saja nggak apa-apa. Karena pada dasarnya semua emotikon bisa diklik, maka kita buat saja daftar emotikonnya sendiri. Jadi jumlah emotikon bisa ditentukan sesuka hati:
Pertama-tama hilangkan elemen bar emotikon dengan mengedit kode CSS .emoWrap di atas menjadi seperti ini:
.emoWrap {display:none !important;}
Lalu masuk ke menu Setelan ⇒ Bahasa dan Pemformatan
Pada bagian Pesan Formulir Komentar paste-kan kode ini:
<b> :) :( ^_^ :D ;) :-bd :'( :\ :p B) :Q :Ozz 7:( \o/ **p <3 0:) :-a 7:O *fck* x@ X@ ~x( :yaya: =p* Klik untuk melihat kode!</b>
By Taufik Nurrohman, at Friday, April 20, 2012 at 10:40:00 PM GMT+7
mas mau tanya, kok pumya saya Pesan Formulirnya berada di bawah kotak komentar ya ? Gimana solusinya mas :D
By Y.K. Priandanu, at Saturday, April 21, 2012 at 4:45:00 AM GMT+7
@Yosse Kurnia Priandanu Itu memang bug fitur thread commenting dari Blogger sendiri. Saya masih belum tahu bagaimana cara mengatasinya. Saya harap suatu saat Blogger akan memperbaiki masalah ini.
By Taufik Nurrohman, at Saturday, April 21, 2012 at 2:17:00 PM GMT+7
Hasseeekk, Dapet Tutor baru kie bang, BTW, esih mandan bingung nih Kang Tofik, Ada penjelasan singkatnya gk nih ?
By Rosyd Aqbar, at Saturday, April 21, 2012 at 7:10:00 PM GMT+7
@Bukan Master Ini penjelasan singkatnya:
Baca sekali lagi. Kalau belum jelas, baca sekali lagi. Kalau belum jelas, baca sekali lagi. Kalau belum jelas, baca sekali lagi ;)
By Taufik Nurrohman, at Saturday, April 21, 2012 at 8:17:00 PM GMT+7
pas saya pasang, trus komentar, gk ada Emonya bang Tofik.
By Rosyd Aqbar, at Sunday, April 22, 2012 at 5:50:00 AM GMT+7
@Bukan Master JQuery-nya dobel-dobel. Hapus kode ini (yang di dalam widget) lalu simpan lagi:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Setelah itu baru terapkan emotikon ini, tapi kode yang Saya beri garis bawah tidak usah diikutkan.
By Taufik Nurrohman, at Sunday, April 22, 2012 at 9:03:00 AM GMT+7
gan kok contoh emoticonnya ada di bawah comments-form ya? hel me gan cekidot ke blog ane ya :)
By Rizky Wardiansyah, at Sunday, April 29, 2012 at 5:52:00 AM GMT+7
@Rizky Wardiansyah Coba ganti ini:
putEmoAbove = "iframe#comment-editor"
menjadi seperti ini:
putEmoAbove = "#comment-form"
By Taufik Nurrohman, at Sunday, April 29, 2012 at 3:02:00 PM GMT+7
@Taufik Nurrohmankok malah jadi ilang ya gan? kaya gini
http://2.bp.blogspot.com/-M2DTNPyly_8/T5-KhF5tSnI/AAAAAAAAAMk/ODaXUkLiReM/s1600/untitled.PNG
By Rizky Wardiansyah, at Tuesday, May 1, 2012 at 2:09:00 PM GMT+7
@Rizky Wardiansyah Hmmm... Sepertinya memang harus membuat elemen sendiri, khusus untuk meletakkan bar emotikon :gitaris:
By Taufik Nurrohman, at Tuesday, May 1, 2012 at 10:24:00 PM GMT+7
Mas, misalnya emoticon ini kan backgrounda warna orange, bisa di ganti ga mas taufik, ?
Trus, , untuk gambar emoticonya bisa di ganti dengan gambar saya, (sebagai contoh misalnya tanda :) nanti akan muncul emöticon milik saya, )
Mohon pencerahaanya. .
Matur Nuhun
By Unknown, at Wednesday, May 2, 2012 at 4:05:00 PM GMT+7
@trii waluyo Bisa, seperti yang selalu MUXLIMO tanyakan di sini, yaitu dengan cara mengubah semua daftar eksekusi fungsinya. Misalnya begini:
emo(/\s:\)/g, "URL-gambar-emotikonmu.gif", ":)");
By Taufik Nurrohman, at Wednesday, May 2, 2012 at 4:53:00 PM GMT+7
Berarti untuk ngeditnya,ambil dulu .js nya ya mas, ?
Ntar kalau sudah diedit taruh di hostingan sendiri ya mas, ?
Kira-kira begitu ga mas
By Unknown, at Thursday, May 3, 2012 at 6:08:00 AM GMT+7
@trii waluyo Betul. Betul. Betul.
By Taufik Nurrohman, at Thursday, May 3, 2012 at 8:27:00 AM GMT+7
Dugaan saya betul :-D
Oh y mas, kalo Emoticon yg ini kan tanda :) bisa berubah otomatis didalam komentar,
Lah, pertanyaan saya :
1. Apakah tanda :) didalam postingan apa juga bisa berubah menjadi emoticon, ?
2. Misalnya jawabanya Tidak, apakah bisa simbol :-) bisa berubah menjadi emoticon di dalam postingan.? Dan caranya gimana mas, ?
Terima kasìh :-P
By Unknown, at Thursday, May 3, 2012 at 11:50:00 AM GMT+7
@trii waluyo Tanda :) di dalam postingan bisa berubah menjadi emotikon. Tambah saja selektor JQuery di dalam variabel emoRange menjadi seperti ini:
var emoRange = "#comments p, div.emoWrap, div.post-body"
Nanti emotikon akan diberlakukan juga ke dalam posting secara otomatis karena selektor div.post-body akan menyeleksi tubuh posting.
Simbol :-) juga bisa berubah menjadi emotikon, tapi regexnya harus diubah dulu menjadi seperti ini:
emo(/\s:\-\)/g, "URL-gambar-emotikonmu.gif", ":-)");
By Taufik Nurrohman, at Thursday, May 3, 2012 at 6:35:00 PM GMT+7
@Taufik Nurrohman mas,, aku ga jadi lah..... tolong liat javascript aku ya mas nie alamatnya http://goo.gl/aagKF
ko gagal ya mas,,, ???
ga jadi koh,,, coba liat blog aku ya mas.... :'(
By Unknown, at Friday, May 4, 2012 at 11:38:00 AM GMT+7
@trii waluyo Banyak simbol yang salah di dalam mas. Coba ini:
/**
* Simple regex experiment to create an automatic emoticons modified by Mob3se7en
* Visit: http://mob3se7en.blogspot.com
* Original: http://hompimpaalaihumgambreng.blogspot.com
*/
$(function() {
// Append an emoticon bar before comment-form
$(putEmoAbove).before('<div class="emoWrap"> :) ;) B) :( :'( :)): :| :~ :@ :? x( :p :o :* :D</div>');
var emo = function(emo, imgRep, emoKey) {
$(emoRange).each(function() {
$(this).html($(this).html()
.replace(/<br>:/g, "<br> :")
.replace(/<br>;/g, "<br> ;")
.replace(/<br>=/g, "<br> =")
.replace(/<br>\^_\^/g, "<br> ^_^")
.replace(/<br>\^o\^/ig, "<br> ^o^")
.replace(emo, " <img src='" + imgRep + "' class='emo delayLoad' alt='" + emoKey + "' />"));
});
}
emo(/\s:\)+/g, "http://lh4.googleusercontent.com/-rpctlZZPrX8/T6NQj_yVWWI/AAAAAAAAAcc/CuElXy44_-o/s128/Flirty.gif", ":)");
emo(/\s;\)+/g, "http://lh5.googleusercontent.com/-UxYqzFTKgME/T6NQpZCQGRI/AAAAAAAAAdc/bjWN-MznbE0/s128/Wink.gif", ";)");
emo(/\sB\)/ig, "http://lh5.googleusercontent.com/-0hJwVLhHspU/T6NQj4H-pkI/AAAAAAAAAck/WGSRK6YK2Xc/s128/Glasses.gif", "B)");
emo(/\s:\(/g, "http://lh6.googleusercontent.com/-7Ek34gqKjzA/T6NQnwLPfHI/AAAAAAAAAdI/WALVNDJYab0/s128/Sad.gif", ":(");
emo(/\s:'\(/g, "http://lh3.googleusercontent.com/-PChZ52qAc5c/T6NQiun5CxI/AAAAAAAAAcI/qbMCrPN5mJs/s128/Crying.gif", ":'(");
emo(/\s:\)\):/ig, "http://lh6.googleusercontent.com/-TIeUpNlgrTg/T6NQnDAqmEI/AAAAAAAAAdM/7eQs6Qovh90/s128/Happy.gif", ":)):");
emo(/\s:\|/ig, "http://lh3.googleusercontent.com/-E8zx2DnmvF8/T6NQlHIH8CI/AAAAAAAAAc0/DAX16CYZ_T0/s128/Indifferent.gif", ":|");
emo(/\s:\~/g, "http://lh3.googleusercontent.com/-q1OuJImqar0/T6NQn7L0nNI/AAAAAAAAAdQ/ka6i25MgnXU/s128/Sceptical.gif", ":~");
emo(/\s:@/g, "http://lh3.googleusercontent.com/-tpO1gtBKK9Q/T6NQjBK7B6I/AAAAAAAAAcQ/f7-2VYd32wg/s128/Devil.gif", ":@");
emo(/\s:\?/g, "http://lh6.googleusercontent.com/-KTEKKcMG61w/T6NQiooAkxI/AAAAAAAAAcM/GXYFqzRPjcQ/s128/Confused.gif", ":?");
emo(/\sx\(/g, "http://lh4.googleusercontent.com/-c1Y1pIkmVCE/T6NQiegHjdI/AAAAAAAAAcE/FV-zEoedrho/s128/Angry.gif", "x(");
emo(/\s:p/g, "http://lh3.googleusercontent.com/-FBazI6RPlcI/T6NQo-j8zPI/AAAAAAAAAdg/p_0kpu1-oRA/s128/Tongue.gif", ":p");
emo(/\s:o/g, "http://lh6.googleusercontent.com/-WQW3U_juaYA/T6NQrP0CGzI/AAAAAAAAAd0/9NbYeCvXlpU/s128/Wow.gif", ":o");
emo(/\s:\*/g, "http://lh3.googleusercontent.com/-fMiHFqG8nQc/T6NQleD-wbI/AAAAAAAAAc4/m3AW7-3SvIo/s128/Kiss.gif", ":*");
emo(/\s:D/g, "http://lh5.googleusercontent.com/-PV96j0NX-RA/T6NQm7pW62I/AAAAAAAAAdA/wVvJpV9MdHE/s128/Laughter.gif", ":D");
// Show alert one times!
$('div.emoWrap').one("click", function() {
alert(emoMessage);
});
// Click to show the code!
$('img.emo').css('cursor', 'pointer').live("click", function(e) {
$('input.emoKey').remove();
$(this).after('<input class="emoKey" type="text" size="' + this.alt.length + '" value=" ' + this.alt + '" />');
e.stopPropagation();
});
$('input.emoKey').live("click", function() {
$(this).focus().select();
});
});
By Taufik Nurrohman, at Friday, May 4, 2012 at 1:57:00 PM GMT+7
@Taufik Nurrohman iya mas alhamdulilah dah jadi...,,, terus ko simbol :'( kaya gini ko ga kedetek ya mas,,, ga berubah jadi simbol emoticon... Apa hapus aja ya mas,,, emo(/\s:\)+/g, maksudnya gimana mas ????
terus di postingan ga berubah ya mas ???
Padahal aku dah kasih kode div.post-body, semuanya jadi kaya gini mas var emoRange = "#comments p, div.emoWrap, div.post-body" tetep ga bisa,, apa ada yang masih salah ya mas ???
di postingan ga berubah emoticonnya...
terima kasih....
By Unknown, at Friday, May 4, 2012 at 2:22:00 PM GMT+7
@trii waluyo Sepertinya masalahnya ada di sini:
:))
^:D Pada dasarnya simbol tersebut sempat disalahartikan sebagai simbol :) dan ). Seharusnya hasilnya akan menjadi gambar emotikon pertama dan sebuah simbol ) di belakang. Ini kesalahan interpretasi karena simbol emotikon kurang spesifik. Coba ganti simbol :)) yang ada di dalam formulir pesan komentar menjadi :)):
Saya sempat mengedit bagian itu tadi untuk menjaga kesalahpahaman cara JavaScript membaca simbol.
Emotikon di dalam posting tidak bekerja karena kelas tubuh posting di blogmu bukan memakai kelas .post-body tapi memakai kelas .entry:
var emoRange = "#comments p, div.emoWrap, div.entry"
Template blogmu bukan template standar blogspot mas, mungkin hasil adaptasi dari template Wordpress *bang*
By Taufik Nurrohman, at Friday, May 4, 2012 at 3:27:00 PM GMT+7
Kesuun bgt mas,,,:)
Bukan simbol [:)] mas, coba liat salah satu postimg aku ya mas, pasti ada 1 simbol yang tidak berubah, yang tidak berubah tanda [:'(] (tanda sedih, crying)
Hehe. . .
Iya bener mas taufik, q pake template hasil dowmload, habisan saya masih newbie,
Ya kapan-kapan saya coba pake template bawaan google. . .
Berarti intinya sama ya mas, .entry sama .post-body
Mohon pencerahaanya mas taufik :)
By Unknown, at Friday, May 4, 2012 at 4:10:00 PM GMT+7
@trii waluyo Ya, memang bukan simbol :)), tapi kalau salah satu simbol gagal/error, yang lain juga biasanya akan ikut terpengaruh.
Template download tidak berarti tidak standar. Periksa saja elemen-elemen di dalamnya.
.post-body dan .entry itu bukan masalah sama atau tidaknya, mereka berdua diambil dari elemen ini:
<div class='post-body'>
Isi artikel di sini...
</div>
atau elemen ini:
<div class='entry'>
Isi artikel di sini...
</div>
Yang pada dasarnya memiliki tigas yang sama, yaitu membungkus isi artikel. Itu saja inti dari penyeleksian emoRange di sini :yaya:
By Taufik Nurrohman, at Friday, May 4, 2012 at 5:04:00 PM GMT+7
@Taufik Nurrohman Lah terus aku harus gimana ya mas ??? Supaya simbol (:'() jadi emoticon :'( :'( :'( :'(
By Unknown, at Saturday, May 5, 2012 at 10:57:00 AM GMT+7
@trii waluyo Coba ganti bagian ini:
emo(/\s:'\(/g, "http://lh3.googleusercontent.com/-PChZ52qAc5c/T6NQiun5CxI/AAAAAAAAAcI/qbMCrPN5mJs/s128/Crying.gif", ":'(");
jadi seperti ini:
emo(/\s:('|\')\(/g, "http://lh3.googleusercontent.com/-PChZ52qAc5c/T6NQiun5CxI/AAAAAAAAAcI/qbMCrPN5mJs/s128/Crying.gif", ":'(");
By Taufik Nurrohman, at Saturday, May 5, 2012 at 12:59:00 PM GMT+7
Nice,ijin post di blogku. B) B) B)
tapi cara buat supaya transparent tanpa background(seperti di sini) caranya gmn ? :-bd :-bd :-bd
By uki, at Sunday, May 6, 2012 at 3:42:00 PM GMT+7
@Uqi Hapus background-color dan border di bagian ini:
.emoWrap {
background-color:#EEDE86; /* <== hapus! */
border:2px solid #D3BA59; /* <== hapus! */
padding:10px 14px;
color:black;
font:bold 12px Tahoma,Arial,Sans-Serif;
text-align:center;
}
By Taufik Nurrohman, at Tuesday, May 8, 2012 at 5:09:00 PM GMT+7
mas ko simbol:) ga jadi emoticon ya di blogku ?
mohon bantuannya mas :(
By Unknown, at Monday, June 4, 2012 at 4:23:00 PM GMT+7
@Suhendrie Purnama Lepas kode yang Saya beri garis bawah lalu simpan lagi. Atau, alternatif lain yang lebih ringan namun lebih lengkap: Paket JavaScript Fitur Manipulasi Komentar Blogger
By Taufik Nurrohman, at Tuesday, June 5, 2012 at 8:41:00 PM GMT+7
gak muncul kang Tofik :(
By Rosyd Aqbar, at Friday, June 15, 2012 at 1:26:00 PM GMT+7
@Taufik Nurrohman Jadi gmn supaya ngk muncul di bawah comentar ?
By uki, at Friday, June 15, 2012 at 2:30:00 PM GMT+7
@Buka(n) Master ? Cuma bar emotikonnya saja kan yang nggak muncul? Masalahmu ada di sini =D
By Taufik Nurrohman, at Friday, June 15, 2012 at 3:40:00 PM GMT+7
@Uqhi•° Cek posting ini: Masalah Pesan Formulir Komentar yang Jatuh ke Bawah
By Taufik Nurrohman, at Friday, June 15, 2012 at 3:44:00 PM GMT+7
woww... it's great... :-bd keren dah,,, \o/ ane mah bikin'y juga masih yg standar, :D boleh belajar ga? hehe ^_^ ..
By Unknown, at Wednesday, July 4, 2012 at 9:41:00 PM GMT+7
makasih pak, gue udah terapkan dan berhasil di post body otomatis berubah jadi emot
By Surga Kenari, at Friday, July 13, 2012 at 1:01:00 PM GMT+7
saya sudah coba...., work, tapi begini nih...
di blog saya kan gambarnya pake efek kalau di hover letak nya sedikit ke bawah (kalau gk salah namanya efek Nudging ), nah kalau di hover gambar emo nya juga jadi ikut kena efek... karena kecil jadi susah di klik nya.. :(
saya kan efek hover gambanya pake img:hover .
W: Gimana caranya agar gambar emo gk kena efek img:hover, atau mungkin bagaimana ??
By Yusril Ibnu Maulana, at Wednesday, July 18, 2012 at 12:43:00 PM GMT+7
Coba netralkan semua transisinya di img.emo:
img.emo, img.emo:hover {
-webkit-transition:none;
-moz-transition:none;
-ms-transition:none;
-o-transition:none;
transition:none;
}
By Taufik Nurrohman, at Wednesday, July 18, 2012 at 1:14:00 PM GMT+7
kalau kode itu kan hanya transisi saja... :( , jadi efeknya juga harus dihilangi dengan kode :
-webkit-transform:translate(0px,0px);
-moz-transform:translate(0px,0px);
-ms-transform:translate(0px,0px);
-o-transform:translate(0px,0px);
transform:translate(0px,0px);
tapi thanks bantuanya ...
By Yusril Ibnu Maulana, at Wednesday, July 18, 2012 at 7:29:00 PM GMT+7
Oh, ya. Mudeng... mudeng...
By Taufik Nurrohman, at Wednesday, July 18, 2012 at 7:59:00 PM GMT+7
mas taufik kalau mau bikin kotak search kayak di WP gimana yah?
yg bisa bergerak gitu. :D terima kasih sebelumnya
By Gara Pratama, at Wednesday, July 25, 2012 at 6:51:00 PM GMT+7
wahh, makasih mas, lgsung bekerja tu emot di blog si ayam, tambah unyu aja jadinya blog saya, heheheh, makaih ya mas :)
By Ichsan Ramadhani, at Friday, July 27, 2012 at 4:05:00 PM GMT+7
bg taufic ini saya mau tanya kenapa saya klick di komentar yang udah ada Emoticonnya eh malah ada tulisan code nya misal nya saya klick emoticon yang :p : p gitu disampingnya coba deh bg taufic test di koment abg taufic..! cara fix nya gimana yah ?
By Bakteri, at Saturday, July 28, 2012 at 4:04:00 PM GMT+7
Ya, memang fiturnya begitu.
By Taufik Nurrohman, at Saturday, July 28, 2012 at 5:20:00 PM GMT+7
Mangtabs Kang tutorialnya... :-bd
Kemarin saya pernah mencoba memasang emo pada blog,ehhh malah efeknya "Folloers" kga muncul.
Dan saya terakkan trik ini 100% berhasil \o/
By indolaron, at Sunday, July 29, 2012 at 10:06:00 PM GMT+7
Gan , Saya Sudah Memasang kode nya .. Tapi Saat Saya Masukin Kode Contoh : (:() eh malah gagal mas ...
Jadi gak ada gambarnya di komentarnya !
By Yandi Mulyadi, at Thursday, August 2, 2012 at 4:04:00 PM GMT+7
gAN , cOBA Deh liat template blog saya ..
http://demomytemplatez.blogspot.com/2012/08/blog-post.html?showComment=1343899840788#c2011786881110214876
Masa gak ada emotikonnya?
Liat deh di http://i49.tinypic.com/2diq5pz.jpg
By Yandi Mulyadi, at Thursday, August 2, 2012 at 4:35:00 PM GMT+7
Di depannya harus ada spasi. Kalau tidak ada spasi emotikon tidak bisa tampil.
By Taufik Nurrohman, at Thursday, August 2, 2012 at 5:20:00 PM GMT+7
bErhasil juga. Thank you Bos.. :-bd
By Unknown, at Monday, August 6, 2012 at 12:29:00 AM GMT+7
http://i1094.photobucket.com/albums/i456/its-mine/Onion/niceinfo.gif
By KMKO Sipil Unhas, at Tuesday, August 14, 2012 at 6:45:00 AM GMT+7
kalo mau bikin yang gambar sesuai keinginan kita gimana mas??
misalnya kayak gambar diatas.
tapi kode simbolnya tetap pendek, seperti yang mas bikin..
:)
By KMKO Sipil Unhas, at Tuesday, August 14, 2012 at 6:48:00 AM GMT+7
work bang
thanks !!
By DARK, at Tuesday, August 21, 2012 at 10:13:00 PM GMT+7
Baca komentar-komentar di atasnya.
By Taufik Nurrohman, at Wednesday, August 22, 2012 at 10:28:00 AM GMT+7
mas cara membuat kode emot nya tertutup otomatis dan menambah tulisan "klik utk melihat kode"" bagaimana? "seperti punya mas diatas"
By admin, at Thursday, August 23, 2012 at 1:04:00 AM GMT+7
emoMessage = false;
By Taufik Nurrohman, at Thursday, August 23, 2012 at 1:34:00 PM GMT+7
JavaScript sudah diperbaharui. Tinggal memakai saja :)
Tulisan "klik untuk melihat kode" bisa dibuat dengan cara menuliskan daftar emotikon secara manual, dan mengganti nilai variabel putEmoAbove menjadi false:
putEmoAbove = false
By Taufik Nurrohman, at Thursday, August 23, 2012 at 1:55:00 PM GMT+7
ohhh iyaaaaa...
udah bisaaa nihh..
makasih banget yaaa...
kunjungi blog kami juga yaaa..
http://kmkosipil.blogspot.com/
By KMKO Sipil Unhas, at Sunday, September 9, 2012 at 11:05:00 PM GMT+7
Terima kasih ya membantu sekali artikelnya... http://hompimpa.googlecode.com/svn/trunk/personal/emo/topmarkotop.gif
By Unknown, at Tuesday, October 16, 2012 at 3:27:00 PM GMT+7
:D
By Unknown, at Tuesday, October 16, 2012 at 4:58:00 PM GMT+7
:) thank you Gan...
folow me ya?
By Unknown, at Saturday, October 27, 2012 at 11:36:00 AM GMT+7
Bang Taufik, kalau Emotionnya yang ini untuk postingan saja bukan untuk komentar, apa scriptnya bang?? :(
By Unknown, at Tuesday, November 20, 2012 at 2:48:00 AM GMT+7
Setelah saya tambahin class nya kok malah gak muncul ya bang di postingan dan komentarnya juga?? munculnya cuman di HOMEpage saja..
beginikan cara nambahinnya bang??
emoRange = "#comments p, div.emoWrap, .post",
ada solusinya gak bang?? ini blog saya gubuk45.com
By Unknown, at Tuesday, November 20, 2012 at 3:50:00 AM GMT+7
emoRange = "#comments p, div.emoWrap, div.post-body ",
begini juga sama bang hasilnya.. :(
By Unknown, at Tuesday, November 20, 2012 at 5:22:00 AM GMT+7
Coba ini:
emoRange = "#main > div"
By Taufik Nurrohman, at Tuesday, November 20, 2012 at 8:03:00 AM GMT+7
tidak berhasil juga bang,,,, >.<
By Unknown, at Tuesday, November 20, 2012 at 2:51:00 PM GMT+7
ad alternatif lain gak bang??? :(
By Unknown, at Tuesday, November 20, 2012 at 7:38:00 PM GMT+7
Tidak ada. Sesuai salah satu komentar dari trii waluyo di atas, seharusnya memakai cara sebelumnya sudah cukup.
By Taufik Nurrohman, at Tuesday, November 20, 2012 at 8:02:00 PM GMT+7
Mas, mau tanya, apakah ini ringan atau berat untuk loading blog..? :Q
By Nyak, at Tuesday, November 20, 2012 at 10:25:00 PM GMT+7
berarti kesimpulannya, ini gak bisa di pake buat di postingan ya bang?
soalnya seru aja ngasih emot di postingan :D
kalau pake manual kan repot bang..
By vongola, at Thursday, November 29, 2012 at 4:26:00 PM GMT+7
emotion yang tidak bisa tampil di postingan, sepertinya di karenakan ada script "artikel terkait dengan Thumbnail" atau bisa juga ada script "LintasMe"...
contoh artikel terkait dibawah posting:
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-snc6/s480x480/260055_470283109671635_1775214067_n.jpg
setelah saya lepas script2 tadi, alhamdulillah emotion bisa tampil di beberapa posting,,, tapi kadang2 juga tidak bisa tampil dengan baik.... :D
By Unknown, at Sunday, December 2, 2012 at 12:27:00 PM GMT+7
mas cara ngilanin link css ini di blog gimana ya
//www.blogger.com/static/v1/widgets/1937454905-widget_css_bundle.css
soalnya ada yg ga bisa saya ubah gara2 itu
By Anonymous, at Monday, December 17, 2012 at 9:17:00 PM GMT+7
kalo mau itu bisa di ilangin tapi lupa kemarin tk taruh aman, tp ati2 aja kalo itu kamuilangin entar banyak widget yang berantakan, soalnya css widget bawaan blogger bersal dari situ semua.
kalo mau gampang pake cara ini, tambahin ini !important di belakang kode cssmu
Contoh
#bd-box {
width: 96%;
height: 300px !important;
border-radius: 10px;
background: #222
color: #fff !important;/*tambahin kode itu fungsinya agar css yg baru lebih diutamakan drpada css wbundle dari blogger */
padding: 10px;
}
By Unknown, at Monday, December 17, 2012 at 10:08:00 PM GMT+7
mas taufik yang pintar and jenius \o/ ,,, saya minta izin ambil nie kode,,, salam kenal :) hebat pokok,na :-bd,,,
tapi sya boleh ngrubah kan,,,,,,,,????????? ;)
By alansinggih, at Wednesday, December 26, 2012 at 8:36:00 PM GMT+7
NICE !!! http://titanic-cyber.blogspot.com :yaya:
By Unknown, at Thursday, December 27, 2012 at 5:48:00 PM GMT+7
Kak taufik, kalau di blog kenapa ini bisa tampil setelah ada komentar, tapi sebelum ada komentar tidak bisa tampil ?
dan kenapa area coe emotnya gak bisa ketutup sacara otomatis jika di klik diluar area itu ?
kira-kira dimana letak kesalahannya, apa saya salah dalam edit javascript nya ya ?
tolong bantuannya kak....
By IRIL SAGITA, at Saturday, January 12, 2013 at 9:20:00 AM GMT+7
Solusinya gimana kak ?
By IRIL SAGITA, at Saturday, January 19, 2013 at 10:51:00 AM GMT+7
Maaf, sekaran sudah bisa ketutup secara otomatis, tetapi masalahnya sekarang jika di klik kanan and copy pada area code emotikcon gak bisa, karena langsung ketutup.
satu lagi jika dalam posting belum ada komentar emoticon gak tampil.
sampai puyeng utak-utik code, tolong aku ya kak ?
By IRIL SAGITA, at Saturday, January 19, 2013 at 11:08:00 AM GMT+7
Coba pada bagian klik emot diganti pakai ini:
// Click to show the code!
$(document).css('cursor','pointer').on("click", ".emo", function() {
$('.emoKey').remove();
$(this).after('<input class="emoKey" type="text" size="6" value=" ' + this.alt + '"/>');
$('.emoKey').trigger("select");
$(this).on("click", function() {
$('.emoKey').remove();
});
});
By Taufik Nurrohman, at Saturday, January 19, 2013 at 6:55:00 PM GMT+7
mas, kok emoticon nya tetep gk muncul ya di blog saya waktu masukin symbolnya??
tolong pencerahannya ya.. thanks
By monz, at Sunday, January 20, 2013 at 2:50:00 AM GMT+7
Mas ko jadi gini, pas saya merubah tampilan lebih sedikit emoticonya..!!
http://1.bp.blogspot.com/-ESKCwHjAhow/UP_pwatlNkI/AAAAAAAAGDY/IqyUEjRWNpw/s320/zewDsignet+1.jpg
mohon bantuanya.. :'( :'(
By azewdsignet, at Wednesday, January 23, 2013 at 8:48:00 PM GMT+7
Ganti selektornya menjadi seperti ini:
var emoRange = "#comments p, div.emoWrap, #comment-form, #threaded-comment-form",
...
...
By Taufik Nurrohman, at Wednesday, January 23, 2013 at 10:17:00 PM GMT+7
om bisa tidak kalo metode nya diulang,sepeti in jadi nya:
emo(/\s:8/g, "URL-gambar2.gif", ":8");
emo(/\s:9/g, "URL-gambar3.gif", ":9");
selanjutnya:
emo(/\s:8:/g, "URL-gambar4.gif", ":8:");
emo(/\s:9:/g, "URL-gambar3.gif", ":9:");
atau membuat nya seperti pada forum...
contoh:
emo(/\s:senyum/g, "URL-gambar2.gif", ":8");
emo(/\s:9/g, "URL-gambar3.gif", ":senyum");
By dfdsh, at Friday, January 25, 2013 at 10:30:00 AM GMT+7
makasih sudah berhasil mas..!!
tapi sayang tulisan ( klik untuk melihat code!) munculnya seperti gambar di atas :(
By azewdsignet, at Friday, January 25, 2013 at 11:56:00 PM GMT+7
kira" kalau emoticonya tampil di komentar " disqus " bisa ga mas taufik??
By azewdsignet, at Saturday, January 26, 2013 at 4:03:00 PM GMT+7
Kalau kodenya mirip-mirip, lebih baik utamakan yang lebih banyak karakternya terlebih dahulu, lalu lanjutkan dengan karakter yang lebih sedikit:
emo(/\s:8:/g, "URL-gambar4.gif", ":8:");
emo(/\s:9:/g, "URL-gambar3.gif", ":9:");
emo(/\s:8/g, "URL-gambar2.gif", ":8");
emo(/\s:9/g, "URL-gambar3.gif", ":9");
By Taufik Nurrohman, at Saturday, January 26, 2013 at 6:58:00 PM GMT+7
Tidak bisa. Bukannya Disqus sudah punya emot sendiri?
By Taufik Nurrohman, at Saturday, January 26, 2013 at 7:03:00 PM GMT+7
engga ada mas`udah di cari" di disqus ga ada..!!
oh iya mas`mau naya lagi knpa emoticon yg tampil pada gambar di atas malah ada yg di bawah kan kalau punya mas itu sejajar..!!
By azewdsignet, at Sunday, January 27, 2013 at 4:22:00 PM GMT+7
Ganti karakter < jadi < dan > jadi >
Jangan menekan tombol ganti baris.
By Taufik Nurrohman, at Sunday, January 27, 2013 at 6:23:00 PM GMT+7
maksudnya code itu di edit di bagian Comment Form Message bukan mas?
By azewdsignet, at Sunday, January 27, 2013 at 8:08:00 PM GMT+7
saya ga paham mas`apalagi liat komentar di atas dengan pertanyaan yng merubah emoticonya..!!
Maaf dalam masalah edit daleman saya ga paham.
By azewdsignet, at Sunday, January 27, 2013 at 8:19:00 PM GMT+7
Mas Tovic, saya sudah pasang emoticon otomatis ini dalam tag entry-content. Nah masalahnya dalam tag entry-content ada tag lainnya, misal tag pre yang terdapat beberapa kode malah menjadi gambar emoticon. Bisa tidak tag pre ini menjadi daerah pengecualian emoticon otomatis?? :p
Terima kasih :)
By Yopi Hasopa, at Friday, February 1, 2013 at 9:20:00 PM GMT+7
Kalau kamu memakai tag <p> untuk mengitari teks, bisa dengan cara menargetkan tag paragraf itu (tag PRE berada di luar paragraf):
.entry-content p
By Taufik Nurrohman, at Friday, February 1, 2013 at 10:19:00 PM GMT+7
Blogspot kan gak pake tag p buat ngebungkus paragrafnya Mas? Beda sama wordpress :(
Jadi gak bisa pake trik pengecualian area ya Mas? hehe.. =p*
By Yopi Hasopa, at Friday, February 1, 2013 at 10:37:00 PM GMT+7
wah kalau saya menggunakan komentar bertingkat dari artikel mas taufik yang ini: http://www.dte.web.id/2013/01/membuat-fitur-komentar-berbalas.html
berarti saya hanya perlu merubah
putEmoAbove = "#comment-editor", menjadi putEmoAbove = ".custom-comments #comment-editor" ya?
tapi kenapa emoticon nya tidak muncul sama sekali mas diatas formulir komentarnya? :(
By Unknown, at Tuesday, February 5, 2013 at 3:30:00 PM GMT+7
Harusnya muncul.
By Taufik Nurrohman, at Wednesday, February 6, 2013 at 8:50:00 AM GMT+7
dan kalo Symbol (y) Menjadi Emoticon https://reader-sync.googlecode.com/svn/trunk/mini_like.png , gimana mas...?
By Anonymous, at Wednesday, February 6, 2013 at 11:53:00 AM GMT+7
saya juga bingung kenapa gak muncul mas
contohnya gini: http://metal-x-gen.blogspot.com/2013/01/lorem-ipsum.html
By Unknown, at Wednesday, February 6, 2013 at 3:18:00 PM GMT+7
udah bisa mas, ternyata saya mengalami kesalahan saat mengubah id daerah yang akan terkena manipulasi, tapi udah berhasil sekarang :D makasih
By Unknown, at Wednesday, February 6, 2013 at 6:01:00 PM GMT+7
emo(/\s\(y\)/ig, "https://reader-sync.googlecode.com/svn/trunk/mini_like.png", "(y)");
By Taufik Nurrohman, at Thursday, February 7, 2013 at 9:33:00 AM GMT+7
bang Taufik, kalau mau si gambarnya diberi max size bisa ga?
Jadi nanti pas gambarnya muncul, ukurannya tidak bisa melebihi ukuran maksimal yang telah ditentukan.
Mohon bantuannya. :)
By budkalon, at Friday, February 8, 2013 at 3:34:00 PM GMT+7
/* maksimal 200 piksel */
img.emo {max-width:200px}
By Taufik Nurrohman, at Saturday, February 9, 2013 at 1:37:00 PM GMT+7
Mas kok saya nggak bisa di kopi paste, pas diklik kan keluar kodenya, pas klik kanan, kodenya langsung hilang. :p
By Alwan, at Friday, March 8, 2013 at 8:22:00 PM GMT+7
Sudah diperbaiki.
By Taufik Nurrohman, at Friday, March 8, 2013 at 9:12:00 PM GMT+7
udah bisa mas makasih banyak.
oh iya, kalo pengen mengurangi julah emoticonnya gimana mas?
By Alwan, at Monday, March 11, 2013 at 1:13:00 PM GMT+7
berjalan dengan sempurna.. mantap gan..
emotion nya bisa di ganti gan??
By ARLIAN, at Wednesday, March 20, 2013 at 3:25:00 PM GMT+7
maaf mas, saya mau nanya berkaitan dengan kode emo yg dikit itu, tp agak melencen dikit karena aku mau taruh emo nya di dalam formulir pesan komentar... saya udah coba terapkan seperti komen mas diatas tapi ga work yah, emoticon yang muncul pada form pesan komentar hanya dalam bentuk kode-kode saja bukan tampilan gambar emo nya...
saya coba2 ganti kode putEmoAbove = "#comment-editor", dengan kode putEmoInside = "kode form pesan komentar", ga work juga, hehehe...
By Unknown, at Monday, April 15, 2013 at 11:07:00 AM GMT+7
putEmoAbove itu nama variabel, tidak bisa diganti-ganti. Yang harus diperbaharui itu ada di bagian emoRange, supaya emotikon yang ada di dalam formulir komentar juga bisa ikut masuk di dalam range:
var emoRange = "#comments p, div.emoWrap, #comment-form, #threaded-comment-form"
By Taufik Nurrohman, at Monday, April 15, 2013 at 4:50:00 PM GMT+7
kalo mau ganti icon, mau gak mau harus ngedit code javascriptnya:
reader-download.googlecode.com/svn/trunk/jquery.autoemoticons.js
By EM, at Thursday, May 2, 2013 at 1:45:00 AM GMT+7
Mas, kalo ga ada komentar letak emotikonnya diatas, pas ada komentar kok jadi dibawah :'(
By Unknown, at Friday, June 14, 2013 at 8:15:00 PM GMT+7
Sudah bisa mas , hehehee .. Abis baca artikelnya yg masalah pesan itu \o/
By Unknown, at Friday, June 14, 2013 at 8:22:00 PM GMT+7
@Beben Koben: \o/ Betul² Blogger Yang Ulet dari blogger india,spanyol,ingris dll slalu saya ketemu dengan Komentar Beben Koben :Q :Q :Q =p*Rajin benerrrrrrrrr
By Unknown, at Saturday, June 15, 2013 at 4:01:00 PM GMT+7
sangat membantu sekaliii !!! :D
By Kang Rian, at Thursday, July 4, 2013 at 2:35:00 PM GMT+7
Kalau Ingin Membuat Alertnya Seperti Mas Taufik Gimana...?
By Anonymous, at Wednesday, July 10, 2013 at 9:19:00 AM GMT+7
URL yang mana, halaman yang mana, di bagian yang mana, kode yang mana dan emotikon yang mana?
By Taufik Nurrohman, at Wednesday, July 10, 2013 at 9:36:00 AM GMT+7
http://3.bp.blogspot.com/-5UYF-I3NUgE/UdzQYnoCl5I/AAAAAAAAHic/WZz3vfOnnU8/s1600/2013-07-10_100608.png
Mungkin cuma masalah koneksi internet.
By Taufik Nurrohman, at Wednesday, July 10, 2013 at 10:10:00 AM GMT+7
Ada di bagian ini:
// Click to show the code!
$('.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();
});
Buat kotak dialogmu sendiri kemudian tampilkan saat emotikon diklik. Sisipkan pesan emoMessage ke dalam kotak dialog tersebut:
$('.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) {
// Tampilkan kotak dialog di sini
$('#kotak-dialog').fadeIn(400).html(emoMessage);
one = 1;
}
e.stopPropagation();
});
By Taufik Nurrohman, at Wednesday, July 10, 2013 at 10:24:00 AM GMT+7
permisi mas taufik selamat siang saya mau bertanya nie mas kira2 menurut mas taufik apa saja permasalahan emoticon tidak mau berjalan di form komentar soalnya setelah saya mengganti sistem komentar saya emoticonnya tidak berjalan mas saya binggung dengan permasalahannya..
mohon pencerahannya mas taufik...
kalau mas taufik berkenan mohon chek disini mas
http://imronfhatoni94.blogspot.com
By Imron Fhatoni, at Wednesday, July 10, 2013 at 2:49:00 PM GMT+7
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 emotikon utama. Anda juga bisa menargetkannya pada elemen lain, misalnya pada […]
By Taufik Nurrohman, at Thursday, July 11, 2013 at 2:17:00 AM GMT+7
alhamdulillah sudah teratasi mas taufik trimakasih banyak..
oh iya ada satu pertanyaan saya lagi mas membuat dalam membuat menampilkan comments target saya ambil contoh seperti blognya mas taufik jika selesai berkomentar targetnya muncul,,,mohon pencerahannya mas taufik...
By Imron Fhatoni, at Thursday, July 11, 2013 at 2:24:00 AM GMT+7
coba tanya diblog kang ismet
By Sinto, at Friday, July 12, 2013 at 3:45:00 AM GMT+7
Makasih tutorialnya Kak Taufik, tapi bagaimana membuat pesan komentar ?
By Unknown, at Friday, July 26, 2013 at 9:23:00 AM GMT+7
bedanya kode2 ini apa ya kak?
)+/g
(/g
ig
By dhanyn10, at Monday, August 5, 2013 at 10:00:00 PM GMT+7
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
By Unknown, at Tuesday, August 6, 2013 at 11:21:00 AM GMT+7
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 .. :'(
By Unknown, at Tuesday, August 6, 2013 at 11:23:00 AM GMT+7
:-bd Artikel yang sangat bagus dan terperinci, sangat membantu bagi rekan-rekan blogger yang ingin memasang emoticon pada form komentar, salam kenal !
By Goez ini, at Tuesday, August 6, 2013 at 12:58:00 PM GMT+7
Makasih gan, emoticonnya bisa di Blog saya :) :) :) :)
By Unknown, at Wednesday, August 7, 2013 at 6:10:00 AM GMT+7
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.
By Saeful Rahman, at Sunday, August 18, 2013 at 7:01:00 PM GMT+7
gk jadi mas, sekarang sudah jadi. Saya ganti codinya.
By Saeful Rahman, at Sunday, August 18, 2013 at 11:16:00 PM GMT+7
udah dijawab diatas itu masbero http://www.dte.web.id/2012/03/jquery-auto-emoticons-for-blogger.html?showComment=1373426659720#c6639328224155726780
By Anonymous, at Tuesday, August 20, 2013 at 3:23:00 AM GMT+7
Wah, lebih ampuh dari blog kembaran sebelah :D.
By BrayenL, at Monday, August 26, 2013 at 2:30:00 PM GMT+7
Mas mau tanya, gimana caranya agar pesan komentar tidak tampil ketika membalas komentar terkait?
By Unknown, at Monday, August 26, 2013 at 3:49:00 PM GMT+7
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. :'(
By Arif, at Monday, August 26, 2013 at 4:54:00 PM GMT+7
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 :)
By Imron Fhatoni, at Wednesday, September 25, 2013 at 8:22:00 AM GMT+7
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 ?
By Unknown, at Monday, October 28, 2013 at 2:05:00 PM GMT+7
Satu lagi mas, untuk menampilkan emo list seperti ini
[img]http://2.bp.blogspot.com/-LCs0TDLdSQY/Um4Opg1Gz1I/AAAAAAAABRU/dm5oEAcY0Ic/s1600/emo+list.jpg[/img] caranya bagaimana mas ?
By Unknown, at Monday, October 28, 2013 at 2:14:00 PM GMT+7
1). Boleh.
2). Untuk menampilkan kode emotikon seperti gambar di bawah sudah ada jawabannya di atas, kode ditulis manual.
By Taufik Nurrohman, at Wednesday, October 30, 2013 at 10:01:00 PM GMT+7
:(
By Unknown, at Sunday, December 15, 2013 at 11:29:00 PM GMT+7
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
By Alpha Dian Tamalanrea, at Sunday, January 5, 2014 at 2:59:00 PM GMT+7
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/
By Taufik Nurrohman, at Saturday, February 8, 2014 at 11:19:00 AM GMT+7
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
By Reza Wiradana, at Thursday, February 27, 2014 at 4:55:00 PM GMT+7
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
By Kang Mousir, at Monday, March 24, 2014 at 3:33:00 PM GMT+7
Mas Taufik kembali lagi saya :)
Oh ya mas ada yang ingin saya tanyakan.
Emoticon ini saya terapkan diblog baru aku [url=http://iwebtri.blogspot.com]iWebTri[/url] malah ga bisa Mas. Dulu kan saya sudah terapkan ini ke blogku yang lama [url=http://mob3se7en.blogspot.com]Mob3se7en[/url] jadi Mas. Aku juga dulu pernah komentar disini Mas.
Yang jadi masalahnya ko ga muncul ya mas ? Coba di lihat ya...
Terima kasih
By Unknown, at Saturday, May 10, 2014 at 6:37:00 PM GMT+7
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 :)
By Unknown, at Wednesday, May 14, 2014 at 7:50:00 PM GMT+7
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);
By Penggemar Rahasia, at Thursday, May 15, 2014 at 10:03:00 AM GMT+7
Gua maunya seperti punya abang :D
By Unknown, at Thursday, June 26, 2014 at 1:03:00 PM GMT+7
Mau tanya nih mas Taufik.
Kenapa pada saat klik balas komentar, kotak emoticonnya turun dibawah form komentar ? :p
By Unknown, at Saturday, July 19, 2014 at 8:46:00 AM GMT+7
⇒ /2012/05/masalah-pesan-formulir-komentar-yang.html
By Taufik Nurrohman, at Monday, August 4, 2014 at 7:28:00 AM GMT+7
Mas Cara Nyembunyiin Formulir Komentar Saat Balas Ini Gimana http://prntscr.com/4u552u
By Muhamad Zainut Taqwim, at Wednesday, October 8, 2014 at 4:11:00 PM GMT+7
Pelajari → /2013/02/ajax-jquery-memuat-beberapa-bagian.html
By Taufik Nurrohman, at Friday, October 10, 2014 at 6:02:00 AM GMT+7
Kang taufik, bisa gak emoticonnya diintegrasikan ke comment FB kang, yang kita pasang di blog kang... :)
By Iwan Efendi, at Friday, October 17, 2014 at 6:23:00 AM GMT+7
Keren \o/
By Muhammad Zaini, at Thursday, February 12, 2015 at 8:28:00 AM GMT+7
makasih atas referensinya mas :)
By Unknown, at Saturday, February 21, 2015 at 6:39:00 PM GMT+7
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 : [url=https://jsfiddle.net/hidayat_rifan/b2ounccv/]Proyek Emotikon[/url]
By Rifan hidayat, at Wednesday, June 3, 2015 at 2:54:00 PM GMT+7
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
By Taufik Nurrohman, at Wednesday, June 3, 2015 at 5:25:00 PM GMT+7
terima kasih, semoga sehat selalu mas taufik
By Rifan hidayat, at Wednesday, June 3, 2015 at 6:56:00 PM GMT+7
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 .
By Unknown, at Friday, September 11, 2015 at 5:57:00 PM GMT+7
var emoRange = "#comment-holder, #comments p, div.emoWrap",
By Taufik Nurrohman, at Monday, October 12, 2015 at 12:39:00 PM GMT+7
yang aku maksud jsfiddle yang emo facebook itu pak [url]https://jsfiddle.net/tovic/b2ounccv/1[/url]
By Unknown, at Tuesday, October 13, 2015 at 5:50:00 PM GMT+7
a.querySelector("#emo_box, #comment-holder")
By Rifan hidayat, at Wednesday, October 28, 2015 at 2:01:00 PM GMT+7
gambar emotikonnya udah rusak tuh mas
By Anonymous, at Friday, May 19, 2017 at 9:48:00 PM GMT+7
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.
By Taufik Nurrohman, at Tuesday, May 23, 2017 at 9:54:00 PM GMT+7
Post a Comment
<< Home