Cara Membuat Tulisan Arab di Postingan Blog

Ang Rifkiyal
pada tanggal
Cara Membuat Tulisan Arab di Postingan Blog

Saat membuat tulisan dengan huruf arab di postingan blogspot, terkadang banyak blogger yang mengalami kesulitan. Sebab tidak mudah mengatur huruf arab agar bisa tampil rapih di postingan blog.

Jika ingin rapih, banyak blogger yang masih mengaturnya secara manual. Misalnya mengatur jenis huruf, ukuran huruf, ketebalan, serta mengubah alignnya menjadi rata kanan agar nampak right to left (RTL), sesuai dengan kaidah penulisan bahasa arab yang ditulis dari kanan.

Pengaturan manual ini dilakukan satu per satu dan secara terus menerus ketika sedang membuat postingan yang di dalamnya mengandung tulisan arab.

Tentunya hal ini tidak efisien, apalagi jika blog yang dikelola merupakan blog dengan tema keislaman, tentu akan banyak bersentuhan dengan tulisan-tulisan arab pada postingan. Jika tidak diatur, ini akan sangat ribet dan banyak membuang waktu dalam membuat konten artikel.

Oleh karena itu, untuk memudahkan menulis tulisan arab di blog, kami bagikan trik yang kami gunakan untuk menulis tulisan arab di postingan blog agar mudah, rapih dan efisien. Contoh tulisan arabnya seperti ini:

Tanpa Harokat:
الكلام: هو اللفظ المركب المفيد بالوضع، وأقسامه ثلاثة: اسم ، وفعل، وحرف جاء لمعنى. فالاسم يعرف بالخفض، والتنوين، ودخول الألف واللام، وحروف الخفض وهي: من، وإِلى ،وعن، وعلى، وفي، ورب، والباء، والكاف، واللام، وحروف القسم وهي:الواو، والباء، والتاء.

Dengan Harokat:
الإِسْلاَمُ أَنْ تَشْهَدَ أَنْ لاَ إِلَهَ إِلاَّ اللهُ وَ أَنَّ مُحَمَّدَاً رَسُولُ الله، وَتُقِيْمَ الصَّلاَة، وَتُؤْتِيَ الزَّكَاةَ، وَتَصُوْمَ رَمَضَانَ، وَتَحُجَّ البيْتَ إِنِ اِسْتَطَعتَ إِليْهِ سَبِيْلاً 

Berikut tutorialnya:

"Disini, kami memanfaatkan blockquote untuk menjadi sarana penulisan bahasa arab, sehingga pengaturan penulisan bahasa arab nantinya cukup sekali klik pada blockquote."

Langkah 1
Buka situs blogger.com, masuk ke menu Tema > Edit HTML.

Langkah 2
Cari kode css untuk blockquote pada tampilan Edit HTML, cara mencarinya gunakan ctrl+f dan tulis "blockquote" dan tekan enter.

Kadang, terdapat beberapa kode css blockquote pada menu Edit HTML. Pilih saja yang sekiranya merupakan kode css untuk mengatur tampilan blockquote pada postingan.

Hapus dan ganti seluruh kode css blockquote tersebut, dan ganti dengan kode css blockquote berikut yang sudah disesuaikan khusus untuk tampilan tulisan bahasa arab:
blockquote {font-family: DroidArabicNaskhRegular, serif; font-size:16px; font-style:normal; text-align:right; margin:0.25em 0; padding:15px 20px 15px 50px; line-height:38px; color:#666; background:#fbf8f3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCp-XX5yXt4XQAqYHYCCBmqNt9jdcj0j9dv8wlQ0ExQWjbFFxciyN9FrE0yDn8IRFmDdcvNl839DRyGnGKwcvykDlYEy4p1S5npdfkgdiXAr-dUMxGniksgD2HbZ44IvgpJFy2I7CvMTk/s1600/bg-blockquote.gif) no-repeat 15px 18px; clear:both}

Keterangan kode yang diwarnai:

  • DroidArabicNaskhRegular : Merupakan jenis huruf/font arab yang digunakan.
  • 16px : Merupakan ukuran huruf.
  • right : Agar tampilan kata menjadi rata kanan.
  • 38px : Merupakan jarak tulisan atas dan bawah.
  • 666 : Merupakan warna huruf.
  • fbf8f3 : Merupakan warna backgrund.

Kita bisa mengganti kode berwarna di atas dengan isian jenis atau ukuran yang kita inginkan. Misalnya di sini saya memilih jenis font DroidArabicNaskhRegular untuk jenis font arabnya dengan ukuran dan warna yang saya pilih seperti di atas.

Berhubung saya menggunakan jenis font DroidArabicNaskhRegular, maka saya harus tambahkan kode berikut di bawah kode <head> agar jenis fontnya bisa tampil sesuai dengan yang diinginkan:
<link href='https://fontlibrary.org/face/droid-arabic-naskh' media='screen' rel='stylesheet' type='text/css'/>

 Langkah 3:
Simpan dan lihat hasilnya.

Untuk melihat hasilnya kita bisa masuk ke menu postingan dan membuat postingan baru. Buat tulisan arab yang akan kita posting. Setelah itu klik atau blok tulisan arab nya, kemudian klik icon blockquote yang ada di menu bar atas. Silahkan simpan untuk melihat hasilnya atau bisa juga dengan melakukan pratinjau terlebih dahulu.


Sampai di sini, harusnya selesai. dan kita bisa membuat postingan dengan tulisan arab yang rapih dan efisien.
Postingan Lebih Baru Postingan Lama