Cara Memasukkan Ayat Al Quran Kedalam Posting Blog ~ Berbagi cerita

Masih ingat dengan tulisan Cara Memasukkan Ayat Al-Quran Kedalam Artikel? Itu tulisan jadul mengenai cara menambakhan ayat-ayat Al-Quran yang berupa gambar atau image kedalam artikel blog. Pada saat itu, memang cara itulah yang saya tahu dan paling mungkin dilakukan mengingat perkembangan dunia informatika belum semaju dan secanggih ini. Namun kini, ternyata ada cara lain yang bisa kita lakukan untuk memasukkan ayat-ayat Al-Quran kedalam artikel tersebut. Cara ini, tidak lagi menggunakan image tetapi lansung berupa teks ayat-ayat Al-Quran.

Selain itu, cara ini pun memudahkan kita untuk mengatur dan mewarnai huruf, menandai kalimat-kalimat tertentu dengan warna yang berbeda, juga bisa melakukan pemenggalan terhadap ayat-ayat Al-Quran sesuai dengan kebutuhan. Berbeda dengan ketika menggunakan image kita tidak bisa melakukan hal itu semua.

Sebagai contoh bisa dilihat pada penggalan surat Al-Hujurât ayat 11 berikut, dengan menandai kalimat yang ingin diberikan tekanan:

يَا أَيُّهَا الَّذِينَ آمَنُوا لَا يَسْخَرْ قَوْمٌ مِنْ قَوْمٍ عَسَىٰ أَنْ يَكُونُوا خَيْرًا مِنْهُمْ

"Hai orang-orang yang beriman, janganlah menghina suatu kelompok terhadap kelompok lain, karena boleh jadi kelompok yang dihina itu lebih baik dari mereka yang menghina..."

Untuk memasukkan ayat-ayat Al-Quran yang berupa teks ini kita bisa memanfaatkan ayat-ayat Al-Quran dari Al-Quran Online atau dari sumber lain yang kita temukan. Caranya:

Masuklah ke Editing Template blog, kemudian tambahkan CSS berikut di atas kode ]]></b:skin>:

/*=== Huruf Arab ===*/
.arabic {
font-size: 26px; font-weight: normal;
font-family: KFGQPC Uthman Taha Naskh, KFGQPC_Naskh, traditional arabic;
margin-top: 10px; margin-bottom: 10px; 
padding-left: 20px; padding-right: 20px;
direction: rtl; line-height: 34px;
}
.translate {
margin-top: 0px; margin-bottom: 20px; 
padding-left: 20px; padding-right: 20px;
}

Ukuran berwarna merah bisa diatur kembali jika diperlukan

Setelah disimpan, mulailah dengan Entri baru.

Pilihlah mode HTML, lalu lakukan penulisan seperti ini:

<div class="arabic">
Ayat Al-Quran tempelkan di sini
</div>
<div class="translate">
Terjemahan tempelkan di sini
</div>

Pilih ayat-ayat dari quran.ittelkom.ac.id, atau dari sumber lain, lalu kopi (copy) dan tempelkan (paste) di antara kode div (warna biru).
Untuk lebih memudahkan pencarian ayat, bisa langsung munuliskan URL pada address bar seperti ini:
Surat Al-Baqarah ayat 255 (QS, 2:255), ditulis:
http://quran.ittelkom.ac.id/?sid=2&aid=255&pid=arabicid

Surat Al-Hujarat ayat 11 (QS, 49:11), ditulis:
http://quran.ittelkom.ac.id/?sid=49&aid=11&pid=arabicid
Lakukan pratinjau (preview) kalau-kalau ada karakter huruf yang "ngaco" (tanda waqaf jadi seperti kotak). Jika ada, hapus karakter tersebut.
Jika ingin menandai kalimat pada ayat Al-Quran dengan warna berbeda, masuklah ke mode Compose lalu blok dan beri warna.
Setelah itu simpan dan ucapkan Alhamdulillah...