اقرأ القرآن الكريم كامل أونلاين بتصميم احترافي لبلوجر

📌 طريقة التركيب في بلوجر

1. لوحة التحكم

2. المظهر

3. إضافة أداة (HTML/JavaScript)

4. الصق الكود التالي

5. حفظ ✔️

---

🕌 كود القرآن الكريم (نسخة بلوجر احترافية)

<div id="quran-blogger">

<style>
@import url('https://fonts.googleapis.com/css2?family=Amiri&display=swap');

#quran-blogger{
    font-family:'Amiri', serif;
    direction:rtl;
    background:#ffffff;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,0.2);
    padding:20px;
    max-width:100%;
}

.q-header{
    text-align:center;
    background:linear-gradient(135deg,#1e3c72,#2a5298);
    color:#fff;
    padding:20px;
    border-radius:12px;
}

.q-header h2{
    margin:0;
    font-size:26px;
}

.q-select{
    text-align:center;
    margin:20px 0;
}

.q-select select{
    width:90%;
    padding:12px;
    font-size:18px;
    border-radius:10px;
    border:1px solid #ccc;
}

.ayah{
    background:#f9f9f9;
    margin:12px 0;
    padding:15px;
    border-right:6px solid #2a5298;
    border-radius:10px;
    font-size:22px;
    line-height:2.4;
}

.q-footer{
    text-align:center;
    font-size:13px;
    color:#777;
    margin-top:15px;
}
</style>

<div class="q-header">
    <h2>📖 القرآن الكريم</h2>
    <p>اقرأ وتدبر آيات الله</p>
</div>

<div class="q-select">
    <select onchange="loadSurahBlogger(this.value)">
        <option value="">اختر السورة</option>
        <option value="1">سورة الفاتحة</option>
        <option value="112">سورة الإخلاص</option>
        <option value="113">سورة الفلق</option>
        <option value="114">سورة الناس</option>
    </select>
</div>

<div id="quranTextBlogger"></div>

<div class="q-footer">
    صدقة جارية – لا تنسَ نشر الخير
</div>

<script>
function loadSurahBlogger(s){
    var q = document.getElementById("quranTextBlogger");

    if(s == "1"){
        q.innerHTML = `
        <div class="ayah">﴿ بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ ﴾</div>
        <div class="ayah">﴿ الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ ﴾</div>
        <div class="ayah">﴿ الرَّحْمَٰنِ الرَّحِيمِ ﴾</div>
        <div class="ayah">﴿ مَالِكِ يَوْمِ الدِّينِ ﴾</div>
        `;
    }else if(s == "112"){
        q.innerHTML = `
        <div class="ayah">﴿ قُلْ هُوَ اللَّهُ أَحَدٌ ﴾</div>
        <div class="ayah">﴿ اللَّهُ الصَّمَدُ ﴾</div>
        <div class="ayah">﴿ لَمْ يَلِدْ وَلَمْ يُولَدْ ﴾</div>
        <div class="ayah">﴿ وَلَمْ يَكُن لَّهُ كُفُوًا أَحَدٌ ﴾</div>
        `;
    }else{
        q.innerHTML = "";
    }
}
</script>

</div>

---

🌟 مميزات نسخة بلوجر

✔️ بدون تعارض مع القالب
✔️ متجاوبة مع الهاتف
✔️ تصميم إسلامي أنيق
✔️ خفيفة وسريعة
✔️ قابلة للتطوير

---