Selamat datang di web TulisanIB. Di artikel kali ini penulis akan memberikan tutorial bagaimana caranya memasang font untuk huruf tulisan arab (Huruf Hijaiyah) ke dalam blog atau website kalian.
Tapi tutorial ini saya praktikkan di blog atau website yang dihosting di Blogspot atau Blogger.com, jadi bagi yang menggunakan platform blog berbeda silahkan untuk menyesuaikan ya.
Bagi kalian yang menulis tulisan berbahasa Arab di blog atau website mungkin ingin memberikan font pada tulisan-tulisan tersebut agar lebih bagus, lebih sedap dipandang, dan agar lebih mudah dibaca. Sama, saya juga begitu.
Font tulisan arab ini dihosting oleh Google Fonts ya.
Dan font tulisan arab yang penulis berikan pada tutorial ini menggunakan font Mirza.
Kelebihan kenapa penulis memilih font Mirza ini sendiri adalah karena kasroh yang hurufnya menggunakan tasydid pada font ini berada di bawah huruf, jadi lebih memudahkan pembaca membaca tulisan arab yang ditulis tersebut.
Font Mirza berbeda dengan font lainnya (saya sudah mencoba font Scheherazade dan Lateef), karena font yang lainnya (tidak semuanya, beberapa saja) menampilkan huruf menggunakan tasydid berharokat kasroh tapi harokat kasroh-nya ditampilkan di bawah tasydid, jadi harokat kasroh-nya berada di atas huruf, jadi menurut saya ini mungkin agak sedikit membingungkan pembaca.
Mungkin lebih jelasnya pembaca sekalian bisa melihat gambar di bawah ini:
Berbeda bukan?
Apabila pembaca sekalian ingin mengganti font Mirza tersebut dengan font yang lain, silahkan baca artikel saya yang berjudul "Cara Pasang Font Google Fonts di Blog Blogspot (Blogger.com)" ya, tetapi tetap masih dengan beberapa cara yang sudah penulis jelaskan di bawah.
Yuk langsung saja kita baca langkah-langkahnya.
- Pertama masuk ke dashboard blog atau website kalian di Blogger.com terlebih dulu melalui link berikut:
https://www.blogger.com
Blogger.com menampilkan gambar makhluk bernyawa di dalam web-nya. Bagi kalian yang ingin menghilangkan gambar pada website tetapi belum tahu caranya, kalian bisa baca artikel saya yang berjudul "Cara Mematikan Gambar Pada Browser dan Browsing di Internet Tanpa Menampilkan Gambar" untuk mengetahui caranya menghilangkan gambar pada browser.
- Lalu masuk ke menu "Tema".
- Klik icon tanda panah yang mengarah ke bawah yang berada di tombol berwarna orange di sebelah kanan tulisan "SESUAIKAN".
- Akan muncul menu dropdown, silahkan klik pada "Cadangkan" untuk membackup apabila nanti ada kesalahan bisa dipulihkan kembali (optional). Lalu klik "Edit HTML".
- Cari </b:skin> atau </style>, pilih salah satu. Tekan tombol Ctrl + F pada keyboard untuk memunculkan form pencarian.
- Tambahkan atau copy kode berikut di bawah ini lalu paste ke dalam tag <b:skin> atau <style>. Atau boleh juga paste tepat di atasnya kode ]]></b:skin> atau </b:skin> atau </style>.
.arab{text-align:justify;font-size:45px;line-height:125px;text-align-last:right!important}.rufarab{font-family:'Mirza',cursive}@media screen and (max-width:500px){.arab{text-align:right!important}} - Cari tag <head>. Tekan tombol Ctrl + F pada keyboard untuk memunculkan form pencarian.
- Copy kode berikut:
<link href='https://fonts.gstatic.com' rel='preconnect'/><link href='https://fonts.gstatic.com' rel='dns-prefetch'/><link href='https://fonts.googleapis.com' rel='dns-prefetch'/> - Lalu paste tepat di bawahnya tag <head> agar tidak terjadi DNS Lookups. Apabila kalian memasang script anti jingling dan auto visitor, silahkan paste kode tersebut tepat di atasnya kode script anti jingling dan auto visitor.
- Lalu copy kode berikut ini:
<link href="https://fonts.googleapis.com/css2?family=Mirza&display=swap" rel="stylesheet"/> - Lalu paste di mode html ketika menulis artikel tepat di paling bawah. Atau boleh juga di opsi Edit HTML tepat di atasnya kode </body>.
- Pada mode html ketika menulis artikel, huruf arab sebaiknya dimasukkan ke dalam tag <p>. Seperti di bawah ini: Isi atau ganti titik-titik di bawah dengan tulisan arab.
<p>...........</p> - Lalu pada tag <p> yang sudah berisi tulisan arab tersebut, berilah class arab dan rufarab. Maka jadinya seperti di bawah ini: Ganti titik-titik dengan tulisan arab.
<p class='arab rufarab'>...........</p> - Selesai.
Sekian apa yang bisa penulis sampaikan. Semoga tutorial Cara Pasang Font Huruf Arab di Blog Blogspot (Blogger.com) ini bisa bermanfaat untuk kita semua. Artikel tentang blogger lainnya yang telah penulis tulis: "Cara Hapus Blog Blogspot (Blogger.com)".