Emoticon Blogger Otomatis dengan jQuery

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

@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... @@,

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 :&#39;( :\ :p B) :Q :Ozz 7:( \o/ **p &lt;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

@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", ":)");

@trii waluyo Betul. Betul. Betul.

@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) :( :&#39;( :)): :| :~ :@ :? 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:&#39;\(/g, "http://lh3.googleusercontent.com/-PChZ52qAc5c/T6NQiun5CxI/AAAAAAAAAcI/qbMCrPN5mJs/s128/Crying.gif", ":&#39;(");
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();
});

});