Tutorial menulis/meletak ayat al-Quran di dalam artikel anda

Assalamu’alaikum WBT.

Seperti tajuk yang tertera, saya akan memberi panduan buat anda yang mahu meletakkan ayat al-Quran ataupun tulisan Arab yang lain dengan lebih kemas dan tersusun, bukan melalui gambar dan lain-lain. Tutorial ini hanya memerlukan sedikit pengetahuan tentang kod html. 🙂

Langkah 1:

• Buat artikel baru.

Langkah 2:

• Buka laman web Quran.com.

Langkah 3:

• Pilih surah dan ayat yang anda mahukan. Eg: Surah al-Fatihah.

Langkah 4:

• Disebelah kiri pada bahagian Languages, sila pilih Arabic with Tashkeel (Baris).

• Sekiranya anda ingin makna didalam bahasa Melayu, sila pilih Malay pada bahagian Other Languages.

Langkah 5:

• Buka bahagian Source / Code / HTML di editor web/blog anda. Eg:

Langkah 6:

• Copy dan Paste kod dibawah pada bahagian yang anda mahukan.

<p style=”font-size:30px; font-family: Traditional Arabic; text-align:justify; line-height:50px; direction: rtl;” dir=”rtl”>الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ</p>

• Tukar ayat surah al-Fatihah tersebut dengan ayat yang anda mahukan dari Quran.com.

Contoh:

الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ. الرَّحْمَٰنِ الرَّحِيمِ. مَالِكِ يَوْمِ الدِّينِ.

Ayat diatas menggunakan kod dibawah:

<p style=”font-size:30px; font-family: Traditional Arabic; text-align:justify; line-height:50px; direction: rtl;” dir=”rtl”>الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ. الرَّحْمَٰنِ الرَّحِيمِ. مَالِكِ يَوْمِ الدِّينِ.</p>

Manakala ayat dibawah ini ditulis tanpa menggunakan kod HTML diatas :

.الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ. الرَّحْمَٰنِ الرَّحِيمِ. مَالِكِ يَوْمِ الدِّينِ

Nampak kan perbezaannya? Cara ini telah dicuba di Blogspot, Joomla dan juga WordPress.

Saya menggunakan laman web Quran.com untuk setiap ayat yang diambil kerana ayat dari laman web lain ada yang tidak serasi. Eg: Quran Explorer.

Tutorial ini ditulis kerana saya teringat seorang sahabat (Azharuddin) yang bertanya kepada saya bagaimana untuk meletakkan ayat al-Quran di blog beliau. Terima kasih kerana bertanya walaupun tidak dapat menjawap persoalan pada waktu tu. 😀

Saya lebih suka menggunakan gambar dalam artikel saya walaupun terdapat kekurangan disitu. Namun gambar lebih mudah jika ingin copy paste kerana struktur ayat tidak akan lari.

Mohon sebarkan dan berkongsi dengan rakan-rakan, semoga bermanfaat untuk kita semua.

Jazakallah. 🙂

Wassalamu’alaikum.

Yang benar,

Mahmud al-Kauthar Mohamad Rabeh
Sarjana Muda Teknologi Kejuruteraan Perisian dengan Kepujian (2011-2013)
Kolej Universiti Islam Antarabangsa Selangor (KUIS)
mahmud [at] iluvislam [dot] com

Kredit: Quran.com

Facebook Comments

comments