Skip to main content

Cara Membuat Huruf Arab di Postingan Blog AMP HTML

Website Mini - Sebelumnya, Saya sudah posting Cara Membuat Tulisan Bismillah Di Setiap Awal Postingan Blog. Untuk kesempatan kali ini, Saya akan coba postingan Cara Membuat Huruf Arab di Postingan Blog AMP HTML.

Postingan ini sangat cocok untuk Anda yang suka menyajikan konten agama Islam pada blog Anda. Cara ini juga sudah valid AMP, jadi aman bagi Anda yang sudah menggunakan blog AMP HTML.

Untuk caranya silahkan ikuti langkah di bawah ini agar tulisan Arab di konten Anda menjadi rapih dan mudah dibaca.

Langkah pertama.
Silahkan simpan CSS berikut ini di style amp-custom blog Anda.


@font-face {
  font-family: 'me_quran';
  src: url('https://cdn.rawgit.com/KompiAjaib/font/master/me_quran.eot');
  src: url('https://cdn.rawgit.com/KompiAjaib/font/master/me_quran.eot?#iefix') format('embedded-opentype'), url('https://cdn.rawgit.com/KompiAjaib/font/master/me_quran.woff') format('woff'), url('https://cdn.rawgit.com/KompiAjaib/font/master/me_quran.ttf') format('truetype'), url('https://cdn.rawgit.com/KompiAjaib/font/master/me_quran.svg#me_quran') format('svg');
  font-weight: normal;
  font-weight: 400;
  font-style: normal;
}
.arab {
  font-size: 22px;
  line-height: 2.2;
  font-family: me_quran, sans-serif;
  font-weight: normal;
  text-align: right;
  direction: rtl;
}

Langkah kedua
Jika ingin menambah tulisan arab di dalam postingan, silahkan gunakan kode seperti ini.


<div class="arab">
Tulisan Arab di sini
</div>

Tulis kode tadi pada mode HTML.

Jadi lebih baik, tulis dulu semua postingan yang menggunakan huruf latin sampai selesai dengan mode Compose. Setelah selesai kemudian beralihkan ke mode HTML, barulah tuliskan huruf Arab-nya dengan kode di atas. Untuk setiap baris ayat tambahkan kode <br /> untuk baris baru.

Contoh penulisannya seperti di bawah ini (dalam mode HTML), Q.S. Al-Fatihah.


<div class="arab">
بِسۡمِ اللهِ الرَّحۡمٰنِ الرَّحِيۡمِ<br />
اَلۡحَمۡدُ لِلّٰهِ رَبِّ الۡعٰلَمِيۡنَۙ<br />
الرَّحۡمٰنِ الرَّحِيۡمِۙ<br />
مٰلِكِ يَوۡمِ الدِّيۡنِؕ<br />
اِيَّاكَ نَعۡبُدُ وَاِيَّاكَ نَسۡتَعِيۡنُؕ<br />
اِهۡدِنَا الصِّرَاطَ الۡمُسۡتَقِيۡمَۙ<br />
صِرَاطَ الَّذِيۡنَ اَنۡعَمۡتَ عَلَيۡهِمۡ ۙ<br />
غَيۡرِ الۡمَغۡضُوۡبِ عَلَيۡهِمۡ وَلَا الضَّآلِّيۡنَ
</div>

Sumber: https://www.kompiajaib.com/2018/01/cara-membuat-postingan-di-blog-dengan.html

You Might Also Like:

Buka Komentar