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.
- Tukar ayat surah al-Fatihah tersebut dengan ayat yang anda mahukan dari Quran.com.
Contoh:
الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ. الرَّحْمَٰنِ الرَّحِيمِ. مَالِكِ يَوْمِ الدِّينِ.
Ayat diatas menggunakan kod dibawah:
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
Categories: al-Ahya' Yaumiyan, Bicara, iLuvislam.Com, Islam, Komputer, Laman Hikmah, Palestin, Politik, TechNoloGy, Tutorial
hieiboii sawamura
by Hieiboii Sawamura on Aug 16, 2011 at 5:55 AM
[...] Bertambah Dosa – iLuvislam.com – Penjelasan tudung : al-Azim.com – Blog Selamat Tinggal Dunia – Quran.com – FB KautharHilmyZ – Gambar diambil dari Google ImagesTweet Share [...]
by Aurat – Kena Tunggu Datang Seru? - KautharHilmyZ on Dec 12, 2011 at 6:54 PM
assalammu’laikum…mau tanya biar tulisan arabnya seperti di quran.com bagaiman caranya ya..setelah saya lakukan cara di atas bisa tampil tapi kok tidak seperti di quran.com..di quran lebih tebal dan lebih jelas baik harakatnya maupun hurufnya…bagaimana ya cara nya
by famtasi on Dec 15, 2011 at 10:32 AM
Syukron. Tipsnya sangat berguna buat Saya terutama ketika edit Arab/Quran di blog saya tentang “belajar fiqih”.
Baraya recently posted.. Kriteria Artikel Yang Baik
by Baraya on Feb 7, 2012 at 6:22 AM
Jazakallahhu khair.
Alhamdulillah kerana mendatangkan manfaat buatmu.
Kauthar.Net recently posted.. Aurat – Kena Tunggu Datang Seru?
by Kauthar.Net on Feb 7, 2012 at 8:09 AM
wooow , baru tau gan ..
langsung tak praktekin aja nih
mau buat basmallah buat awalan artikel ku
Nouva Litera recently posted.. Motivasi Pengembangan Diri : "Segalanya Bagiku"
by Nouva Litera on Mar 16, 2012 at 4:21 PM
Terima kasih tutorialnya, bisa saya terapkan dalam blog Islami saya nie
Selamat berpuasa
Rina recently posted.. Create Responsive Horizontal Dropdown Navigation Menu with HTML & CSS
by Rina on Jul 23, 2013 at 10:11 PM
bagaimana untuk copy satu kalimah daripada ayat
by Hasimah Muda on Oct 15, 2014 at 1:22 PM