Membuat Aplikasi Keyboard Bahasa Arab di Blog

Buat rekan2 muslim yang memiliki blog islami ataupun blog pribadi, saya punya informasi nih bagaimana caranya membuat sebuah aplikasi keyboard bahasa arab seperti gambar berikut ini.

Pada penggunaannya, keyboard virtual pada gambar di atas memakai klik mouse untuk menghasilkan input abjad arabiyah pada layar atau media di atasnya. Dan yang menjadi kelemahannya adalah, bahwa keyboard ini tidak dapat melakukan masukan selain dari kotak yang ada di atasnya..

Ada yang tertarik??? OK dehh langsung aja nih saya kasih kode html nya, tinggal copas aja...

<form name="form1">
<table align="center" cellpadding="0" cellspacing="0" style="width: 450px;"><tbody>
<tr><td dir="rtl"><br />
<center>
<textarea cols="56" dir="rtl" id="Textarea1" name="text1" rows="4" style="color: black; font-family: Arial (Arabic); font-size: 11pt; font-weight: bold;" wrap="PHYSICAL"></textarea> <br />
</center> </td></tr>
<tr><td><br />
<br />
<center> <br />
 <br />
</center> </td></tr>
<tr><td height="52"><div class="separator" style="clear: both; text-align: center;">
<a href="http://lh5.ggpht.com/_nIHBe5jdbIU/TAekv9EC44I/AAAAAAAAAgE/RI8OjoJzUYk/key1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="156" src="http://lh5.ggpht.com/_nIHBe5jdbIU/TAekv9EC44I/AAAAAAAAAgE/RI8OjoJzUYk/key1.gif" usemap="#key" width="450" /></a></div>
<br />
<div align="center">
<img border="0" height="43" src="http://lh6.ggpht.com/_nIHBe5jdbIU/TAek_9brt2I/AAAAAAAAAgI/xGIYWfP0Gh8/key2.gif" usemap="#key2" width="354" /> </div>
</td></tr>
</tbody></table>
<br />
<br />
<br />
<br />
<center><br />
<map name="key"><area coords="119,123,292,146" onclick="form1.text1.value=form1.text1.value + ' ';" shape="RECT"></area><area coords="7,5,32,29" onclick="form1.text1.value=form1.text1.value + 'ذ';" shape="RECT"></area><area coords="37,4,60,26" onclick="form1.text1.value=form1.text1.value + '١';" shape="RECT"></area><area coords="65,4,89,28" onclick="form1.text1.value=form1.text1.value + '٢';" shape="RECT"></area><area coords="96,3,117,28" onclick="form1.text1.value=form1.text1.value + '٣';" shape="RECT"></area><area coords="125,5,147,27" onclick="form1.text1.value=form1.text1.value + '٤';" shape="RECT"></area><area coords="155,5,176,28" onclick="form1.text1.value=form1.text1.value + '٥';" shape="RECT"></area><area coords="183,4,205,27" onclick="form1.text1.value=form1.text1.value + '٦';" shape="RECT"></area><area coords="212,5,235,27" onclick="form1.text1.value=form1.text1.value + '٧';" shape="RECT"></area><area coords="241,6,263,28" onclick="form1.text1.value=form1.text1.value + '٨';" shape="RECT"></area><area coords="271,6,292,30" onclick="form1.text1.value=form1.text1.value + '٩';" shape="RECT"></area><area coords="298,4,324,30" onclick="form1.text1.value=form1.text1.value + '٠';" shape="RECT"></area><area coords="334,92,361,118" onclick="form1.text1.value=form1.text1.value + 'ظ';" shape="RECT"></area><area coords="306,92,331,114" onclick="form1.text1.value=form1.text1.value + 'ز';" shape="RECT"></area><area coords="276,93,300,115" onclick="form1.text1.value=form1.text1.value + 'و';" shape="RECT"></area><area coords="246,93,271,115" onclick="form1.text1.value=form1.text1.value + 'ة';" shape="RECT"></area><area coords="219,91,245,115" onclick="form1.text1.value=form1.text1.value + 'ى';" shape="RECT"></area><area coords="190,91,214,115" onclick="form1.text1.value=form1.text1.value + 'لا';" shape="RECT"></area><area coords="159,93,186,115" onclick="form1.text1.value=form1.text1.value + 'ر';" shape="RECT"></area><area coords="130,95,153,118" onclick="form1.text1.value=form1.text1.value + 'ؤ';" shape="RECT"></area><area coords="101,90,127,117" onclick="form1.text1.value=form1.text1.value + 'ء';" shape="RECT"></area><area coords="74,92,96,115" onclick="form1.text1.value=form1.text1.value + 'ئ';" shape="RECT"></area><area coords="351,61,376,88" onclick="form1.text1.value=form1.text1.value + 'ط';" shape="RECT"></area><area coords="321,63,348,86" onclick="form1.text1.value=form1.text1.value + 'ك';" shape="RECT"></area><area coords="293,64,315,87" onclick="form1.text1.value=form1.text1.value + 'م';" shape="RECT"></area><area coords="263,63,286,87" onclick="form1.text1.value=form1.text1.value + 'ن';" shape="RECT"></area><area coords="234,62,258,85" onclick="form1.text1.value=form1.text1.value + 'ت';" shape="RECT"></area><area coords="206,64,229,87" onclick="form1.text1.value=form1.text1.value + 'ا';" shape="RECT"></area><area coords="178,64,200,87" onclick="form1.text1.value=form1.text1.value + 'ل';" shape="RECT"></area><area coords="148,63,170,86" onclick="form1.text1.value=form1.text1.value + 'ب';" shape="RECT"></area><area coords="118,64,142,89" onclick="form1.text1.value=form1.text1.value + 'ي';" shape="RECT"></area><area coords="90,64,112,87" onclick="form1.text1.value=form1.text1.value + 'س';" shape="RECT"></area><area coords="60,64,84,86" onclick="form1.text1.value=form1.text1.value + 'ش';" shape="RECT"></area><area coords="371,34,397,58" onclick="form1.text1.value=form1.text1.value + 'د';" shape="RECT"></area><area coords="343,35,368,59" onclick="form1.text1.value=form1.text1.value + 'ج';" shape="RECT"></area><area coords="315,33,339,58" onclick="form1.text1.value=form1.text1.value + 'ح';" shape="RECT"></area><area coords="285,35,310,60" onclick="form1.text1.value=form1.text1.value + 'خ';" shape="RECT"></area><area coords="255,34,280,57" onclick="form1.text1.value=form1.text1.value + 'ه';" shape="RECT"></area><area coords="229,34,251,57" onclick="form1.text1.value=form1.text1.value + 'ع';" shape="RECT"></area><area coords="198,35,222,58" onclick="form1.text1.value=form1.text1.value + 'غ';" shape="RECT"></area><area coords="169,34,193,57" onclick="form1.text1.value=form1.text1.value + 'ف';" shape="RECT"></area><area coords="140,33,165,58" onclick="form1.text1.value=form1.text1.value + 'ق';" shape="RECT"></area><area coords="110,35,134,57" onclick="form1.text1.value=form1.text1.value + 'ث';" shape="RECT"></area><area coords="82,36,103,57" onclick="form1.text1.value=form1.text1.value + 'ص';" shape="RECT"></area><area coords="51,35,71,55" onclick="form1.text1.value=form1.text1.value + 'ض';" shape="RECT"></area></map> <br />
<map name="key2"><area coords="317,5,343,33" onclick="form1.text1.value=form1.text1.value + '؛';" shape="RECT"></area><area coords="282,4,308,32" onclick="form1.text1.value=form1.text1.value + 'إ';" shape="RECT"></area><area coords="254,6,280,33" onclick="form1.text1.value=form1.text1.value + '،';" shape="RECT"></area><area coords="225,4,251,35" onclick="form1.text1.value=form1.text1.value + 'ـ';" shape="RECT"></area><area coords="194,5,221,33" onclick="form1.text1.value=form1.text1.value + 'أ';" shape="RECT"></area><area coords="164,6,192,32" onclick="form1.text1.value=form1.text1.value + 'لأ';" shape="RECT"></area><area coords="129,6,158,35" onclick="form1.text1.value=form1.text1.value + '؟';" shape="RECT"></area><area coords="100,6,127,32" onclick="form1.text1.value=form1.text1.value + '.';" shape="RECT"></area><area coords="71,6,97,34" onclick="form1.text1.value=form1.text1.value + ',';" shape="RECT"></area><area coords="36,6,62,34" onclick="form1.text1.value=form1.text1.value + 'آ';" shape="RECT"></area><area coords="8,6,34,34" onclick="form1.text1.value=form1.text1.value + 'لآ';" shape="RECT"></area> <br />
</map></center></form>

Semoga Berhasil.....