syech.com – Bagi sebagian orang menulis huruf arab di wordpress tentulah akan terasa bingung. Bila kita langsung copas dari lembar yang lain tentu hal ini tidak akan indah terlihat di mata pembaca postingan kita.
Namun bagi sebagian lain yang paham bahasa pemrograman maupun coding tentu hal itu tidaklah susah.
Seringkali kita mencari beberapa plugin yang menyediakan font arab dan bekerja otomatis di system, pada akhirnya kita tidak menemukan. Pada kali ini syech.com akan membagikan kepada anda tentang cara membuat font arab terlihat indah dan kita bisa mengatur sesuka kita baik ukuran font, warna maupun jenis font-family yang ada.
Ada 2 cara menurut kami yang paling mudah dan simple cara memasukkan text arab agar terlihat rapi, nyaman dan indah
1. Memasukkan kode html dan Style
Kita bisa langsung memasukkan kode html dan Style dibawah ini
[html]<p style=”background: white; line-height: 1.6; text-align: right;”><span style=”font-size: 20.0pt; font-family: ‘Traditional Arabic’,serif; color: #212121;”>isi tulisan</span></p>[/html]
Caranya pada kita masuk pada tab teks dalam lembar editor kita. Bila anda bingung lihat gambar dibawah ini dan perhatikan tanda merah
Silahkan anda klik dan anda akan masuk pada mode teks seperi gambar dibawah ini
Silahkan anda Copy Paste script html di atas dan ganti “isi tulisan” dengan huruf arab yang ingin kamu masukkan
Sebagai Contoh
[html]<p style=”background: white; line-height: 1.6; text-align: right;”><span style=”font-size: 20.0pt; font-family: ‘Traditional Arabic’,serif; color: #212121;”>بِسْمِ اللّٰهِ الرَّحْمٰنِ الرَّحِيْمِ</span></p>[/html]
Hasil Postingan :
بِسْمِ اللّٰهِ الرَّحْمٰنِ الرَّحِيْمِ
Namun dengan cara ini pada AMP ( Mobile Version), font arab kita akan berubah dan tidak sesuai dengan mode dekstop
2. Menambahkan CSS dan menggunakan class untuk membungkusnya
Untuk cara ini kita bisa menambahkan CSS pada template kita
[html] /* CSS arab syech.com*/
@font-face{font-family:LPMQ;src:url(https://cdn.statically.io/gh/jp-rafiqi/jp-project/9218c079/LPMQ.eot);src:url(https://litequran.net/assets/fonts/LPMQ.eot?#iefix) format(’embedded-opentype’), url(https://cdn.statically.io/gh/jp-rafiqi/jp-project/9218c079/LPMQ.woff) format(‘woff’), url(https://cdn.statically.io/gh/jp-rafiqi/jp-project/9218c079/LPMQ.ttf) format(‘truetype’)}
.arabic{ font-family: LPMQ; text-align: right; padding-left: 32px; }
p.arabic{font-size:25px;line-height:60px;} [/html]
Untuk menambahkannya kita bisa secara sederhana masuk pada Tampilan > Sesuaikan dan lihat gambar dibawah ini
Letakkan Css tersebut diatas simpan dan terbitkan
Kamu juga bisa menambahkan lembar CSS langsung lewat Editor Berkas Tema atapun Contol Panel Hosting kamu
Kemudian untuk cara postingnya anda bisa masukkan kode html dibawah ini dan tentu saja harus masuk pada mode teks seperti cara yang pertama
[html]<p class=”arabic” dir=”rtl”>Isi tulisan arab</p>[/html]
Ganti “isi tulisan arab” dengan text arab yang ingin anda masukkan dan sebagai contoh lihat hasil dibawah ini:
[html]<p class=”arabic” dir=”rtl”>بِسْمِ اللّٰهِ الرَّحْمٰنِ الرَّحِيْمِ</p>[/html]
Hasil Tampilan Postingan:
بِسْمِ اللّٰهِ الرَّحْمٰنِ الرَّحِيْمِ
Dari sekian cara dari kami , kami sarankan untuk menggunakan cara yang ke 2 . Karena pada tampilan AMP font tulisan tidak berubah dan sangat nyaman dibaca
Bagaimana , Mudah bukan? Selain itu bila kita ingin mempercantik lagi kita bisa menambahkan CSS seperti background atau text color pada lembar CSS kamu
Lalu bagaimana bila kamu ingin mengetik tulisan Arab langsung? Alangkah baiknya kamu baca Cara Mengetik Bahasa Arab , kemudian kamu salin hasil pengetikkan kamu dalam lembar editor postingan anda
Demikian cara singkat posting huruf arab pada halaman wordpress secara simple dan mudah
