Cara Membuat Teks Bahasa Arab Otomatis di Postingan Blogger

Cara Membuat Teks Tulisan Bahasa Arab Otomatis di Postingan Blogger Jenis font Indonesia dan Arab merupakan jenis font yang berbeda, karakteristik serta hurufnya pun berbeda, cara penulisanya juga berbeda, ada cara manual dan cara otomatis. Nah bagi kalian yang baru saja belajar menulis teks atau font berbahasa arab tentu mengalami kesulitan ya. Baik disini saya akan jelaskan secara detil bagaimana cara menulis bahasa Arab secara otomatis di postingan blog khusunya blog berplatform Blogger.

Perlu diketahui bahwa tanpa penambahan kode HTML, tulisan bahasa arab yang akan kalian posting akan terlihat kurang bagus di mata pengunjung, Untuk itulah, jika kamu ingin memberikan tulisan bahasa arab yang bagus dan rapi di blog, pastinya kalian harus mengetahui kode HTML yang akan kalian tambahkan. Tujuannya hanya sederhana, yaitu membuat tulisan arab yang rapi dan mudah di baca serta mudah dipahami. Jadi, di sini saya sudah mengkombinasikan kode HTML singkat yang sudah cukup rapi untuk membuat tulisan arab di blog, selanjutnya kalian bisa mengembangkan sendiri.

Penempatan kode CSS di laman HTML

Langkah pertama : Silahkan masuk ke blogger > pilih tema > edit html. Kemudian salin CSS berikut ini dan paste tepat di atas kode ]]></b:skin>

  
@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: 29px; 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;     justify: 15px; }

Baca juga :
Cara Membagi 1 Postingan Blog Menjadi 3 Halaman

Cara Penulisan Arab di Postingan Blog

Langkah Kedua : Seperti biasa kalian masuk ke akun Blogger terlebih dahulu,
Klik “New Post” untuk memulai menulis
Pilih mode “HTML View”
Letakkan kode berikut berada di antara tulisan arab, lihat contoh kode :

Arab tanpa terjemah :
<div class="block-arab">
<div class="arab"> 
teks arab  
</div>
</div>


Arab dengan terjemah :
<div class="block-arab">
<div class="arab"> teks arab بِسْــــــــــــــــــمِﷲِالرَّحْمَنِ الرَّحِيْمِ </div>
<div class="arti-arab">“Dengan nama Allah yang maha pengasih lagi maha penyayang” </div>
</div>

Terakhir Klik “Publish” jika sudah siap untuk menerbitkan artikel baru.
Dan hasilnya seperti ini teman teman.

هُوَ الَّذِي جَعَلَ لَكُمُ الْأَرْضَ ذَلُولًا فَامْشُوا فِي مَنَاكِبِهَا وَكُلُوا مِنْ رِزْقِهِ ۖ وَإِلَيْهِ النُّشُورُ

Dialah Yang menjadikan bumi itu mudah bagi kamu, maka berjalanlah di segala penjurunya dan makanlah sebahagian dari rezeki-Nya. Dan hanya kepada-Nya-lah kamu (kembali setelah) dibangkitkan. (Surat Al-Mulk Ayat 15)