أفضل كود قرآن كريم لمدونتك HTML بتصميم احترافي وسهل التركيب

 كود لعرض القرآن الكريم على مدونة بلوجر بطريقة أنيقة وسهلة، سواء كان على شكل مقتطفات من الآيات، آية يومية، أو أداة تفاعلية للزوار. سأعطيك نموذجًا جاهزًا يمكنك نسخه ولصقه مباشرة في إضافة HTML/JavaScript في مدونتك.

---

مثال 1: آية يومية تتغير تلقائيًا

<div id="quran-widget" style="font-family: 'Arial', sans-serif; font-size:16px; color:#333; background:#f9f9f9; padding:15px; border-radius:10px; max-width:400px;">
</div>

<script>
const verses = [
  "اللَّهُ لا إِلَهَ إِلَّا هُوَ الْحَيُّ الْقَيُّومُ - البقرة:255",
  "وَقُل رَّبِّ زِدْنِي عِلْمًا - طه:114",
  "فَإِنَّ مَعَ الْعُسْرِ يُسْرًا - الشرح:6",
  "وَاذْكُر رَّبَّكَ إِذَا نَسِيتَ - الأعراف:205",
  "إِنَّ اللَّهَ مَعَ الصَّابِرِينَ - البقرة:153"
];

function displayVerse() {
  const randomIndex = Math.floor(Math.random() * verses.length);
  document.getElementById('quran-widget').innerText = verses[randomIndex];
}

displayVerse();
setInterval(displayVerse, 86400000); // تغير الآية كل 24 ساعة
</script>

✅ مميزات الكود:

• يعرض آية عشوائية يوميًا.

• تصميم بسيط وأنيق وقابل للتعديل.

• خفيف على الموقع ولا يبطئ التحميل.

---

أداة للتصفح بين صور القرآن

<select id="sura-select" onchange="showSura()">
  <option value="">اختر السورة</option>
  <option value="الفاتحة">الفاتحة</option>
  <option value="البقرة">البقرة</option>
  <option value="آل عمران">آل عمران</option>
</select>

<div id="sura-display" style="margin-top:15px; font-size:16px;"></div>

<script>
const suras = {
  "الفاتحة": "بسم الله الرحمن الرحيم ...",
  "البقرة": "الم ... ذلك الكتاب لا ريب فيه هدى للمتقين ...",
  "آل عمران": "الم ... الله لا إله إلا هو الحي القيوم ..."
};

function showSura() {
  const selected = document.getElementById('sura-select').value;
  document.getElementById('sura-display').innerText = suras[selected] || '';
}
</script>

✅ مميزات الكود:

• الزائر يمكنه اختيار الصورة لعرض بدايتها.

• سهل التخصيص، يمكن إضافة كل سور القرآن إذا أحببت.

---