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
197 Comments:
bang mantap nih anyway biar link hdup terhapus otomatis gimana nihh kodenya??
\o/ mantap, Gan! tutorial emot yang inovatif.. :-bd
@MUXLIMO
Btw, Gan.. kalau platform blogspot itu memang gak bisa ya bikin emotikon yang sistem onclick seperti di wordpress??
WEWWW Kerennnnn HOREEEEEEE Aku Seneng \o/
@randy yang penting share Saya cuma menggunakan JQuery .remove() kemudian menargetkan elemen paragraf di dalam komentar:
$(function() {
$('#comments p').find('a').remove();
});
@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.
@system of blog \o/ \o/ \o/ \o/ \o/ \o/ \o/
@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. :)
@MUXLIMO Amiiinn... ya robbal alamiinn... ^_^
Mantapp gan, langsung saya coba :-bd
kalau pakai treded coment letak nya dimana yah?? 7:(
@Alam Perwira Sama saja. Saya sudah mengetesnya.
@Taufik Nurrohman letaknya kok ada di bawah form komentar? (kalau postingannya udah ada komentar) :/
@system of blog gila ni orang :p
@KIDFiveThree Coba ganti selektor ini:
putEmoAbove = "iframe#comment-editor"
menjadi seperti ini:
putEmoAbove = "div.comment-replybox-thread, div.comment-replybox-single"
@Taufik Nurrohmanwakaka jadi berdobel dobel :p
http://1.bp.blogspot.com/-q1yOre4nPwA/T2__x6aLyrI/AAAAAAAAAPw/4tLo7VD8GMo/s1600/wakaka.jpg
@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(
@Taufik Nurrohman kalo yg ini malah gak muncul kalo belum ada komentarnya..
mending pake form komentar seperti punya sobat Taufik Nurrohman ini.. :D
@Taufik Nurrohman AL-FATIHAH....!! **p
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
mas kalo mau menghilangkan alert message nya gimana??
:'( 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 :'(
@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
@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
@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... @@,
http://2.bp.blogspot.com/-aG6oaNGK0ns/T4EA4yO3PQI/AAAAAAAACco/yOAIKuLwLeA/s1600/newemoticon.png
Pembaharuan: Menambah beberapa emotikon baru :-d
@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 <=)
@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
saya blum bisa..
:'(
bisa bisa .. :*
makasih.. :)
mas, kalo emot pnya mas kok cuma sedikit,
bagi2 dong kodeanya mas :) ;)
@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
saya minta kode emot yang sedikit dong mas ^_^ :D
@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>
mas mau tanya, kok pumya saya Pesan Formulirnya berada di bawah kotak komentar ya ? Gimana solusinya mas :D
@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.
Hasseeekk, Dapet Tutor baru kie bang, BTW, esih mandan bingung nih Kang Tofik, Ada penjelasan singkatnya gk nih ?
@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 ;)
pas saya pasang, trus komentar, gk ada Emonya bang Tofik.
@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.
gan kok contoh emoticonnya ada di bawah comments-form ya? hel me gan cekidot ke blog ane ya :)
@Rizky Wardiansyah Coba ganti ini:
putEmoAbove = "iframe#comment-editor"
menjadi seperti ini:
putEmoAbove = "#comment-form"
@Taufik Nurrohmankok malah jadi ilang ya gan? kaya gini
http://2.bp.blogspot.com/-M2DTNPyly_8/T5-KhF5tSnI/AAAAAAAAAMk/ODaXUkLiReM/s1600/untitled.PNG
@Rizky Wardiansyah Hmmm... Sepertinya memang harus membuat elemen sendiri, khusus untuk meletakkan bar emotikon :gitaris:
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
@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", ":)");
Berarti untuk ngeditnya,ambil dulu .js nya ya mas, ?
Ntar kalau sudah diedit taruh di hostingan sendiri ya mas, ?
Kira-kira begitu ga mas
@trii waluyo Betul. Betul. Betul.
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
@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", ":-)");
@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.... :'(
@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();
});
});
@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....
@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*
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 :)
@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:
@Taufik Nurrohman Lah terus aku harus gimana ya mas ??? Supaya simbol (:'() jadi emoticon :'( :'( :'( :'(
@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", ":'(");
Nice,ijin post di blogku. B) B) B)
tapi cara buat supaya transparent tanpa background(seperti di sini) caranya gmn ? :-bd :-bd :-bd
@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;
}
mas ko simbol:) ga jadi emoticon ya di blogku ?
mohon bantuannya mas :(
@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
gak muncul kang Tofik :(
@Taufik Nurrohman Jadi gmn supaya ngk muncul di bawah comentar ?
@Buka(n) Master ? Cuma bar emotikonnya saja kan yang nggak muncul? Masalahmu ada di sini =D
@Uqhi•° Cek posting ini: Masalah Pesan Formulir Komentar yang Jatuh ke Bawah
woww... it's great... :-bd keren dah,,, \o/ ane mah bikin'y juga masih yg standar, :D boleh belajar ga? hehe ^_^ ..
makasih pak, gue udah terapkan dan berhasil di post body otomatis berubah jadi emot
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 ??
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;
}
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 ...
Oh, ya. Mudeng... mudeng...
mas taufik kalau mau bikin kotak search kayak di WP gimana yah?
yg bisa bergerak gitu. :D terima kasih sebelumnya
wahh, makasih mas, lgsung bekerja tu emot di blog si ayam, tambah unyu aja jadinya blog saya, heheheh, makaih ya mas :)
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 ?
Ya, memang fiturnya begitu.
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/
Gan , Saya Sudah Memasang kode nya .. Tapi Saat Saya Masukin Kode Contoh : (:() eh malah gagal mas ...
Jadi gak ada gambarnya di komentarnya !
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
Di depannya harus ada spasi. Kalau tidak ada spasi emotikon tidak bisa tampil.
bErhasil juga. Thank you Bos.. :-bd
http://i1094.photobucket.com/albums/i456/its-mine/Onion/niceinfo.gif
kalo mau bikin yang gambar sesuai keinginan kita gimana mas??
misalnya kayak gambar diatas.
tapi kode simbolnya tetap pendek, seperti yang mas bikin..
:)
work bang
thanks !!
Baca komentar-komentar di atasnya.
mas cara membuat kode emot nya tertutup otomatis dan menambah tulisan "klik utk melihat kode"" bagaimana? "seperti punya mas diatas"
emoMessage = false;
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
ohhh iyaaaaa...
udah bisaaa nihh..
makasih banget yaaa...
kunjungi blog kami juga yaaa..
http://kmkosipil.blogspot.com/
Terima kasih ya membantu sekali artikelnya... http://hompimpa.googlecode.com/svn/trunk/personal/emo/topmarkotop.gif
:D
:) thank you Gan...
folow me ya?
Bang Taufik, kalau Emotionnya yang ini untuk postingan saja bukan untuk komentar, apa scriptnya bang?? :(
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
emoRange = "#comments p, div.emoWrap, div.post-body ",
begini juga sama bang hasilnya.. :(
Coba ini:
emoRange = "#main > div"
tidak berhasil juga bang,,,, >.<
ad alternatif lain gak bang??? :(
Tidak ada. Sesuai salah satu komentar dari trii waluyo di atas, seharusnya memakai cara sebelumnya sudah cukup.
Mas, mau tanya, apakah ini ringan atau berat untuk loading blog..? :Q
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..
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
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
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;
}
mas taufik yang pintar and jenius \o/ ,,, saya minta izin ambil nie kode,,, salam kenal :) hebat pokok,na :-bd,,,
tapi sya boleh ngrubah kan,,,,,,,,????????? ;)
NICE !!! http://titanic-cyber.blogspot.com :yaya:
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....
Solusinya gimana kak ?
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 ?
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();
});
});
mas, kok emoticon nya tetep gk muncul ya di blog saya waktu masukin symbolnya??
tolong pencerahannya ya.. thanks
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.. :'( :'(
Ganti selektornya menjadi seperti ini:
var emoRange = "#comments p, div.emoWrap, #comment-form, #threaded-comment-form",
...
...
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");
makasih sudah berhasil mas..!!
tapi sayang tulisan ( klik untuk melihat code!) munculnya seperti gambar di atas :(
kira" kalau emoticonya tampil di komentar " disqus " bisa ga mas taufik??
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");
Tidak bisa. Bukannya Disqus sudah punya emot sendiri?
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..!!
Ganti karakter < jadi < dan > jadi >
Jangan menekan tombol ganti baris.
maksudnya code itu di edit di bagian Comment Form Message bukan mas?
saya ga paham mas`apalagi liat komentar di atas dengan pertanyaan yng merubah emoticonya..!!
Maaf dalam masalah edit daleman saya ga paham.
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 :)
Kalau kamu memakai tag <p> untuk mengitari teks, bisa dengan cara menargetkan tag paragraf itu (tag PRE berada di luar paragraf):
.entry-content p
Blogspot kan gak pake tag p buat ngebungkus paragrafnya Mas? Beda sama wordpress :(
Jadi gak bisa pake trik pengecualian area ya Mas? hehe.. =p*
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? :(
Harusnya muncul.
dan kalo Symbol (y) Menjadi Emoticon https://reader-sync.googlecode.com/svn/trunk/mini_like.png , gimana mas...?
saya juga bingung kenapa gak muncul mas
contohnya gini: http://metal-x-gen.blogspot.com/2013/01/lorem-ipsum.html
udah bisa mas, ternyata saya mengalami kesalahan saat mengubah id daerah yang akan terkena manipulasi, tapi udah berhasil sekarang :D makasih
emo(/\s\(y\)/ig, "https://reader-sync.googlecode.com/svn/trunk/mini_like.png", "(y)");
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. :)
/* maksimal 200 piksel */
img.emo {max-width:200px}
Mas kok saya nggak bisa di kopi paste, pas diklik kan keluar kodenya, pas klik kanan, kodenya langsung hilang. :p
Sudah diperbaiki.
udah bisa mas makasih banyak.
oh iya, kalo pengen mengurangi julah emoticonnya gimana mas?
berjalan dengan sempurna.. mantap gan..
emotion nya bisa di ganti gan??
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...
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"
kalo mau ganti icon, mau gak mau harus ngedit code javascriptnya:
reader-download.googlecode.com/svn/trunk/jquery.autoemoticons.js
Mas, kalo ga ada komentar letak emotikonnya diatas, pas ada komentar kok jadi dibawah :'(
Sudah bisa mas , hehehee .. Abis baca artikelnya yg masalah pesan itu \o/
@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
sangat membantu sekaliii !!! :D
Mau Tanya ... !!
Kenapa Emoticon Saya Pas Di Klik Ga keluar Kodenya.. ?? Itu Kenapa.... ??
Kalau Ingin Membuat Alertnya Seperti Mas Taufik Gimana...?
URL yang mana, halaman yang mana, di bagian yang mana, kode yang mana dan emotikon yang mana?
Ini Master..
http://3.bp.blogspot.com/-dmhjg2sLtDY/UdzKbBE4bgI/AAAAAAAAAg8/ip0jbPXkwlQ/s1600/AWW.png
http://silebo-blog.blogspot.com/2013/07/gambar-ucapan-selamat-bulan-puasa.html
http://3.bp.blogspot.com/-5UYF-I3NUgE/UdzQYnoCl5I/AAAAAAAAHic/WZz3vfOnnU8/s1600/2013-07-10_100608.png
Mungkin cuma masalah koneksi internet.
Ok Deh Master Makasih.
Nanti saya Coba Di warnet yang koneksi nya wuss.. :)
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();
});
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
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 […]
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...
coba tanya diblog kang ismet
Makasih tutorialnya Kak Taufik, tapi bagaimana membuat pesan komentar ?
bedanya kode2 ini apa ya kak?
)+/g
(/g
ig
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
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 .. :'(
:-bd Artikel yang sangat bagus dan terperinci, sangat membantu bagi rekan-rekan blogger yang ingin memasang emoticon pada form komentar, salam kenal !
Makasih gan, emoticonnya bisa di Blog saya :) :) :) :)
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.
gk jadi mas, sekarang sudah jadi. Saya ganti codinya.
Mas, mau nanya. Cara modifikasi tampilan Alertnya kayak punyak mas taufik gimana Ya ? :-bd
http://2.bp.blogspot.com/-MYa9fAvEc8U/UhGlFJWeb6I/AAAAAAAABFo/D1ujm21PwOY/s797/f.jpg
udah dijawab diatas itu masbero http://www.dte.web.id/2012/03/jquery-auto-emoticons-for-blogger.html?showComment=1373426659720#c6639328224155726780
Wah, lebih ampuh dari blog kembaran sebelah :D.
Mas mau tanya, gimana caranya agar pesan komentar tidak tampil ketika membalas komentar terkait?
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. :'(
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 :)
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 ?
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 ?
1). Boleh.
2). Untuk menampilkan kode emotikon seperti gambar di bawah sudah ada jawabannya di atas, kode ditulis manual.
:(
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
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/
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
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
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
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 :)
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);
Gua maunya seperti punya abang :D
Mau tanya nih mas Taufik.
Kenapa pada saat klik balas komentar, kotak emoticonnya turun dibawah form komentar ? :p
⇒ /2012/05/masalah-pesan-formulir-komentar-yang.html
Mas Cara Nyembunyiin Formulir Komentar Saat Balas Ini Gimana http://prntscr.com/4u552u
Pelajari → /2013/02/ajax-jquery-memuat-beberapa-bagian.html
Kang taufik, bisa gak emoticonnya diintegrasikan ke comment FB kang, yang kita pasang di blog kang... :)
Keren \o/
makasih atas referensinya mas :)
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]
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
terima kasih, semoga sehat selalu mas taufik
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 .
var emoRange = "#comment-holder, #comments p, div.emoWrap",
yang aku maksud jsfiddle yang emo facebook itu pak [url]https://jsfiddle.net/tovic/b2ounccv/1[/url]
a.querySelector("#emo_box, #comment-holder")
gambar emotikonnya udah rusak tuh mas
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.
Post a Comment
<< Home