Cara Merapikan Tulisan Arab di Postingan Blog

Pada kesempatan ini saya ingin berbagi panduan bagaimana cara merapikan tulisan font arab di postingan blog. Tutiorial cara merapikan tulisan arab ini
Desain Foto - Nurul Huda

Penulisan ejaan huruf arab sebanarnya telah tersedia di blog. Namun, untuk tampilan font defaultnya memang sedikit kurang rapi, apalagi template blog yang digunakan tidak dikhususkan untuk postingan tulisan huruf - huruf arab.

Bagi teman - teman yang sering menampilkan tulisan font arab di situs blognya mungkin akan sedikit terganggu dan kurang enak di pandang oleh mata jika tulisan arab yang diposting nampak kurang rapi dan berantakan.

Pada kesempatan ini saya ingin berbagi panduan bagaimana cara merapikan tulisan font arab di postingan blog. Tutiorial merapikan tulisan arab ini saya kutip dari blognya Mas A. Abdul Mustahab. Berikut tampilan tulisan font arab sebelum menggunakan kode css masih menggunakan font arab secara default akan terlihat seperti dibawah ini:

خير الناس أنفعهم للناس : بالإحسان إليهم بماله وجاهه فإنهم عباد الله وأحبهم إليه وأنفعهم لعياله أي أشرفهم عنده أكثرهم نفعا للناس

Tampilan tulisan arab tersebut nantinya akan berubah lebih rapi dan enak di pandang oleh mata setelah anda menggunakan kode css dari Mas A. Abdul Mustahab. Berikut ini adalah contoh tampilan tulisan font arab di blog setelah menggunakan kode css.

خير الناس أنفعهم للناس : بالإحسان إليهم بماله وجاهه فإنهم عباد الله وأحبهم إليه وأنفعهم لعياله أي أشرفهم عنده أكثرهم نفعا للناس

Bagaimana? Sudah terlihat jelas perbedaannya bukan? Menjadi lebih rapih dan enak untuk dibaca. Jika tertarik dengan panduan ini, mari kita praktikan sekarang!.

Pertama: Silahkan anda Masuk ke menu Dashboard Blog, klik Tema dan pilih Edit HTML

Kedua: silahkan anda cari kode <style> untuk mempermudah dalam mencarinya anda bisa menggunakan CTRl + F, setelah anda menemukan kode <style> salin kode css di bawah ini dan tempelkan 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;
}

.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;
}

Keterangan: Kode css di atas dapat anda edit sesuai keterangan di bawah ini:

font-size: 26px; | Anda dapat merubah angka pada bagian ini untuk membesarkan atau mengecilkan tulisan arab yang akan tampil di halaman postingan blog.

.line-height: 2; | Anda dapat merubah angka bagian ini untuk mengatur jarak spasi antar tulisan arab yang akan tampil dihalaman postingan blog.

Ketiga: Jangan lupa klik simpan.

Sampai disini anda telah selesai meMasang kode css tulisan font arab selanjutnya, anda Masuk ke tahap bagaimana cara menerapkannya di dalam postingan blog.

Pertama: Silahkan anda kembali ke menu Dashboard Blog klik Postingan lalu klik buat Postingan Baru dan silahkan anda pilih mode HTML.

Kedua: Silahkan anda menulis huruf arab yang akan anda tampilkan di postingan blog.

Ketiga: Silahkan anda tambahkan kode pemanggilan cssnya. Misalnya, saya akan menulis tulisan arab "Penjelasan Hadits Khairunnas Anfa'uhum Linnas" maka tulis arab tersebut saya tambah kode pemanggilan css font arab yang telah dibuat tadi seperti ini:

<p class='arab'>
خير الناس أنفعهم للناس : بالإحسان إليهم بماله وجاهه فإنهم عباد الله وأحبهم إليه وأنفعهم لعياله أي أشرفهم عنده أكثرهم نفعا للناس
</p>

Jika anda ingin menambah arti tulisan dari tulisan arab tersebut anda dapat menambahkan kode pemanggilan css berikut ini:

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

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

Silahkan anda tempatkan tulisan arab dan artinya sesuai keterangan yang telah saya tandai dengan warna merah. nanti hasilnaya akan seperti ini:

خير الناس أنفعهم للناس : بالإحسان إليهم بماله وجاهه فإنهم عباد الله وأحبهم إليه وأنفعهم لعياله أي أشرفهم عنده أكثرهم نفعا للناس
Manusia paling baik adalah orang yang paling bermanfaat bagi manusia : (yaitu) dengan berbuat baik kepada mereka dengan harta dan jabatannya. Karena sesungguhnya mereka adalah hamba-hamba Allah. Paling dicintai dari mereka kepada-Nya dan paling bermanfaat dari mereka kepada keluarganya. Maksudnya : Paling mulia dari mereka di hadapan-Nya adalah orang yang paling banyak dari mereka akan manfaatnya bagi manusia.

Menurut inforMasi dari Mas A. Abdul Mustahab bahwa kode css diatas juga dapat bekerja dengan baik pada template versi Accelerated Mobile Page (AMP).

Demikian panduan tentang cara merapikan tulisan arab di blog. Jika anda ingin melihat demonya secara jelas anda bisa melihat postingan artikel saya disini: Fungsi Pengorganisasian dalam Manajemen dan sekiranya anda masih memiliki pertanyaan silahkan anda tinggalkan pesan di kolom komentar, InsyaAllah sebisa mungkin akan saya bantu mencarikan solusinya. Silahkan anda share artikel ini jika menurut anda bermanfaat. Terima kasih