Thursday, 28 March 2024

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:

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

Related Posts Plugin for WordPress, Blogger...

Facebook Comments

comments

Comments

10 Responses to “Tutorial menulis/meletak ayat al-Quran di dalam artikel anda”
  1. famtasi says:

    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

  2. Baraya says:

    Syukron. Tipsnya sangat berguna buat Saya terutama ketika edit Arab/Quran di blog saya tentang “belajar fiqih”.
    Baraya recently posted.. Kriteria Artikel Yang BaikMy Profile

  3. Nouva Litera says:

    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"My Profile

  4. Rina says:

    Terima kasih tutorialnya, bisa saya terapkan dalam blog Islami saya nie
    Selamat berpuasa ๐Ÿ™‚
    Rina recently posted.. Create Responsive Horizontal Dropdown Navigation Menu with HTML & CSSMy Profile

  5. Hasimah Muda says:

    bagaimana untuk copy satu kalimah daripada ayat

  6. Mas says:

    Terima kasih atas artikel ini. Alhamdulillah ianya telah membantu saya dalam penulisan blog.

  7. This Is very informative content i really enjoy this Article
    Read Surah Al Fatihah recently posted.. Surah Al BaqarahMy Profile

Trackbacks

Check out what others are saying about this post...
  1. […] Bertambah Dosa – iLuvislam.com – Penjelasan tudung : al-Azim.com – Blog Selamat Tinggal Dunia – Quran.com – FB KautharHilmyZ – Gambar diambil dari Google ImagesTweet Share […]



Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a Gravatar!

CommentLuv badge