طبيب الطب النبوي Dokter Pengobatan Nabawi

Islam, Hukum, Sholat, Tatacara

(BAGUS) TIPS UNTUK MERUBAH/MENGGANTI FONT TULISAN ARAB DI BLOG WORDPRESS & BLOGSPOT | “MENGATUR SPASI” & MARGIN RATA KANAN/KIRI & TENGAH TULISAN ARAB DI WORDPRESS

with 5 comments


(BAGUS) TIPS UNTUK  MERUBAH/MENGGANTI FONT TULISAN ARAB DI BLOG WORDPRESS & BLOGSPOT | “MENGATUR SPASI” & MARGIN RATA KANAN/KIRI & TENGAH TULISAN ARAB DI WORDPRESS

MERUBAH/MENGGANTI FONT TULISAN ARAB DI WORDPRESS

Segala puji hanyalah milik Alloh Pemelihara Alam Semesta, Sholawat dan Salam semoga senantiasa terlimpahkan atas Nabi kita Muhammad  صلي الله عليه وسلم, kepada keluarga dan seluruh sahabat beliau. Amma ba’du:

Kebanyakan tulisan arab di web maupun blog adalah seperti berikut :

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

Tampilan tersebut selain kecil biasanya juga hanya dengan font Times New Roman [atau default web/blognya]

Alhamdulillah, hal seperti diatas tidak pada blog yang kita cintai ini, Untuk itu kami tuliskan caranya [untuk para blogger] agar tulisan arab terlihat indah di wordpress [baik gratisan maupun berbayar] yaitu:

    1. Masuk mode HTML
    2. Pastekan kode berikut

<p style=”text-align:right;padding-left:30px;line-height:150%;font-family:Traditional Arabic;font-size:22px;”>tulis atau paste disini tulisan arab disini</p>

Keterangan

        • right: adalah perataan teks, bisa diganti left atau center
        • Traditional Arabic: adalah jenis font/ huruf, dapat diganti dengan Andalus atau Simflified Arabic atau Arabic Typesetting dan font lainnya yang mendukung arabic
        • 22px: adalah besar font, makin besar nilainya maka akan besar tampilannya
        • tulis atau paste disini tulisan arabnya: ganti dengan tulisan arab atau pastekan tulisan arab
        • Padding: jaraknya dari tepi (bisa right atau left)
        • line-height: adalah jarak spasi paragraf
        • Penting: Kita dapat menghilangkan kode yang tidak dibutuhkan semisal padding atau line-height

Cara 2:

Silahkan anda  rubah dulu “mode visual” ke mode HTML dan sisipkan ini

<p style=”text-align: right;”> <span style=”color: red; font-family: traditional arabic; font-size: x-large;”>xxxxxxxxx</span></p>

xxxxxxxxx-nya aku ganti dengan huruf arab yang akan aku postkan. Dengan demikian fontnya menjadi traditional arabic dengan ukuran x-large atau bisa disesuaikan dengan keinginan large atau bahkan xx-large. Juga seperti umumnya tulisan arab, menjadi rata kanan. Di sini aku juga memakai warna merah, silahkan sesuaikan dengan selera saja.

Contoh:

Font Traditional Arabic dengan 22px, perataan right [kanan]

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

Font Andalus dengan 32px, perataan center [tengah], warna merah

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

Font Sagoe UI 24px, perataan left [kiri], warna biru

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

  • Catatan:
  • Pemberian warna kembali ke-mode visual dengan menggunakan tool ‘Select texc color’ dilambangkan dengan huruf A dan dibawahnya garis tebal berwarna [defaultnya hitam]
  • Font/huruf-huruf tersebut sudah harus terinstall di komputer kita dan pengunjung.

MENGATUR SPASI TULISAN ARAB DI WORDPRESS

Sebenarnya hal ini (spasi) tidaklah penting kalau hanya untuk tulisan latin, namun bagi tulisan arab terutama dengan baris akan terlihat saling bertaut baris pertama dengan baris berikutnya, perhatikan tulisan arab berikut dari ayat paling mulia ‘Ayat Kursi’:

