Membuat Tulisan Arab pada Blog dengan CSS

Mungkin beberapa rekan blogger ada yang ingin mencoba menulis tulisan Arab di Blognya, seperti basmalah, hamdalah, atau juga syahadatain. Terlepas dari itu semua saya yakin pasti sudah ada yang mencobanya, namun alhasil tidak sesuai dng keinginan kita alias gak bagus2 amat, dan alternatif terakhirnya tidak menggunakan font akan tetapi gambar. Sedangkan beberapa rekan Blogger yang memilki blog dengan tema pembahasan yang bersifat agama serta dakwah islami mau tidak mau si admin blog tersebut pasti akan menyisipkan dalil2 yag bersumber dari qur'an dan hadits, dan mayoritas yg kita dapatkan dalil2 tersebut hanya berupa terjemahannya saja. Dan satu lagi yang paling saya yakini bahwa rekan blogger yg memilki tema dakwah islami tersebut benar2 ingin menampilkan tulisan Arab di Blognya, namun karena alasan tadi... niat bagus tersebut terelakkan. Oleh karena itu bagi rekan2 blogger yg ingin menulis tulisan Arab di blognya, sekarang gak perlu susah lagi, karena kita akan men-sharing-nya bersama2 dalam postingan kali ini.

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 menghsilkan wujud yang sama, oleh karena itu terserah teman2 mau make kode yang mana.

dengan harapan bisa sharing dengan siapa pun (termasuk bule Inggris n Arab), kemampuan bahasa yang minim pun tetap saja PD, yg penting bisa sharing dulu...n than maslah bahasa akan bisa ala biasa...dah dulu yooo... GoOd LuCk~

Semoga Bermanfaat

Penulis : IKHLASIKHSANALYA ~ Sebuah blog yang menyediakan berbagai macam informasi

Artikel Membuat Tulisan Arab pada Blog dengan CSS ini dipublish oleh IKHLASIKHSANALYA pada hari 21 July 2012. Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 0 komentar: di postingan Membuat Tulisan Arab pada Blog dengan CSS