Menulis Arab Pada Blog Amp HTML

Menulis Arab Pada Blog Amp HTML Kebanyakan blogger biasa menulis artikel dengan huruf atau font biasa. Tapi, jika sobat berbagi artikel tentang Agama Islam, tentunya sobat pernah menemui kesulitan dalam memasukkan dalil Al-Qur'an bukan? Cara paling mudah ketika sobat kesulitan dalam memasukkan dalil Al-Quran dalam blog adalah hanya dengan menyertakan terjemahannya saja tanpa menulis hufuf Arabnya.

Nah, berhubung karena sebentar lagi kita akan memasuki bulan mulia yaitu Ramadhan. maka kesempatan kali ini saya akan berbagi tutorial sederhana tentang cara memasukkan atau menulis huruf Arab kedalam blog Amp Html. Bagaimana caranya? Berikut adalah cara sederhana dan mudah untuk menuliskan tulisan Arab ke dalam blog yang sudah valid amp.

Cara Menulis Arab Pada Blog Amp HTML

Sobat masuk ke website http://www.arabic-keyboard.org/, dan tulislah tulisan Arab yang ingin sobat masukkan kedalam blog. Misal, sobat ingin menuliskan Doa Niat Berpuasa maka tulis pada website tersebut.

Langkah Pertama

Copy CSS di bawah ini dan tempel 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;
}

@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
}

Simpan CSS di atas pada template sobat, terserah sobat ingin mengedit class nya gmana, Seusaikan font-size di atas sesuai kebutuhan sobat.

CSS di atas bisa juga di pakai cuma satu saja, cuma tulisan arabnya sedikit kecil. saran saya sobat pakai dua duaya saja

Langkah Kedua

Kemudian Untuk menulis huruf bahasa arab pada halaman postingan, ubah mode compose menjadi HTML dan tulis kode pemanggilnya seperti di bawah ini:

<div class="arab">
نَوَيْتُ صَوْمَ غَدٍ عَنْ اَدآءِ فَرْضِ شَهْرِ رَمَضَانَ هَذِهِ السَّنَةِ لِلّهِ تَعَالَى</div>

Dan hasilnya seperti ini :

نَوَيْتُ صَوْمَ غَدٍ عَنْ اَدآءِ فَرْضِ شَهْرِ رَمَضَانَ هَذِهِ السَّنَةِ لِلّهِ تَعَالَى

Demikianlah artikel mengenai Menulis Arab Pada Blog Amp HTMLSemoga bermanfaat untuk sharing dalil Al-Qur'an dan Hadits.