Cara Membuat Tulisan Teks 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, dan untuk selanjutnya kamu bisa mengembangkan sendiri.

Langkah pertama penempatan kode CSS di laman HTML

Silahkan masuk ke blogger > tema > edit html. 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 Membuat Tulisan Bahasa Arab di Postingan Blogger

Langkah Kedua Cara Menulis Arab di Postingan Blog

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">arti arab  </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)