/* Example CSS Code */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333333;
}
/* Font Arabic Uthmani Normal */
@font-face {
font-family: UthmanicHafs_V22;
font-style: normal;
font-weight: normal;
font-display: swap;
src: url("https://cdn.jsdelivr.net/gh/imansani93/imansani.com@main/font/Arabic/UthmanicHafs_V22.ttf") format("truetype");
}
/* Font Arabic Uthmani Tebal */
@font-face {
font-family: UthmanicHafs1B Ver13;
font-style: normal;
font-weight: bold;
font-display: swap;
src: url("https://cdn.jsdelivr.net/gh/imansani93/imansani.com@main/font/Arabic/UthmanicHafs1B%20Ver13.ttf") format("truetype");
}
/* Kode CSS Font Arabic by imansani.com*/
.is-boxArab {
background-color: #ffffff;
border: 1px solid #eceff1;
border-radius: 8px;
padding: 10px;
margin: 1.5em 0;
box-shadow: 0 10px 8px -8px rgba(0,0,0,.05)
}
.is-teksArab {
font-family: 'UthmanicHafs_V22',serif;
font-size: 34px;
font-weight: 400;
text-align: right;
direction: rtl;
line-height: 1.8;
}
.is-teksLatin {
margin-top: 15px;
font-style: italic;
line-height: 1.6;
}
.is-artiArab {
position: relative;
background-color: #f9f9fb;
font-weight: 400;
border: 1px solid #eceff1;
border-radius: 4px;
padding: 20px 10px 10px;
margin: 2.5em 0 0;
line-height: 1.6;
}
.is-artiArab:before {
content: "Artinya";
position: absolute;
font-weight: bold;
border-radius: 50px;
background-color: #f9f9fb;
border: 1px solid #eceff1;
padding: 0 15px 1px;
top: -17px;
left: 15px;
}<div class="is-boxArab">
<div class="is-teksArab">
بِسْمِ اللّٰهِ الرَّحْمٰنِ الرَّحِيْمِ ١ اَلْحَمْدُ لِلّٰهِ رَبِّ الْعٰلَمِيْنَۙ ٢ الرَّحْمٰنِ الرَّحِيْمِۙ ٣ مٰلِكِ يَوْمِ الدِّيْنِۗ ٤ اِيَّاكَ نَعْبُدُ وَاِيَّاكَ نَسْتَعِيْنُۗ ٥ اِهْدِنَا الصِّرَاطَ الْمُسْتَقِيْمَۙ ٦ صِرَاطَ الَّذِيْنَ اَنْعَمْتَ عَلَيْهِمْ ۙ غَيْرِ الْمَغْضُوْبِ عَلَيْهِمْ وَلَا الضَّاۤلِّيْنَࣖ ٧
</div>
<div class="is-teksLatin">
Bismillâhir-raḫmânir-raḫîm. Al-ḫamdu lillâhi rabbil-‘âlamîn, ar-raḫmânir-raḫîm, mâliki yaumid-dîn. Iyyâka na‘budu wa iyyâka nasta‘în. ihdinash-shirâthal-mustaqîm, shirâthalladzîna an‘amta ‘alaihim ghairil-maghdlûbi ‘alaihim wa ladl-dlâllîn.
</div>
<div class="is-artiArab">
“Dengan nama Allah Yang Maha Pengasih lagi Maha Penyayang. Segala puji bagi Allah Tuhan semesta alam, Yang Maha Pengasih lagi Maha Penyayang, Pemilik hari Pembalasan. Hanya kepada Engkaulah kami menyembah dan hanya kepada Engkaulah kami memohon pertolongan. Bimbinglah kami ke jalan yang lurus, (yaitu) jalan orang-orang yang telah Engkau beri nikmat, bukan (jalan) mereka yang dimurkai dan bukan (pula jalan) orang-orang yang sesat.”
</div>
</div>Info :Jika tidak ingin menampilkan bahasa latinnya, kamu hanya perlu menghapus kode HTML untuk bahasa latinnya.
Selanjutnya klik Pratinjau untuk melihat hasilnya, maka hasilnya akan nampak seperti berikut ini:
بِسْمِ اللّٰهِ الرَّحْمٰنِ الرَّحِيْمِ ١ اَلْحَمْدُ لِلّٰهِ رَبِّ الْعٰلَمِيْنَۙ ٢ الرَّحْمٰنِ الرَّحِيْمِۙ ٣ مٰلِكِ يَوْمِ الدِّيْنِۗ ٤ اِيَّاكَ نَعْبُدُ وَاِيَّاكَ نَسْتَعِيْنُۗ ٥ اِهْدِنَا الصِّرَاطَ الْمُسْتَقِيْمَۙ ٦ صِرَاطَ الَّذِيْنَ اَنْعَمْتَ عَلَيْهِمْ ۙ غَيْرِ الْمَغْضُوْبِ عَلَيْهِمْ وَلَا الضَّاۤلِّيْنَࣖ ٧
Bismillâhir-raḫmânir-raḫîm. Al-ḫamdu lillâhi rabbil-‘âlamîn, ar-raḫmânir-raḫîm, mâliki yaumid-dîn. Iyyâka na‘budu wa iyyâka nasta‘în. ihdinash-shirâthal-mustaqîm, shirâthalladzîna an‘amta ‘alaihim ghairil-maghdlûbi ‘alaihim wa ladl-dlâllîn.
“Dengan nama Allah Yang Maha Pengasih lagi Maha Penyayang. Segala puji bagi Allah Tuhan semesta alam, Yang Maha Pengasih lagi Maha Penyayang, Pemilik hari Pembalasan. Hanya kepada Engkaulah kami menyembah dan hanya kepada Engkaulah kami memohon pertolongan. Bimbinglah kami ke jalan yang lurus, (yaitu) jalan orang-orang yang telah Engkau beri nikmat, bukan (jalan) mereka yang dimurkai dan bukan (pula jalan) orang-orang yang sesat.”
Kesimpulan
Untuk membuat tampilan tulisan bahasa arab di blog terlihat lebih bagus, diperlukan sedikit tambahan kode CSS di dalam template blog yang digunakan, karena jika tidak, tulisan arab yang tampil akan sulit dibaca.
Mungkin penerapannya akan sedikit sulit bagi blogger pemula, namun saya berusaha sebisa mungkin untuk membuat panduan yang mudah dimengerti.
Jika kamu masih kesulitan untuk menerapkan ini di blogmu, silahkan tinggalkan komentar.