Welcome to www.winkamaru.com

Cara Menulis Arab di Blog AMP HTML


Sebenarnya menulis huruf arab di blog bisa dilakukan melalui alternatif penggunaan gambar hasil screenshot atau scan. Tetapi hal tersebut dirasa belum maksimal terutama jika memang kita sebenarnya hendak membuat tulisan arab di blog layaknya tulisan latin.

Oleh karena itu untuk menulis huruf arab atau memasukkan ayat-ayat al-quran dalam tulisan di blog dapat kita lakukan melalui penulisan mode HTML dan tentu ini lebih praktis karena cukup melakukan copas huruf arab atau bisa juga menulisnya langsung melalui beberapa tool pendukung yang ada di internet. Penggunaan tool menulis arab akan lebih baik jika kita memang terbiasa menulis arab secara langsung.

Salah satu contoh hasil dari tutorial memasukkan huruf arab atau ayat al-quran ke dalam artikel / postingan blog. Dapat dilihat di bawah ini:

طَلَبُ الْعِلْمِ فَرِيْضَةٌ عَلَى كُلِّ مُسْلِمٍ وَمُسْلِمَةٍ

Jadi mari kita lanjutkan pada tutorial cara memasukkan ayat al-quran atau cara menulis arab di blog pada ulasan berikut:

Cara Menulis Arab (Memasukkan Ayat Al-Quran) Ke dalam Artikel Blog AMP HTML

Cara pertama kita akan melakukan proses penyiapan agar blog dapat memasukkan tulisan arab ke dalam postingan dengan langkah-langkah berikut:

Langkah 1
Silakan masuk ke menu edit tema blog melalui pengeditan HTML Template, Lalu masukkan kode berikut pada style amp-custom.

 .arab {   
   font-size: 22px;   
   line-height: 48px;   
   font-family: "KFGQPC Uthman Taha Naskh",KFGQPC_Naskh,"Traditional Arabic",Tahoma,sans-serif;   
   font-weight: normal;   
   text-align: right;   
   direction: rtl;   
  }   

Selanjutnya tambahkan lagi kode berikut ini:

 @font-face{   
  font-family:'me_quran';   
  src:url('https://kangismet.github.io/fonts/me_quran.eot');   
  src:url('https://kangismet.github.io/fonts/me_quran.eot?#iefix') format('embedded-opentype'),   
  url('https://kangismet.github.io/fonts/me_quran.ttf') format('truetype');   
  font-weight:normal;   
  font-style:normal   
  }   

Contoh penempatan kode tersebut dapat dilihat seperti gambar berikut:

Penempatan Kode di Dalam Style amp-custom

Langkah 2
Simpan perubahan template blogger terlebih dahulu. Jika sudah berhasil maka selanjutnya setiap kali akan menulis artikel untuk postingan blog. Silakan menulis melalui mode HTML lalu masukkan tulisan arab tersebut dengan kode seperti berikut:

 <div class="arab">   
  pastekan huruf arab anda di sini</div>   

Silakan ganti tulisan "pastekan huruf arab anda di sini" dengan huruf arab yang anda copas dari sumber lain: tool arabic-keyboard, al-quran online, maupun tulisan arab dari microsoft office word. dll. Sehingga menjadi seperti ini:

 <div class="arab">   
  طَلَبُ الْعِلْمِ فَرِيْضَةٌ عَلَى كُلِّ مُسْلِمٍ وَمُسْلِمَةٍ</div>   

Jika huruf nya dianggap sangat kecil, silakan ubah font size menjadi large maupun x-large. seperti:

1. font size diubah menjadi large.

 <div class="arab">   
  <span style="font-size: large;">طَلَبُ الْعِلْمِ فَرِيْضَةٌ عَلَى كُلِّ مُسْلِمٍ وَمُسْلِمَةٍ</span></div>   

طَلَبُ الْعِلْمِ فَرِيْضَةٌ عَلَى كُلِّ مُسْلِمٍ وَمُسْلِمَةٍ

2. font size diubah menjadi x-large (largest), bold dan rata kanan.

 <div class="arab">   
  <div style="text-align: right;">   
  <b><span style="font-size: x-large;">نَطَلَبُ الْعِلْمِ فَرِيْضَةٌ عَلَى كُلِّ مُسْلِمٍ وَمُسْلِمَةٍ</span></b></div>   
  </div>   

طَلَبُ الْعِلْمِ فَرِيْضَةٌ عَلَى كُلِّ مُسْلِمٍ وَمُسْلِمَةٍ

N.B
Jika Anda terbiasa menulis arab secara langsung melalui keyboard komputer. Maka anda bisa menulis arab menggunakan tool arabic-keyboard.org. Lalu tulisan arab tersebut dapat dicopas dan dimasukkan ke dalam postingan HTML blog seperti kode di atas.

contoh penulisan huruf arab menggunakan arab-keyboard.org

Sementara jika Anda akan mengambil beberapa penggalan ayat al-quran untuk dimasukkan ke dalam blog. Maka Anda bisa melakukan copy paste ayat al-quran melalui sumber offline maupun online. Salah satu sumber al-quran online bisa melalui: https://litequran.net.

tampilan depan litequran.net

Berikut hasil penerapan tutorial ini pada surat Al-Ikhlas.

Surat Al-Ikhlas 1 - 4
بِسْمِ اللّٰهِ الرَّحْمٰنِ الرَّحِيْمِ

قُلْ هُوَ اللّٰهُ اَحَدٌۚ

اَللّٰهُ الصَّمَدُۚ

لَمْ يَلِدْ وَلَمْ يُوْلَدْۙ

وَلَمْ يَكُنْ لَّهٗ كُفُوًا اَحَدٌ

Demikian, semoga ulasan di atas membawa informasi yang baik dan berguna bagi Anda.