Apa Itu Widget Tadabbur (Ayat) Alquran?
Widget Tadabbur (Ayat) Quran adalah fitur digital yang menampilkan kutipan ayat-ayat Alquran secara acak atau spesifik pada halaman sebuah situs. Widget ini bisa disesuaikan dengan desain blog/situs, dilengkapi terjemahan. Widget ini dapat diperbarui otomatis, memudahkan pengelola blog/situs untuk menyajikan ayat Alquran.
Fitur Widget Tadabbur (Ayat) Alquran?
- Menampilkan ayat Quran acak berbeda setiap kali memuat ulang laman
- Menggunakan API Al-Quran Cloud yang resmi
- Menampilkan teks Arab dengan font khusus
- Dilengkapi terjemahan Bahasa Indonesia
- Menampilkan nama surah dan nomor ayat
- Responsif dan estetik
- Automatis refresh setiap kali reload
Cara Memasang Widget Ayat Alquran di Blogger/Wordpress
Salin kode HTML/Javascript (berwarna hijau) Tadabbur Quran, berikut:
<div id="quranVerseContainer">
<div class="section-title">Tadabbur Quran</div>
<div id="quranVerse" style="text-align: center; padding: 20px;">
<p style="font-size: 24px; direction: rtl;" id="arabicVerse"></p>
<p style="font-style: regular; color: #666;" id="translation"></p>
<p style="font-weight: bold;" id="reference"></p>
</div>
</div>
<script>
// Fungsi menghasilkan nomor acak antara 1-6236
function getRandomAyahId() {
return Math.floor(Math.random() * 6236) + 1;
}
async function loadRandomVerse() {
try {
const randomVerseId = getRandomAyahId();
const response = await fetch(`https://api.alquran.cloud/v1/ayah/${randomVerseId}/editions/ar.alafasy,id.indonesian?t=${Date.now()}`);
const data = await response.json();
if(data.code === 200 && data.status === "OK") {
const arabicText = data.data[0].text;
const translation = data.data[1].text;
const surahName = data.data[0].surah.englishName;
const ayahNumber = data.data[0].numberInSurah;
document.getElementById('arabicVerse').textContent = arabicText;
document.getElementById('translation').textContent = `"${translation}"`;
document.getElementById('reference').textContent = `QS. ${surahName} : ${ayahNumber}`;
} else {
throw new Error('Invalid API response');
}
} catch (error) {
document.getElementById('quranVerse').innerHTML = '<p style="color: red">Gagal memuat ayat. Silakan refresh halaman.</p>';
}
}
window.onload = loadRandomVerse;
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Amiri&family=Roboto:wght@400;700&display=swap');
#quranVerseContainer {
border: 1px solid #eaeaea;
border-radius: 10px;
margin: 15px 0;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
font-family: 'Roboto', sans-serif;
background: #f8f8f8;
}
.section-title {
font-family: 'Roboto', sans-serif;
font-size: 1.5em;
font-weight: 700;
color: #2c7a7b;
text-align: center;
padding: 15px 0;
border-bottom: 2px solid #e0e0e0;
margin: 0 20px;
letter-spacing: 1px;
text-transform: uppercase;
}
#arabicVerse {
font-family: 'Amiri', serif;
line-height: 2.5em;
margin-bottom: 15px;
color: #2d3436;
padding-top: 10px;
}
#translation {
font-family: 'Roboto', sans-serif;
font-size: 1.2em;
line-height: 1.6em;
margin: 15px 0;
padding: 0 10px;
color: #555;
}
#reference {
font-family: 'Roboto', sans-serif;
color: #2c7a7b;
font-size: 1em;
letter-spacing: 0.5px;
margin-top: 10px;
padding-bottom: 10px;
}
@media (max-width: 480px) {
.section-title {
font-size: 1.3em;
padding: 12px 0;
}
#arabicVerse {
font-size: 22px;
line-height: 2.2em;
}
#translation {
font-size: 0.85em;
}
}
</style>
1. Blogger
- Masuk ke dashboard Blogger
- Pilih "Tata Letak"
- Klik "Tambahkan Gadget"
- Pilih "HTML/JavaScript"
- Salin kode di atas ke dalam kotak konten
- Simpan
2. Wordpress.org (self hosted)
Metode 1: Menggunakan Custom HTML Block
- Buka editor halaman/post/widget area
- Tambahkan block "Custom HTML"
- Tempel seluruh kode HTML/CSS/JavaScript sebelumnya
- Simpan perubahan
Metode 2: Via Theme Editor
- Masuk ke Appearance > Theme File Editor
- Edit file footer.php atau header.php
- Tempel kode CSS dalam tag <style> di header
- Tempel kode HTML+JavaScript di area konten
Metode 3: Menggunakan Plugin (Direkomendasikan)
- Install plugin "Insert Headers and Footers"
- Tempel kode CSS dalam "Header Scripts"
- Tempel kode HTML+JavaScript di widget area menggunakan "Custom HTML" block
3. Wordpress.com (free hosted)
- Hanya bisa menggunakan Custom HTML block
- JavaScript mungkin tidak akan dieksekusi karena pembatasan keamanan
- Hanya tampilan statis yang akan muncul
Manfaat Widget Ayat Alquran untuk Sebuah Situs
- Aksesibilitas Ayat Suci: pengunjung website dapat membaca ayat Alquran setiap kali membuka laman situs. Ini memudahkan mereka merenungkan firman Allah kapan saja.
- Inspirasi Harian: widget yang menampilkan ayat acak setiap hari memberikan suntikan motivasi dan refleksi spiritual bagi pembaca.
- Memperkuat Identitas Islami: kehadiran ayat Alquran mempertegas situs sebagai platform dakwah digital yang mengedepankan nilai-nilai Islam.
- Sarana Edukasi: widget bisa dilengkapi ayat dan terjemahan, membantu pengunjung memahami makna ayat secara mendalam.
Penutup
Memasang Widget Ayat Alquran adalah langkah kecil dengan dampak besar. Selain mempercantik tampilan, fitur ini menjadi pengingat akan kebesaran Allah di tengah hiruk-pikuk dunia digital. Mari jadikan blog dan situs kita sebagai sarana yang tidak hanya informatif, tetapi juga menyejukkan hati dan menyuburkan iman. *| Kosim
