Magelang1337.com - Ketika membuat tulisan huruf arab di postingan blog, kadang kita banyak mengalami kesulitan. Karena tak mudah untuk mengatur huruf arab supaya dapat tampil rapi di artikel blog.
Jika mau terlihat tulisan menjadi mudah dibaca dan rapi, banyak seorang blogger yang membuatnya secara manual. Contohnya mengatur jenis huruf, ukuran dan ketebalan dari huruf tersebut mengubah jadi align rata kanan supaya huruf nampak (RTL), yang mana harus mengikuti sesuai kaidah penulisan arab yang ditulis dari kanan.
Jika membuat tulisan arab di artikel secara manual harus melakukannya satu per satu dan terus menerus. Sehingga hal ini menjadi tak efisien, apalagi jika blog yang dikelola adalah blog dengan tema islam, tentu akan banyak bergabung dan bersentuhan di postingan. Jika tak diatur akan membuang waktu dalam membuat konten artikel tersebut.
Maka dari itu jika kamu ingin membuat tulisan arab dengan mudah, rapi dan efisien. Kami akan berbagi caranya. Panduan yang kami pakai untuk menulis tulisan arab di postingan blog akan sangat berguna untuk kamu.
Cara Menulis Tulisan Arab di Artikel Blog
Khusus untuk kamu blogger yang memiliki niche agama atau yang lain. Dengan mengikuti tutorial berikut baik itu tulisan al-quran ataupun hadits akan menjadi lebih rapi dan pasti agar tulisan arab sesuai dengan standar kemenag.
1. Cara Menulis Tulisan Arab di Blog dengan CSS
Cara pertama yaitu dengan menambahkan style CSS kedalam kode template dibawah, Fungsinya supaya kamu tak perlu menuliskan ulang style css saat membuat tulisan arab dalam artikel blog cukup menulis html saja.
- Masuk ke blogger
- Pilih Edit HTML
- Cari kode </style> Lalu masukan kode dibawah tepat diatasnya, Lalu klik SAVE.
/* blockquote arab by:magelang1337.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')}
blockquote.arab {
border:1px solid rgba(0, 0, 0, .1);
border-radius: 8px;
padding:10px;
margin:1.5em 0;
background:#fff;
}
blockquote.arab p:nth-child(1) {
font-family:LPMQ;
font-size:26px;
font-weight:normal;
line-height:2;
text-align:right;
direction:rtl;
margin:0;
}
blockquote.arab p:nth-child(2) {
position:relative;
font-size:90%;
background-color:rgba(0, 0, 0, .1);
color:#222;
border-radius:8px;
padding:20px 10px 10px;
margin:2.5em 0 0;
text-align:justify;
}
blockquote.arab p:nth-child(2):before {
content:'Artinya :';
position:absolute;
font-weight:bold;
border-radius:50px;
background:#fcfcfc;
color:#222;
padding:5px 15px 5px;
top:-14px;
left:15px;
}<blockquote class="arab">
<p>Tuisan arab disini</p>
<p>Artinya disini</p>
</blockquote>Keterangan : Didalam blockquote <p> yang pertama isinya tulisan arab dan <p> kedua adalah arti tulisan arab. Jangan sampai terbalik ya.
DEMO
2. Cara Membuat Tulisan Arab di Blog (Blackqoute)
Cari kode css blockquote ditampilan Edit HTML, cara mudah mencarinya dengan memakai ctrl+f dan tulis "blockquote" lalu tekan enter. Ada beberapa kode css blockquote di menu Edit HTML. Pilih kode css yang khusus untuk mengatur tampilan blockquote di postingan.
Lalu kamu ganti seluruh kode css blockquote itu ganti dengan kode css blockquote dibawah ini :
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://4.bp.blogspot.com/-iI7HGbwS9Q8/UjR7vI0-60I/AAAAAAAAFdM/tAFQUhxBoTo/s1600/bg-blockquote.gif) no-repeat 15px 18px; clear:both}- DroidArabicNaskhRegular : Adalah jenis font arab yang dipakai.
- 16px : Adalah ukuran huruf.
- Right : Supaya tampilan kata jadi rata kanan.
- 38px : Adalah jarak tulisan atas dan bawah.
- #666 : Warna huruf.
- #fbf8f3 : warna backgrund.
Kamu dapat mengganti kode berwarna diatas dengan jenis atau ukuran yang kamu mau. Jika memilih font DroidArabicNaskhRegular maka harus tambahkan kode dibawah tepat dibawah kode <head> supaya jenis fontnya dapat terlihat sesuai dengan yang diinginkan.
<link href='https://fontlibrary.org/face/droid-arabic-naskh' media='screen' rel='stylesheet' type='text/css'/>
Kami lebih memilih cara pertama karena Cara Membuat Tulisan Arab di Postingan Blog tersebut cukup simple. tapi tergantung kamu ingin menggunakannya yang mana. Jika ada pertanyaan silahkan komentar dibawah. Terima kasih!
