x2icons

okey, puas bermain JavaScript (sampai mabok script), sekarang waktunya bagi-bagi ilmu.
: aku ada pertanyaan

pinginnya hanya menulis di postingan aku tersenyum :D
nanti jadinya otomatis tampil : aku tersenyum

hmmm..?? enggak sulit kalau tahu caranya!

1. yg dijamin berhasil, praktis dan sedikit radikal : ya pindah aja dari Blogger ke platform yg menyediakan fasilitas itu, seperti Tabulas.com, atau Blogsome/Wordpress! :)lalu aktifkan fasilitas smiley-nya.
   Ya, tapi itu sedikit gila tapi solusi!
2. Tapi, gaperlu pindah alamat blog, sebab pada intinya, semua sama yakni: di HTML cuma harus ketulis kek gini : aku sedang tersenyum <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons6/4.gif" style=vertical-align:bottom">
   kalau di blog kamu bisa dibuat plugin-auto-smiley, ya hasilnya bakal sama dengan milik mereka.
3. Alat bantu yakni icon2 smiley milik YahooEmoticons bisa dilihat di Yahoo emoticons by mus. ada petunjuk disana, dan, tinggal copy-paste aja. gampang kok!
4. Tapi kalo otomatis seperti kamu mau, dan blog kamu enggak nyediain feature autosmiley..
5. ..atau kamu pingin punya autosmiley sendiri... ? hmmm,, kita pasang x2iconPlugin aja, iyuuuuk!.

sedikit ribet sih saat instalasinya..,
tapi setelah sekalinya berhasil, seterusnya kamu punya otomatis smiley. itukah yg kau mau?
neh, click di 3 langkah berikut ini:

Langkah 1 : membuat array

Umpamanya kamu punya rencana bikin x2icons dari 5 gambar, yg kamu lakukan adalah mendata dulu simbol dan alamatnya. seperti gini:

simbol	icon	lokasi gambar
:)		http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons6/4.gif
:(|)		http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons6/51.gif
<):)		http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons6/48.gif
:write:		http://i83.photobucket.com/albums/j313/x2nie/blue/pencil.gif
:(		http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons6/2.gif

maka kamu tinggal buat variabel array, awalnya seperti ini :
var x2icons = new Array(
":)", "http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons6/4.gif",
":(|)","http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons6/51.gif",
"<):)","http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons6/48.gif",
":write:", " http://i83.photobucket.com/albums/j313/x2nie/blue/pencil.gif ",
":(","http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons6/2.gif"
);

hati-hati dalam membuat urutannya.
kalau salah urutan, simbol :) akan merusak simbol <):)
maka <):) harus ditaruh sebelum :)
dan :(|) harus ditaruh sebelum :(

karakter < sebaiknya diganti dengan&lt; dan
> diganti dengan &gt; lalu lalu " diganti dengan &quot;
juga simbol & kamu harus menggantinya dengan &amp;
kenapa? enggak tau, gue enggak diundang pas waktu peraturannya dibuat...

so, urutan array-nya jadi begini:
<script type="text/javascript" language="JavaScript"> var x2icons = new Array(
"<):)","http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons6/48.gif",
"&lt;):)","http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons6/48.gif",
":)", "http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons6/4.gif",
":(","http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons6/2.gif",
":(|)","http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons6/51.gif",
":write:", "http://photobucket.com/x2nie/x2icons/pencil.gif"
); </script>
letakkan script di atas sebelum </head> di template kamu.

di sini sering terjadi kesalahan
perhatikan tanda koma tiap akhir array. array yg terakhir tidak menggunakan koma.

Langkah 2 : membuat function

berikutnya, kita tanam functionnya, boleh dibawah scipt di atas tadi, sangat dianjurkan menaruhnya sebelum </head>

<script type="text/javascript" language="JavaScript">
function apply_x2icons(blockId) {
   var dat= document.getElementById(blockId).innerHTML;
   for (var i = 0; i < ((x2icons.length /2)); i++) {
      while ( dat.indexOf(x2icons[i*2]) >= 0) {
         dat = dat.replace(x2icons[i*2], 
         '<img src="'+x2icons[(i*2)+1]+'">'); 
      }
   }
   document.getElementById(blockId).innerHTML = dat;
} </script>

Langkah 3 : mengaktifkan x2icons

Nah, yang ini mudah. buatlah container HTML yg akan otomatis diganti simbol-simbolnya menjadi gambar.
misalnya area postingan. So, cari aja<Blogger>.
hasilnya kek gini :

<div id="x2icon_Area">
<Blogger>
<!----bla bla bla, baris2 kode disini --->
</Blogger>
</div>


atau seluruh halaman? letakkan persis di sebelah body, begini :


<body>
<div id="x2icon_Area">
<!----bla bla bla, baris2 kode disini --->
</div>
</body>

selesai? iya! tinggal satu: aktifkan! yakni panggil function di saat body-load. begini:

<body onload="apply_x2icons('x2icon_Area');">

coba dulu deh, kali aja boonq!?

okey, coba kita lihat hasil tutorial ini (hanya contoh,terbatas 5 icon tsb. yg didaftarkan, anda bisa menambah sendiri,nanti!)

ketik sesuatu :
..lalu click >> 1 >> 2.
dan lihat=>

Credits

x2iconPlugin
Author : x2nie © June 2006.
some portion using Yahoo (Corp.) Messager Emoticon Artwork

pertama kali terinspirasi dari shoutBox/c-box punya mas Balung yg bisa "naik motor" dan "ngopi dulu"
custom smiley di postingan punya teteh Moeng, Unwinged
large variety smileis di blogfam community.
juga Open/Free Yahoo Emoticon by Mus
nyobain emoticon di blogsome dan request serupa dari teman-teman.
All Right reserved.

Tips n Trics

• Anda bisa menambah icon anda sendiri. caranya ubahlah array di Langkah 1.
• ukuran icon (panjang x lebar) tidak harus seragam. namun sebaiknya tinggi sama dengan font yakni 16pixel.
• Banyaknya icon yg kamu definisikan, tidak memperlambat waktu loading; melainkan jumlah icon yg sedang digunakan saja.

hati-hati dalam penggunaan nama simbol, dan nama container. telitilah huruf kapital!

: Oke deh, berarti.... bisa dipakai untuk shoutbox juga khan?

hahaha! seharusnya sih,, masalahnya shoutbox akan refresh pada waktu user mengclick "shout!"
yang artinya, gambar/icon tadi akan kembali ke simbol awal...!
perlu element-timer agar gambar yg dibalikin ke simbol, dibalik lagi ke gambar. Namun jika itu dilakukan, beban Browser akan berat kalau dijalankan setiap waktu. (padahal memang harus dikerjakan tiap saat)

Di lain kesempatan deh, coba kita bahas khusus untuk masalah ini.