Pasang Emoticon Morange Pada Komentar Blogger

Sebenarnya judul di atas hanya mengacu pada emoticon yang saya gunakan sebagai sample. Jadi disini kita bisa tambahkan emoticon apa saja yang kita sukai. Sengaja saya buat sederhana tanpa menggunakan script external agar kita bisa bebas mengedit atau menggantinya dengan emoticon yang kita inginkan.
Pemasangan emoticon ini juga saya buat sesimpel mungkin tanpa harus mengedit template html, jadi hanya menambahkan fungsi jquery pada gadget, dengan cara seperti ini yang awampun tidak akan kesulitan untuk melakukannya.
Fungsi copy paste dibawah ini juga saya buat dengan textarea agar tidak terjadi kesalahan saat mengkopy. Biasanya jika kita mengkopy dengan operamini mobile/handphone, pada saat karakter terputus dan berpindah ke garis berikutnya maka ia akan di baca sebagai spasi. Jika seperti ini maka akan terjadi kesalahan, dan biasanya terjadi pada alamat url yang terjadi ganti baris.
Dan langsung saja copas textarea dibawah ini pada gadget baru. Caranya masuk pada halaman rancagan yaitu pada bagian element laman kemudian pilih tambah gadget, terserah mau pasang dimana saja bebas. Kemudian pilih HTML/javascript dan pastekan isi text pada textarea dibawah ini lalu save/simpan untuk bagian judul kosongkan saja.
TEXTAREA
<br /><script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script><br /><script type='text/javascript'> <br />$(document).ready(function(){<br /> $("#comment-editor").before("<div id='morange'>smiley berfungsi jika ada sepasi didepannya:<br><b>:)</b> :) <b>:D</b> :D <b>:(</b> :( <b>:S</b> :S <b>:P</b> :P <b>;)</b> ;) <b>:O</b> :O <b>(H)</b> (H) <b>:'(</b> :'( <b>:@</b> :@ <b>:|</b> :| <b>(L)</b> (L) <b>(U)</b> (U) <b>(K)</b> (K) <b>(F)</b> (F) <b>+o(</b> +o( <b>|-)</b> |-) <b>(?)</b> (?) <b>:please</b> :please <b>:emm</b> :emm <b>:frozen</b> :frozen</div>");<br />});<br /></script><br /><script type='text/javascript'><br />$(document).ready(function(){<br /> $(".comments").html($(".comments").html()<br /> .replace(/\s:\)/g, "<img src='http://morange.com/images/chatroom2/emotion/a.png' />")<br /> .replace(/\s:D/g, "<img src='http://morange.com/images/chatroom2/emotion/b.png' />")<br /> .replace(/\s:\(/g, "<img src='http://morange.com/images/chatroom2/emotion/c.png' />")<br /> .replace(/\s:S/g, "<img src='http://morange.com/images/chatroom2/emotion/d.png' />")<br /> .replace(/\s:P/g, "<img src='http://morange.com/images/chatroom2/emotion/e.png' />")<br /> .replace(/\s\;\)/g, "<img src='http://morange.com/images/chatroom2/emotion/f.png' />")<br /> .replace(/\s:O/g, "<img src='http://morange.com/images/chatroom2/emotion/g.png' />")<br /> .replace(/\s\(H\)/g, "<img src='http://morange.com/images/chatroom2/emotion/h.png' />")<br /> .replace(/\s:\'\(/g, "<img src='http://morange.com/images/chatroom2/emotion/i.png' />")<br /> .replace(/\s:@/g, "<img src='http://morange.com/images/chatroom2/emotion/j.png' />")<br /> .replace(/\s:\|/g, "<img src='http://morange.com/images/chatroom2/emotion/k.png' />")<br /> .replace(/\s\(\L\)/g, "<img src='http://morange.com/images/chatroom2/emotion/l.png' />")<br /> .replace(/\s\(\U\)/g, "<img src='http://morange.com/images/chatroom2/emotion/m.png' />")<br /> .replace(/\s\(\K\)/g, "<img src='http://morange.com/images/chatroom2/emotion/n.png' />")<br /> .replace(/\s\(\F\)/g, "<img src='http://morange.com/images/chatroom2/emotion/o.png' />")<br /> .replace(/\s\+o\(/g, "<img src='http://morange.com/images/chatroom2/emotion/p.png' />")<br /> .replace(/\s\|-\)/g, "<img src='http://morange.com/images/chatroom2/emotion/q.png' />")<br /> .replace(/\s\(\?\)/g, "<img src='http://morange.com/images/chatroom2/emotion/r.png' />")<br /> .replace(/\s:please/g, "<img src='http://morange.com/images/chatroom2/emotion/s.png' />")<br /> .replace(/\s:emm/g, "<img src='http://morange.com/images/chatroom2/emotion/t.png' />")<br /> .replace(/\s:frozen/g, "<img src='http://morange.com/images/chatroom2/emotion/u.png' />")<br />);<br />});<br /></script><br />
Karena saya menggunakan opsi ganti baris tombol, jadi didalam textarea terdapat kode <br /> jadi hapus saja semua <br /> yang ada di dalam textarea lalu save.
Pada bagian pertama terdapat kode ini,
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
kode tersebut adalah jquery, jadi jika sebelumnya dalam template anda sudah ada jquery, hapus saja kode tersebut. Agar tidak bingung untuk mencari tahu apakan dalam template anda sudah ada jquery atau belum, sebaiknya kode tersebut jangan di masukan dulu. Jika tanpa kode tersebut emoticon tidak muncul berarti kode tersebut perlu dimasukan juga karena dalam templte anda belum ada jquery.
Cukup disini saja . Terima kasih Wassalam..