Emoticon jQuery for Blogger

Tidak tahu sudah berapa banyak trick emoticon ini sama Beben si bloglang anu ganteng kalem tea ini bagikan. Search sajah deh dengan keyword "emoticon" pada kotak pencarian. Kali ini Beben akan berbagi lagi mengenai si emot, tapi dengan trik jQuery plugins. Untuk sobat yang belum memahami mengenai plug-ins silahkan membaca disini Simple Explanation of the jQuery Plugins.
Karena kalau enggak membaca artikel itu nantinya tidak akan berjalan trik ini sob ;) Sebelum memasuki sesi pokok permasalahan bagaimana membuat emoticon smile (senyum) via jQuery plugins, disini Beben mengambil emoticon versi asli bawaan blogspot punya. Jadi nanti hasil si emotikonnya akan seperti ini

Emoticon Blogger

Bagus kan tuh :-/ Oke mari kita masukan ramuannya dengan mengambil bahan² di toko bangunan terdekat :D Sisipkan script jQuery plugins ini diatas kode tag penutup </body> atau tepat dibawah script jQuery inti.

jQuery Script

Download scriptnya disini download emoticon. Kalau sudah di DL, ekstraklah format rar itu dan buka dalam notepad! Isinya pasti bakal kayak beginih

<script type='text/javascript'>
//<![CDATA[
var emoticons = {

biggrin: '<img src="http://photos1.blogger.com/blogger/7678/802/1600/biggrin.gif" />',
sad: '<img src="http://photos1.blogger.com/blogger/7678/802/1600/sad.gif" />',
wink: '<img src="http://photos1.blogger.com/blogger/7678/802/1600/wink.gif" />',
cool: '<img src="http://photos1.blogger.com/blogger/7678/802/1600/cool.gif" />',
mad: '<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif" />',
omg: '<img src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif" />',
tongue: '<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif" />',
smile: ' <img src="http://photos1.blogger.com/blogger/7678/802/1600/smile.gif" />'

};

var patterns = {

biggrin: /:-\)/gm,
sad: /:-\(/gm,
wink: /;-\)/gm,
cool: /b-\)/gm,
mad: /]\[/gm,
omg: /o_\O/gm,
tongue: /:-\p/gm,
smile: /:\)/gm

};

$(document).ready(function() {
$('p').each(function() {

var $p = $(this);
var html = $p.html();

$p.html(html.replace(patterns.biggrin, emoticons.biggrin)
.replace(patterns.sad, emoticons.sad).replace(patterns.wink, emoticons.wink).replace(patterns.cool, emoticons.cool).replace(patterns.mad, emoticons.mad).replace(patterns.omg, emoticons.omg).replace(patterns.tongue, emoticons.tongue).replace(patterns.smile, emoticons.smile));

});
});
//]]>
</script>

Save

Mudah kan trik emoticon kali ini :) Setelah Beben si bloglang anu ganteng kalem tea praktekan, ternyata pada kolom komentar juga bisa dipakai. Jadi tidak usah lagi pakai emotikon yg ada untuk komentar. Satu dayung 2 sampai 10 pulau terlewati :-"
Satu hal yang harus diperhatikan oleh sobat dalam pemakaian emotikon ini, harus diawali dengan tag <p> Jadi waktu pertama kali melakukan postingan, jangan lupa bikin saja langsung tag pembuka <p> ini. Tenang sob, tidak akan ada efeknya kemana-mana kok, itu sudah aturan maennya saja kok :)

Kalau penggunaan dibagian kotak komentar tidak usah pakai tag <p> dan itu ternyata berkerja. Ini kode-kode emotikon untuk pemakaiannya sob:

Kode	Hasil
: - )
: - (
; - )
b - )
][
o_O
: - p
: )
Cool	Tools

Tanpa spasi yak sob, soalnya kalo ditulis bener bentrok ma emot sayah yg ada di blog ini :D ;)
Resource script by: OnWebDev
Modification by: Beben si bloglang anu ganteng kalem tea :D