Sunday, 11 December 2016

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

basmalah 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. icon smile Tutorial menulis/meletak ayat al Quran di dalam artikel anda

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

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).

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

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

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

Langkah 5:

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

editor 300x80 Tutorial menulis/meletak ayat al Quran di dalam artikel anda

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. icon biggrin Tutorial menulis/meletak ayat al Quran di dalam artikel anda

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. icon smile Tutorial menulis/meletak ayat al Quran di dalam artikel anda

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

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

Facebook Comments

comments

Comments

7 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

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