Cara Membuat Tulisan Arab di Postingan Blog

Sebenarnya, membuat tulisan arab di postingan blog bisa langsung di lakukan dengan copy text arab kemudian paste ke dalam postingan blog, namun dengan cara ini tampilan tulisan arabnya terlihat kurang bagus dan sulit dibaca.

Penyebabnya karena tidak ada font arab yang tersedia di blogger, untuk itu perlu menambahkan font arab khusus agar tulisan arab yang ada di dalam postingan bisa terbaca dengan baik dan terlihat lebih hidup.

Di sini, saya akan mencoba memberikan panduan tentang cara membuat tulisan arab di postingan blog dengan tampilan yang lebih keren.

Membuat Tulisan Arab di Postingan Blog

Perlu kamu ketahui bahwa cara ini memerlukan sedikit keahlian mengedit template blogger, namun sebisa mungkin, tutorial ini saya buat lebih mudah untuk diterapkan di blog.

Berikut ini panduan lengkap cara membuat tulisan arab di postingan blogger.

1. Tambahkan Kode CSS

Karena di sini, kita akan membuat tampilan font arab lebih keren, maka kamu perlu menambahkan kode CSS ke dalam template blogmu. Caranya,

Buka Dashboard Blogger » Tema » Edit HTML.

Peringatan!Terlebih dahulu, lakukan backup template blogger yang sedang kamu gunakan saat ini, untuk menghindari jika terjadi kesalahan saat mengedit template.

Jika telah melakukan backup, masukkan kode CSS berikut ini tepat di bawah kode <style> atau di atas kode </style>.

/* 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;
}

Keterangan : Jika ingin menggunakan font arab yang tebal, temukan dan ganti code berwarna kuning berikut ini :
font-family: "UthmanicHafs_V22", serif;
menjadi seperti di bawah ini :
font-family: "UthmanicHafs1B Ver13", serif;.

Setelah kode CSS terpasang, simpan template dengan meng-klik tombol simpan yang berada di pojok kanan atas.

2. Cara Penerapannya di Postingan Blog

Nah, selanjutnya adalah cara penerapannya. Buatlah sebuah artikel baru atau edit artikel yang sudah ada.

Sebagai contoh, di sini saya mengedit artikel yang sudah ada, dan ingin menyisipkan tulisan arab di antara paragraf yang ada.

Caranya, ganti mode penulisan ke Tampilan HTML dengan cara klik ikon Pensil di sudut kiri atas layar sehingga tampilan menulisnya berubah seperti gambar di bawah ini.

Kemudian sisipkan tulisan arab menggunakan kode ini di posisi mana saja yang kamu inginkan tulisan arab ini muncul.

<div class="is-teksArab">
Paste tulisan arab di sini
</div>

Sebagai contoh, berikut ini saya menuliskan kode HTML untuk Q.S. Al-Fatihah (dalam mode HTML).

<div class="is-teksArab">
بِسْمِ اللّٰهِ الرَّحْمٰنِ الرَّحِيْمِ ١<br />
اَلْحَمْدُ لِلّٰهِ رَبِّ الْعٰلَمِيْنَۙ ٢<br />
الرَّحْمٰنِ الرَّحِيْمِۙ ٣<br />
مٰلِكِ يَوْمِ الدِّيْنِۗ ٤<br />
اِيَّاكَ نَعْبُدُ وَاِيَّاكَ نَسْتَعِيْنُۗ ٥<br />
اِهْدِنَا الصِّرَاطَ الْمُسْتَقِيْمَۙ ٦<br />
صِرَاطَ الَّذِيْنَ اَنْعَمْتَ عَلَيْهِمْ ۙ غَيْرِ الْمَغْضُوْبِ عَلَيْهِمْ وَلَا الضَّاۤلِّيْنَࣖ ٧
</div>

Selanjutnya klik Pratinjau untuk melihat hasilnya, maka hasilnya akan nampak seperti berikut ini:

info :Tag <br /> di sini berfungsi untuk membuat baris baru.

Selanjutnya, untuk menyisipkan tulisan arab beserta bahasa latin dan artinya bisa menggunakan kode HTML di bawah ini.

<div class="is-boxArab">
  <div class="is-teksArab">
    Paste tulisan arab di sini
  </div>
  <div class="is-teksLatin">
    Paste bahasa latinnya di sini
  </div>
  <div class="is-artiArab">
    Paste artinya di sini
  </div>
</div>

Berikut ini contoh penulisan kode HTML untuk Q.S. Al-Fatihah lengkap arab, latin, dan artinya.

<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:

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.