earth

Guestbook

/* Iklan google ads */
Masih ingat dengan tulisan Cara Memasukkan Ayat Al-Qur'an Kedalam Artikel? Itu tulisan jadul mengenai cara menambakhan ayat-ayat Al-Qur'an 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-Qur'an kedalam artikel tersebut. Cara ini, tidak lagi menggunakan image tetapi lansung berupa teks ayat-ayat Al-Qur'an.

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-Qur'an 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-Qur'an yang berupa teks ini kita bisa memanfaatkan ayat-ayat Al-Qur'an dari Al-Qur'an 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-Qur'an 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-Qur'an dengan warna berbeda, masuklah ke mode Compose lalu blok dan beri warna.
  • Setelah itu simpan dan ucapkan Alhamdulillah...

Nah, selesai deh. Gampang kan?

Ok, segitu aja sob. Semoga bermanfaat .....
  • Artikel Terkait Dengan Blog Tutorials

    Terimakasih sudah membaca artikel SC Community's Blog

    13 komentar

    artkel y mnrik,apl bla aq bsa mnlis psan sekedr catatan sperti d atas,cra x gmna ya?

    27 Oktober 2013 15.06  

    ayat-ayat Allah memang terbukti kebenarannya :) , kalian tahu kalo ada aplikasi pencari lafaz Alquran menggunakan huruf latin? meskipun panjang pendek dsb tidak tepat asal pengucapan benar dalam tuliasan bisa ketemu looh :D silahkan coba http://apps.cs.ipb.ac.id/lafzi/web/ terimakasih :)

    22 November 2013 15.15  

    terimakasih posting nya semoga bermanfaat

    1 Januari 2014 20.46  

    Terimakasih Tutorialnya, sangat bermamfaat

    26 Januari 2014 12.48  

    Terima kasih tutorialnya, ini sangat bermanfaat. Akan saya coba, smoga saya berhasil.

    1 Juli 2014 13.27  

    MAKASIH
    http://www.dhanhariz.esy.es/

    24 Desember 2014 21.00  

    assalamu'alaikum....
    salam kenal, trimakasih mas atas infonya
    coba mampir ke blog sy arminarekatop.blogspot.com

    4 Januari 2015 17.31  

    mimin mengambil sumber ayatnya dari mana ya? soalnya sumber link ayat-ayat yang mimin berikan udah gak bisa dibuka lagi.

    2 April 2015 09.31  

    Semoga bermamfaat bagi kita semua...

    28 Mei 2016 06.30  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    10 Artikel Terbaru

    10 Artikel Terpopuler