Hello sobat Bloggermuda Banyak yang masih bingung gimana sih caranya nulis atau nampilin tulisan Arab di blog Blogger? Padahal sebenarnya gampang banget lho, nggak perlu jadi ahli coding. Di artikel ini Bloggermuda akan kasih penjelasan lengkap dan simpel biar kamu nggak lagi pusing kalau mau buat postingan dengan ayat Al-Qur'an, doa, atau tulisan Arab lainnya. Kita bakal bahas cara memilih font, menulis teks Arab langsung di editor Blogger, bahkan sedikit trik HTML supaya hasilnya rapi dan enak dibaca. Jadi kalau kamu pengen bikin konten religi atau sekadar nambah nuansa Arab di blog kamu, yuk simak bareng-bareng cara gampangnya di sini. Dijamin bisa diikuti siapa aja, bahkan yang baru pertama kali pegang Blogger. Kita bikin semuanya sesantai ngobrol di warung kopi
Font Arab
Menggunakan Font Arab
Salah satu cara biar tulisan Arab di Blogger keliatan makin estetik dan enak dibaca adalah dengan pakai font khusus, misalnya KFGQPC Uthman Taha Naskh Bold. Font ini terkenal dipakai untuk mushaf Al-Quran cetak modern karena bentuk hurufnya jelas, tebal, dan rapi banget, Jadi setiap tulisan Arab di postingan kamu bisa tampil lebih profesional, mirip Al-Quran cetak resmi. Cara ini bisa bikin pembaca makin betah dan tulisan Arab nggak kayak tempelan huruf biasa. Dengan styling yang pas, blog kamu jadi lebih bernuansa Islami dan tentunya makin menonjol di mata pengunjung yang cari konten berkualitas. Jadi yuk coba pelan-pelan, nggak susah kok kalau sudah ngerti alurnya!
Contoh Tampilan
Kalau kamu mau lihat gimana bentuk tulisan Arab yang udah jadi di Blogger, coba aja cek dengan klik tombol di bawah. Biar nggak penasaran, kamu bisa langsung lihat hasilnya seperti apa dan bayangin sendiri tampilannya di blog kamu nanti. Santai aja, tinggal tekan tombolnya, ya!
Info: Gimana sobat, kece kan tulisan Arabnya di Blogger terutama kalau dipakai di template dari Bloggermuda ini
Cara Pembuatan
Oke sobat Bloggermuda, sekarang admin mau kasih tahu gimana langkah-langkah untuk bikin tulisan Arab muncul rapi di Blogger. Yuk ikuti panduan yang admin siapin di bawah ini biar nggak bingung lagi pas mau nulis ayat atau doa dalam huruf Arab di blog kamu. Simpel kok, tinggal ikutin aja arahan berikut!
Kode Javascript
Langkah awal yang perlu kamu lakukan yaitu menambahkan script biar font Arab bisa jalan di template Blogger. Caranya gampang, kamu tinggal salin kode javascript yang ada di bawah ini lalu taruh di bagian atas sebelum kode </head> di tema Blogger kamu. Ikuti aja pelan-pelan biar nggak salah tempel ya!
/* Script Font Arab by Bloggermuda.com */
<script src='https://cdn.jsdelivr.net/gh/Bloggermuda/Bloggermuda.com@hacker/js/bmArabFont.min.js'></script>Cara penggunaan
Sesudah kamu berhasil nambahin script font Arab yang admin kasih sebelumnya, sekarang waktunya belajar cara nampilin dan makai tulisan Arab di Blogger. Di bawah ini admin kasih caranya biar kamu bisa langsung praktek dan blog kamu tampil lebih keren dengan teks Arab yang rapi.
Teks Arab
Untuk menampilkan tulisan Arab di blogmu, kamu bisa salin dan gunakan kode HTML berikut. Ini kode khusus buat nampilin teks Arab aja ya, jadi cocok banget kalau mau nulis ayat atau doa dalam huruf Arab supaya lebih terstruktur dan rapi tampilannya di artikel.
<div class='rah-arab'>
<div class='arab'>
<!-- masukkan teks arab -->
</div>
</div>Info: Pakai kode HTML di atas waktu nulis artikel dalam mode HTML ya, bukan mode Compose biar hasilnya sesuai harapan.
Teks Latin
Bukan cuma tulisan Arab, di sini juga bisa ditambah teks Latin yang fungsinya buat kasih arti atau bacaan latinnya. Jadi pengunjung bisa langsung ngerti maknanya. Kode HTML di bawah ini bisa dipakai buat nambah teks Latin pendukung, praktis banget buat blog bernuansa Islami.
<div class='rah-arab'>
<div class='arti-arab'>
<!-- masukkan teks arab -->
</div>
</div>Info: Jangan lupa masukin kode HTML ini juga dalam mode HTML saat bikin artikel ya, biar tampilannya sesuai keinginan kamu.
Teks arab dan latin
Kalau mau nampilin tulisan Arab dan Latin bareng-bareng, kamu bisa pakai class='arab' dan class='arti-arab' di dalam class='rah-arab'. Jadi lebih rapi dan terpisah jelas mana tulisan Arabnya dan mana terjemahannya. Kalau masih bingung lihat contoh kodenya di bawah ya!
<div class='rah-arab'>
<div class='arab'>
<!-- masukkan teks arab -->
</div>
<div class='arti-arab'>
<!-- masukkan teks latin -->
</div>
</div>Info: Gunakan kode HTML ini saat nulis artikel dalam mode HTML supaya hasilnya rapi dan sesuai desain yang diinginkan.
Penjelasan
Font Arab dan tulisan Arab ini cocok banget buat blog yang bahas tema Islami, seperti ayat-ayat Quran atau doa sehari-hari. Dengan font ini, tulisan jadi lebih cantik dan mudah dibaca. Kamu bisa pakai script dan kode HTML dari Bloggermuda ini untuk bikin blog makin bermanfaat dan tampil profesional. Semoga membantu ya sobat!