اللّهُ لاَ إِلَـهَ إِلاَّ هُوَ الْحَيُّ الْقَيُّومُ لاَ تَأْخُذُهُ سِنَةٌ وَلاَ نَوْمٌ لَّهُ مَا فِي السَّمَاوَاتِ وَمَا فِي الأَرْضِ مَن ذَا الَّذِي يَشْفَعُ عِنْدَهُ إِلاَّ بِإِذْنِهِ يَعْلَمُ مَا بَيْنَ أَيْدِيهِمْ وَمَا خَلْفَهُمْ وَلاَ يُحِيطُونَ بِشَيْءٍ مِّنْ عِلْمِهِ إِلاَّ بِمَا شَاء وَسِعَ كُرْسِيُّهُ السَّمَاوَاتِ وَالأَرْضَ وَلاَ يَؤُودُهُ حِفْظُهُمَا وَهُوَ الْعَلِيُّ الْعَظِيمُ

Dengan memasukkan kode berikut dalam mode HTML:

<p style=”text-align: right; line-height: 300%;” ><span style=”font-family:Traditional Arabic; “><span style=”font-size: 24px;”>TEMPAT TULISAN ARAB DILETAKKAN</span></span></p>

 

Akan menghasilkan tulisan sebagai berikut:

اللّهُ لاَ إِلَـهَ إِلاَّ هُوَ الْحَيُّ الْقَيُّومُ لاَ تَأْخُذُهُ سِنَةٌ وَلاَ نَوْمٌ لَّهُ مَا فِي السَّمَاوَاتِ وَمَا فِي الأَرْضِ مَن ذَا الَّذِي يَشْفَعُ عِنْدَهُ إِلاَّ بِإِذْنِهِ يَعْلَمُ مَا بَيْنَ أَيْدِيهِمْ وَمَا خَلْفَهُمْ وَلاَ يُحِيطُونَ بِشَيْءٍ مِّنْ عِلْمِهِ إِلاَّ بِمَا شَاء وَسِعَ كُرْسِيُّهُ السَّمَاوَاتِ وَالأَرْضَ وَلاَ يَؤُودُهُ حِفْظُهُمَا وَهُوَ الْعَلِيُّ الْعَظِيمُ

Kode yang berperan dalam hal ini adalah ‘line-height:..%’, kita dapat bereksprimen dengan parsentase-nya…
Demikian yang dapat kami suguhkan kepada pembaca, terutama bagi rekan-rekan bloger yang menggunakan wordpress baik gratis maupun berbayar, semoga bermanfaat…

Sumber :

http://ibnumajjah.wordpress.com/2010/11/17/memasukkan-tulisan-arab-di-wordpress-com/

http://ibnumajjah.wordpress.com/2011/10/21/spasi-tulisan-arab-di-wordpress-com/

http://planetpulsa.com/mengganti-font-arab-pada-wordpress-dan-blogger/

5 Responses

Subscribe to comments with RSS.

  1. terimakasih

    lena damaiyanti

    May 1, 2013 at 19:51

  2. Wah, tutorial yang sangat membantu!, cocok untuk membuat blog yang berisi tentang dakwah dan hal-hal yang berbau islami. membuat tampilan blog lebih elegan dengan font arab yang bagus. Like THIS!!

    AspirasiKu

    April 20, 2012 at 10:28

  3. wowww.. info menariik, oya gan, mo tanya nie, cara nambahin font di blog wordpress gmana, cos saya mo nambahin fonts TAHOMA di blog newbie saya..

    palembaja

    April 18, 2012 at 20:00

  4. جزاكم الله خيرا

    muhammail

    April 17, 2012 at 12:57

  5. variasinya bagus gan ,, ntar aku coba di blog ane ah ..

    ditunggu kunjungan baliknya gan ..
    Karismea

    santoso

    April 16, 2012 at 07:56


Bagaimana menurut Anda?

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