القرآن الكريم لبلوجر | قراءة سهلة وتلاوة صوتية

كود بلوجر كامل لأداة القرآن الكريم  

• متجاوب مع الهاتف

• تصميم إسلامي أنيق

• اختيار السورة وعرض الآيات

• إمكانية إضافة التلاوة لاحقًا بسهولة

---

📖 كود بلوجر كامل بالتصميم والصورة

<div id="quran-blogger" style="
background: url('https://cdn.pixabay.com/photo/2016/11/29/12/54/quran-1867339_1280.jpg') no-repeat center center; 
background-size: cover; 
padding: 25px; 
border-radius: 15px;
color: #fff;
text-align: center;
font-family:'Amiri', serif;
box-shadow:0 10px 25px rgba(0,0,0,0.25);
">









<style>
#quran-blogger select{
    width:90%;
    padding:12px;
    font-size:18px;
    border-radius:10px;
    border:none;
    margin:20px 0;
}

.ayah{
    background: rgba(0,0,0,0.4);
    margin:12px 0;
    padding:15px;
    border-right:6px solid #ffd700;
    border-radius:10px;
    font-size:22px;
    line-height:2.4;
}
</style>

<h2>📖 القرآن الكريم</h2>
<p>اقرأ السورة المختارة</p>

<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 id="quranTextBlogger"></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 if(s == "113"){
        q.innerHTML = `
        <div class="ayah">﴿ قُلْ أَعُوذُ بِرَبِّ الْفَلَقِ ﴾</div>
        <div class="ayah">﴿ مِن شَرِّ مَا خَلَقَ ﴾</div>
        <div class="ayah">﴿ وَمِن شَرِّ غَاسِقٍ إِذَا وَقَبَ ﴾</div>
        <div class="ayah">﴿ وَمِن شَرِّ النَّفَّاثَاتِ فِي الْعُقَدِ ﴾</div>
        <div class="ayah">﴿ وَمِن شَرِّ حَاسِدٍ إِذَا حَسَدَ ﴾</div>
        `;
    } else if(s == "114"){
        q.innerHTML = `
        <div class="ayah">﴿ قُلْ أَعُوذُ بِرَبِّ النَّاسِ ﴾</div>
        <div class="ayah">﴿ مَلِكِ النَّاسِ ﴾</div>
        <div class="ayah">﴿ إِلَٰهِ النَّاسِ ﴾</div>
        <div class="ayah">﴿ مِن شَرِّ الْوَسْوَاسِ الْخَنَّاسِ ﴾</div>
        <div class="ayah">﴿ الَّذِي يُوَسْوِسُ فِي صُدُورِ النَّاسِ ﴾</div>
        `;
    } else {
        q.innerHTML = "";
    }
}
</script>

</div>

---

🔹 مميزات الكود

• خلفية صورة مصحف جذابة واحترافية

• عرض السور مع الآيات بخط واضح

• تصميم متجاوب مع الهاتف

• سهل التطوير لإضافة تلاوة صوتية تلقائية لاحقًا

• لون النص والخلفية شفاف لتناسق مع الصورة

---

اللهم جعل القران ربيع قلوبنا؟