Oh iya, trik yang ingin kita bahas ini saya dapatkan dari blognya Abu Farhan, di mana judul asli postingan beliau adalah "Caramenampilkan Tulisan Arab dengan CSS", jadi postingan di blog saya ini hanya bersifat pengulangan saja. Sebelumnya terima kasih kepada Rekan Abu Farhan yang telah membagi2 ilmunya.
Ya' langsung saja. Sekarang silahkan teman2 login dulu ke akun bloggernya masing2, kemudian klik Tata Letak, klik Edit HTML
Lalu letakkan kode berikut di atas kode tag ]]></b:skin>
.arabic {font-family: Traditional Arabic;font-size: 18px; direction:rtl;line-height: 200% ;font-weight: bold;}
Klik Simpan template
Silahkan bagi teman2 yang ingin mengatur font arabnya, maka bisa di atur pada bagian "font-family:" di sana kita dapatkan font arab dengan jenis "Traditional Arabic", nah bagi teman2 yg ingin menggantinya maka bisa juga diganti dengan font Arab dgn jenis "Arabic Transparent", dll (untuk lebih lanjut lihat pada Ms.Word). Dan untuk mengatur ukuran font, maka teman2 bisa mengaturnya pada bagian "font-size:", nilai "18px" bisa teman2 sesuaikan dengan keinginan masing2
Selanjutnya yang harus teman2 lakukan ketika memosting yaitu menggunakan kode2 berikut ini (silahkan pilih)
1. Menggunakan "div"
Kode:
<div class="arabic">بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</div>
Hasil:
بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم
2. Menggunakan "p"
Kode:
<p class="arabic">بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</p>
Hasil:
بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم
3. Menggunakan "span"
Kode:
<span class="arabic">بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</span>
Hasil:
بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم
4. Menggunakan "span" ==> Tulisan latin+Arab
Kode:
<p>Tulisan Latin<span class="arabic">بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</span></p>
Hasil:
Tulisan Latinبِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم
Bagaimana teman2, gampangkan? Seperti yang tlah teman2 perhatikan, walau kode dalam pemostingan beda2 namun menghasilkan wujud yang sama, oleh karena itu terserah teman2 mau make kode yang mana.
Keywords: membuat tulisan arab dengan CSS, post with arabic font in Blogger
Untuk kemajuan Blog Ini Silahkan isi Kotak Komentarnya Ya.. (For blog development, please fill the following blog comment Pal
0 comment:
Post a Comment