//
you're reading...
Uncategorized

Cara menampilkan Tulisan Arab dengan CSS

Bismillah,

Postingan ini dikhususkan buat para blogger Muslim yg menggunakan bahasa arab utk menulis dalil2 dari Al Qur’an dan hadits

caranya dengan menambah css (style) pada XML pada blogger.com dan edit style.css pada theme di worpdress

kalau blogger dipasang sebelum tulisan ini di (edit html) atau xml file

Don’t copy directly click view Source button –>
1.]]></b:skin>

css ini berguna supaya kita tidak perlu memberikan jenis font, ukuran dan style lainnya utk tulisan arab, jadi sangat mempemudah dalam menulis artikel yg didalamnya ada tulisan arab

berikut css nya

Don’t copy directly click view Source button –>
1..arabic {font-family: Traditional Arabic;font-size: 24px;direction:rtl;line-height: 200% ;font-weight: bold;}

Silahkan ganti font-size dan font-weight sesuai keinginan

Penggunaanya dengan div

Don’t copy directly click view Source button –>
1.<div class="arabic"> بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</div>

Hasilnya

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Penggunaannya dengan p

Don’t copy directly click view Source button –>
1.<p class="arabic"> بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</p>

Hasilnya

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Penggunaannya dengan span

Don’t copy directly click view Source button –>
1.<span class="arabic"> بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم </span>

Hasilnya

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Campuran tulisan biasa dan arab dg span

Don’t copy directly click view Source button –>
1.<p>tulisan <span class="arabic">بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</span></p>

Hasilnya

tulisan بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

sumber:abu-farhan.com/2009/07/cara-menampilkan-tulisan-arab-dengan-css/

About cahayarasul

ingin beriman dan taqwa

Discussion

One thought on “Cara menampilkan Tulisan Arab dengan CSS

  1. assalamu’alaikum………….
    terima kasih atas sharing, ini sangat berharga.
    tapi itu set css di blogger. bagaimana untuk pengguna wordpress? tolong pencerahannya dunk!
    wassalam……………….

    Posted by tohaibnu | July 2, 2010, 1:02 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: