Cara Menulis Tulisan Arab di Postingan Blog dengan Rapih

Tulisan Arab di Blog

Menulis dengan huruf arab sebanarnya sudah bisa kamu lakukan langsung dengan mudah di dalam postingan blog tanpa perlu mengikuti panduan yang akan saya tulis ini.

Namun perlu kamu ketahui juga bahwa mungkin tulisan arabnya akan terlihat kurang rapih atau sulit untuk dibaca karena menggunakan font default dari template yang digunakan.

Tentu ini akan sedikit mengganggu pengunjung, apalagi jika blog yang dikelolah khusus membahas tentang agama islam atau pendidikan agama yang setiap postingan harus menyelipkan potongan ayat al-quran.

Oleh karenanya, saya membuat tulisan ini agar memudahkan kamu dalam menampilkan dan membuat tulisan arab di dalam postingan blog dengan rapih dan nyaman saat dibaca.

Sebagai contoh, berikut ini adalah tulisan arab menggunakan font standar tanpa kode apa pun.

بِسْــــــــــــــــــمِ اللهِ الرَّحْمَنِ الرَّحِيْمِ

sedangkan jika menggunakan font arab dan tambahan kode agar tampil lebih rapih dan efisien adalah sebagai berikut.

بِسْــــــــــــــــــمِ اللهِ الرَّحْمَنِ الرَّحِيْمِ

Bisa dilihat perbedaannya, tampilannya lebih rapih dan nyaman untuk dibaca. Untuk lebih jelasnya, mungkin bisa langsung praktek saja yah di blog masing-masing.

Baca Juga : Cara Membuat Blog di Blogger

Bagaimana Menulis Huruf Arab di Blog

Silahkan masuk ke menu Dashboard Blog » Tema » Edit HTML, lalu simpan kode css berikut ini tepat di bawah kode <style>.

@font-face {
    font-family: KFGQPC Uthman Taha Naskh Bold;
    font-display: swap;
    src: url('https://cdn.statically.io/gh/imansani93/idnxmus-html/090d0692/UTHMANTN1B%20VER10_0.OTF') format('opentype');
    font-weight: bold;
    font-style: normal;
}

.arab {
    font-family: KFGQPC Uthman Taha Naskh Bold;
    font-size: 26px;
    font-weight: normal;
    line-height: 2;
    text-align: right;
    direction: rtl;
    margin: 1.5em 0;
}

Selanjutnya kode di atas bisa kamu edit sesuai keterangan yang ada pada tabel di bawah ini.

font-size: 26px; Ubah angka bagian ini untuk mengecilkan atau membesarkan tulisan.
line-height: 2; Ubah angka bagian ini untuk mengatur jarak baris antar tulisan.

Untuk menerapkannya di dalam postingan, silahkan kembali ke menu Dashboard Blog » Postingan dan buat Postingan Baru dalam mode HTML, kemudian masukkan potongan ayat atau tuliasan arab yang kamu butuhkan ke dalam artikel yang di buat dengan menambahkan kode pemanggilnya.

Sebagai contoh, saya akan menuliskan tulisan arab "bismillah", maka tulis dengan format kode berikut ini.

<p class="arab">
بِسْــــــــــــــــــمِ اللهِ الرَّحْمَنِ الرَّحِيْمِ
</p>

Ganti tulisan arab di atas dengan tulisan arab lain atau potongan ayat yang kamu inginkan.

Untuk melihat hasilnya, silahkan klik tombol Preview di sudut kanan atas. Jika berhasil, tampilannya akan sama seperti demo di atas.

Khusus Blog dengan Niche Islami

Buat kamu yang sedang menjalankan blog dengan niche agama islam, yang di dalam tulisannya sering menambahkan potongan hadits dan artinya. Mungkin ini akan kamu suka, cek demonya di bawah ini.

مَنْ سَلَكَ طَرِيقًا يَلْتَمِسُ فِيهِ عِلْمًا سَهَّلَ اللَّهُ لَهُ بِهِ طَرِيقًا إِلَى الْجَنَّةِ
“Barangsiapa yang menempuh suatu jalan dalam rangka menuntut ilmu, maka Allah akan memudahkan baginya jalan menuju surga.” (HR. Muslim no. 7028)

Bagaimana, tertarik? jika iya, silahkan tambahkan lagi kode CSS di bawah ini tepat di bawah kode <style>

.block-arab {
    border: 1px solid #eaeaef;
    border-radius: 8px;
    padding: 10px;
    margin: 1.5em 0
}

.block-arab .arab {
    margin: 0
}

.arti-arab {
    position: relative;
    font-size: 90%;
    background-color: rgba(0, 0, 0, .05);
    color: #717174;
    border-radius: 8px;
    padding: 20px 10px 10px;
    margin: 2.5em 0 0
}

.arti-arab:before {
    content: 'Artinya :';
    position: absolute;
    font-weight: bold;
    border-radius: 50px;
    background: #fcfcfc;
    color: #333;
    padding: 0 15px 1px;
    top: -14px;
    left: 15px;
}

Selanjutnya, untuk menerapkannya di dalam postingan, silahkan masuk ke menu postingan blog dengan mode HTML lalu tempatkan kode dibawah ini dimana saja yang kamu inginkan tulisan arab dan artinya muncul.

<div class="block-arab">
<div class="arab">
tulisan arab di sini
</div>

<div class="arti-arab">
artinya di sini
</div>
</div>

Sesuai keterangan, silahkan ganti tulisan berwarna kuning yang ada di dalam kode di atas dengan potongan hadits dan artinya, dan coba lihat hasilnya.

Kode yang saya bagikan di atas juga akan bekerja tanpa kendala pada template AMP, jadi bagi kamu pengguna template AMP juga bisa menerapkan cara ini.

Jika kamu masih memiliki kendala dengan cara penerapannya, kamu bisa tinggalkan komentar di bawah, sebisa mungkin akan saya bantu. Terimakasih sudah berkunjung.