Hello sobat icloudZer kali ini admin bakalan menjabarkan mengenai cara membuat dan menampilkan text arab di blogger
Info: Oke jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas secara bersama sama
Font Arab
Font arab adalah di gunakan untuk bisa menampilkan dan menulis text arab dalam bentuk yang keren dengan penggunaan font text KFGQPC Uthman Taha Naskh Bold, yang mana fungsi font tersebut bisa di gunakan pada seluruh unsur text di dalam sebuah website, selain itu telah disediakan box khusus saat text arab di tampilkan
Fungsi Font
Seperti yang sudah admin jelaskan sebelumnya fungsi font KFGQPC Uthman Taha Naskh Bold adalah untuk menampilkan text arab dalam bentuk yang lebih keren, jika kamu tidak menggunakn font text arab khusus maka tampilan ayat Qur'an misalnya memiliki tampilan yang standar, sedangakan jika kamu menggunakan font khusus untuk membuat tulisan arab menjadi lebih keren kamu harus mengunakan font arab yang sudah admin sediakan di dalam pembahsan kita kali ini
Menggunakan CSS
Untuk membuat dan menampilakn text arab yang keren di buat menggunakan kode CSS, termasuk menginstall font, membuat border box ayat, dan text latin ayat alias terjemahan ayat
Contoh Tampilan
Jika kamu penasaran bagaimana contoh tampilan dari text arab tersebut silahkan periksa menggunakan tombol di bawah ini ok
Info: Bagaimana sobat keren kan penulisan text arab di blogger terkhusus nya di dalam template icloudice old version ini
Cara Pembuatan
Baiklah sobat icloudZer sekarang saatnya admin bakalan menjelaskan mengenai bagaimana caranya membuat text arab di blogger, silahkan pelajari dan ikuti setiap arrahan yang admin jabarkan di bawah ini
Kode CSS
Langkah pertama yang bisa kamu lakukan adalah menginstall font arab beserta font arab di dalam template kamu, silahkan salin kode CSS di vawah ini kemudian taruh di atas kode ]]></b:skin>
.rah-arab {border: 1px solid #eaeaef;border-radius: 8px;padding: 10px;margin: 1.5em 0}.rah-arab .arab {margin: 0}
.arab {font-family: KFGQPC Uthman Taha Naskh Bold;font-size: 26px;font-weight: normal;line-height: 2;text-align: right;direction: rtl;margin: 1.5em 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;left: 15px;}@font-face {font-family: KFGQPC Uthman Taha Naskh Bold;font-display: swap;src: url('https://cdn.statically.io/gh/rahcode-ui/icloudice/main/UTHMANTN1B%20VER10_0.OTF') format('opentype');font-weight: bold;font-style: normal;}Info: Atau sobat bisamenggunakan tag kode style untuk meletakkan kode CSS di atas
Cara penggunaan
Setelah menginstall font arab dan box arab di dalam kode CSS yang admin berikan di atas, selanjutnya pelajari bagaimana caranya menampilkan dan menggunakan font arab, seperti yang tertera di bawah ini
Text Arab
Untuk Menampilkan text arab di blog kamu, kamu bisa menyalin dan menggunakan kode HTML di bawah ini, kode HTML khusus untuk menampilkan text arab saja ya
<div class='rah-arab'>
<div class='arab'>
<!-- masukkan text arab -->
</div>
</div>Info: Gunakan kode HTML di atas langsung saat kamu ingin memposting artikel dalam mode HTML bukan mode Penulisan alias mode compose
Text Latin
Bukan hanya text Arab saja, tersedia juga text latin sebagai text pendukung jika di mungkinkan untuk di gunakan, fungsi text latin dalam font arab ini adalah semisal menampilkan terjemahan text arab ataupun menampilkan bacaan latin dari text arab tersebut
<div class='rah-arab'>
<div class='arti-arab'>
<!-- masukkan text arab -->
</div>
</div>info: Gunakan kode HTML di atas langsung saat kamu ingin memposting artikel dalam mode HTML bukan mode Penulisan alias mode compose
Text arab dan latin
Dan jika kamu ingin menampilkan text arab dan text latin secara bersama kami bisa menerapakan class='arab' bersamaan class='arti-arab' di dalam class='rah-arab', atau jika masih bingung lihat kode lengkapnya seperti berikut ini
<div class='rah-arab'>
<div class='arab'>
<!-- masukkan text arab -->
</div>
<div class='arti-arab'>
<!-- masukkan text latin -->
</div>
</div>Info: Gunakan kode HTML di atas langsung saat kamu ingin memposting artikel dalam mode HTML bukan mode Penulisan alias mode compose
Penjelasan
Font arab dan text arab di gunakan bagi blog ber niche islami, atau blog yang memiliki topik pembahasan mengenai dunia islami atau seputar keislamian, yang mana perlu untuk menampilkan berbagai macam ayat Qur'an dan sebagimana, nah silahkan gunakan font dan text arab dari ICloudice semoga bermanfaat
