طريقة إنشاء سكريبت القرآن الكريم (صوت وكتابة) لمدونة بلوجر

يعتبر إدراج القرآن الكريم في مدونتك من أفضل الطرق لتقديم محتوى ديني وثقافي مفيد للزوار.

كما وعدناكم اليوم و في هذا المقال، سأرشدك خطوة بخطوة حول كيفية إنشاء سكريبت يعرض سور وآيات القرآن الكريم مع تلاوة صوتية لكل آية، مع التركيز على تحسين SEO لجعل هذا المحتوى يظهر في نتائج محركات البحث.

الخطوة 1: استخدام API لجلب القرآن الكريم صوتًا وكتابة

يمكنك استخدام API القرآن الكريم لجلب السور والآيات مع التلاوات الصوتية. هذه الطريقة تضمن لك محتوى دقيق ومحدث، كما توفر عليك الوقت والجهد في إدراج البيانات يدويًا.

أحد الخيارات المميزة هو Al Quran Cloud، الذي يوفر لك واجهة سهلة الاستخدام للحصول على بيانات القرآن.

الخطوة 2: إنشاء سكريبت القرآن الكريم في بلوجر

أولاً: توجه إلى لوحة التحكم في مدونتك، وانتقل إلى "التخطيط" ثم اختر "إضافة أداة" وحدد "HTML/JavaScript". بعد ذلك، قم بلصق الكود التالي:

<div id="quran-container"> <h2>القرآن الكريم (صوت وكتابة)</h2> <select id="surahSelect"></select> <div id="quranText"></div> <audio id="quranAudio" controls></audio> </div> <script> // جلب السور والآيات من API async function fetchSurahs() { const response = await fetch('https://api.alquran.cloud/v1/surah'); const data = await response.json(); return data.data; } async function fetchAyahs(surahNumber) { const response = await fetch(`https://api.alquran.cloud/v1/surah/${surahNumber}/ar.alafasy`); const data = await response.json(); return data.data.ayahs; } async function fetchAudio(surahNumber) { const response = await fetch(`https://api.alquran.cloud/v1/surah/${surahNumber}/ar.alafasy`); const data = await response.json(); return data.data.ayahs.map(ayah => ayah.audio); } // ملء القائمة بالسور async function populateSurahSelect() { const surahs = await fetchSurahs(); const surahSelect = document.getElementById('surahSelect'); surahs.forEach(surah => { const option = document.createElement('option'); option.value = surah.number; option.textContent = surah.englishName + ' - ' + surah.name; surahSelect.appendChild(option); }); // عرض السورة الأولى افتراضياً displaySurahText(surahs[0].number); } // عرض الآيات مع التلاوة async function displaySurahText(surahNumber) { const ayahs = await fetchAyahs(surahNumber); const quranText = document.getElementById('quranText'); const quranAudio = document.getElementById('quranAudio'); quranText.innerHTML = ''; // مسح النص الحالي ayahs.forEach(ayah => { const ayahElement = document.createElement('p'); ayahElement.textContent = `${ayah.numberInSurah}. ${ayah.text}`; quranText.appendChild(ayahElement); }); // تشغيل التلاوة الصوتية للآية الأولى quranAudio.src = ayahs[0].audio; quranAudio.play(); } // تغيير السورة عند اختيار سورة جديدة document.getElementById('surahSelect').addEventListener('change', function() { const selectedSurah = this.value; displaySurahText(selectedSurah); }); // استدعاء الدوال populateSurahSelect(); </script> <style> #quran-container { text-align: right; direction: rtl; background-color: #f9f9f9; padding: 20px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } #surahSelect { font-size: 18px; margin-bottom: 20px; } #quranText { font-size: 20px; line-height: 1.6; color: #333; } #quranAudio { margin-top: 20px; width: 100%; } </style>

القرآن الكريم (صوت وكتابة)

الخطوة 3: تحسين SEO

لضمان ظهور المحتوى الخاص بك في نتائج محركات البحث، إليك بعض النصائح لتحسين SEO:

1. استخدام الكلمات المفتاحية: تأكد من تضمين الكلمات المفتاحية ذات الصلة مثل "القرآن الكريم"، "تلاوة القرآن الكريم"، و"سورة الفاتحة" في العناوين والوصف.
2. الوصف الميتا: أضف وصفًا غنيا للمقال لجذب الزوار.
3. الروابط الخلفية: ضع روابط خارجية لمواقع موثوقة مثل Quran.com لتحسين مصداقية المحتوى.
4. إضافة الصور: استخدم صورًا ذات صلة بالقرآن الكريم، وقم بتسمية الصور باستخدام كلمات مفتاحية.

الروابط المفيدة لتحسين الموضوع:

• API القرآن الكريم
• دليل تحسين SEO من Google

كود سكريبت القرآن الكريم كامل

يعد هذا السكريبت وسيلة رائعة وسهلة لعرض القرآن الكريم كتابة وتلاوة صوتية في مدونة بلوجر. باستخدام API موثوقة وتحسين SEO، يمكنك جذب المزيد من الزوار وتقديم محتوى ديني مفيد وعملي.

معاينة صفحة القرآن الكريم 

القرآن الكريم 

  
  
  <h1 dir="rtl" style="text-align: right;"><span style="vertical-align: inherit;">القرآن الكريم اون لاين</span></h1><div class="separator" dir="rtl" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKxWjS9jATpGNJi6CmDD34mTYpaBte7hF_n1w7WcVVpVuULdHPXCkh3T2k5YZQPDp-5cbwkf1o2I0lBKDse-iBORe7Qcq4INPkruUkaCuhRFcB3G3r-8DXpI06KY1K15uuqJLSlix62hJTYu1Nzae3HfYXxPyVMr77nDFKEIZ0JwapJczgnzKDL-MFmNk/s1200/1520203611592.webp" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="680" data-original-width="1200" height="181" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKxWjS9jATpGNJi6CmDD34mTYpaBte7hF_n1w7WcVVpVuULdHPXCkh3T2k5YZQPDp-5cbwkf1o2I0lBKDse-iBORe7Qcq4INPkruUkaCuhRFcB3G3r-8DXpI06KY1K15uuqJLSlix62hJTYu1Nzae3HfYXxPyVMr77nDFKEIZ0JwapJczgnzKDL-MFmNk/s320/1520203611592.webp" width="320" /></a></div><div dir="rtl" style="text-align: right;"><br /></div><h2 dir="rtl" style="text-align: right;"><span style="vertical-align: inherit;">الاستماع إلى القرآن الكريم</span></h2><div dir="rtl" style="text-align: right;"><br /></div><div dir="rtl" style="text-align: right;"> <!--font awesome kit--><script crossorigin="anonymous" src="https://kit.fontawesome.com/1694914d74.js"></script><!--<div>
        <h2 class="title">Quran Player<h2>
    </div>--><div class="container"><div class="player"><div class="title" id="title"><span style="vertical-align: inherit;">بسم الله الرحمن الرحيم </span></div><audio autoplay="" class="quranPlayer" controls="" src=""></audio><div class="buttons"><div class="icon previous"><i class="fa-solid fa-backward"></i></div><!--<div class="icon play"><i class="fa-solid fa-play"></i></div>--><div class="icon next"><i class="fa-solid fa-forward"></i></div></div></div><div class="surahs"></div></div><style>/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;700;800;1000&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}



.title {
    max-width: 1170px;
    margin: 10px auto 0;
    font-weight: bold;
}

.containyer {
    max-width: 80%;
    width: 100%;
  height:auto;
    
  display:inline-block;
  position:relative;
  
}

.player {
    background: linear-gradient(to right, black, #433);
    position: sticky;
    top: 0;
    padding: 10px;
    margin: 10px auto ;
    border-radius: 7px;
    z-index: 100;
}

.player .title {
    padding: 10px 15px;
    font-size: 28px;
    color: yellow;
    font-weight: 600;
    text-align: center;
}

.player audio {
    width: 90%;
    height: 40px;
    margin:0;
  padding:0 auto;
  text-align:center;
  display:inline-block;
  align-items:center;
  justify-content:center;
}

.player .buttons {
    display: flex;
    justify-content: space-around;
}

.buttons .icon{
    color: #dddddd;
    width: 0px;
    height: 0px;
    border-radius: 100%;
    background-color: transparent;
  border: 10px solid black;
    display: grid;
    place-items: center;
    font-size: 24px;
    cursor: pointer;
}

.surahs {
    z-index: 0;
    height: calc(10% - 300px);
    overflow: scroll;
    scroll-behavior: smooth;
    height:500px;
    -ms-overflow-style: none;
}

.surahs::-webkit-scrollbar {
    display: none;
}

.surahs > div {
    color: #23162f;
    background-color: white;
    border-radius: 7px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    font-weight: bold;
    float: right;
    direction: rtl;
    width: calc(100% - 90px);
    transition: .3s color ease;
    cursor: pointer;
    margin-bottom: 10px;
    padding: 0px 10px;
    position: relative;
    font-size: 17px;
    counter-increment: surah-counter;
  background: #fff;
}

.surahs > div .ar {
    color: brown;
}

.surahs > div::after {
    content: counter(surah-counter);
    position: absolute;
    height: 80px;
    width: 80px;
    left: -90px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    font-size: 17px;
    line-height: 80px;
    text-align: center;
    background-color: inherit;
    transition: inherit;
    box-shadow: inherit;
}

.surahs > div::before {
    content: "";
    position: absolute;
    border: 17px solid transparent;
    border-right-color: blue;
    top: 50%;
    transform: translateY(-50%);
    left: -14px;
}

.surahs > div:hover,
.surahs > div:hover::after {
    background:#ffffff;
    color:black;
}
  </style><!--JS file--><script>let audio = document.querySelector('.quranPlayer'),
    surahContainer = document.querySelector('.surahs'),
    ayah = document.querySelector('.ayah'),
    next = document.querySelector('.next'),
    prev = document.querySelector('.previous'),
    play = document.querySelector('.play'),
    title = document.getElementById('title');

getSurahs();

function getSurahs() {
    fetch('https://quran-endpoint.vercel.app/quran')
        .then(res => res.json())
        .then(data => {
            console.log(data.data);
            for (let surah in data.data) {
                surahContainer.innerHTML += `
                    <div>
                        <p class="ar">${data.data[surah].asma.ar.long}</p>
                        <p>${data.data[surah].asma.en.long} (${data.data[surah].asma.translation.en})</p>
                    </div>
                `
            }

            // select all surahs
            let allSurahs = document.querySelectorAll('.surahs div');
            let index;

            allSurahs.forEach((surah, idx) => {
                surah.addEventListener('click', () => {
                    index = idx;
                    play(idx);
                })
            })

            prev.addEventListener('click', () => {
                (index > 0) ? index-- : index;
                play(index);
            })

            next.addEventListener('click', () => {
                (index < 114) ? index++ : index;
                play(index);
            })

            function play(idx) {
                console.log(idx);
                audio.src = data.data[idx].recitation.full;
                title.innerText = `${idx+1}. ${data.data[idx].asma.en.long}`;
            }
        })
}
</script></div><p dir="rtl" style="text-align: right;"><br /></p><h3 dir="rtl" style="text-align: right;"><span style="vertical-align: inherit;">قراءة القرآن الكريم</span></h3><p dir="rtl" style="text-align: right;"><span style="vertical-align: inherit;">مع نص القرآن الكريم الدقيق وترجمات القرآن الكريم بمختلف اللغات.</span></p>
<div id="quran-container">
  <h2 dir="rtl" style="text-align: right;">القرآن الكريم كامل</h2>
  <select id="surahSelect"></select>
  <div id="quranText"></div>
</div>

<script>
  // جلب البيانات من API
  async function fetchSurahs() {
    const response = await fetch('https://api.alquran.cloud/v1/surah');
    const data = await response.json();
    return data.data;
  }

  async function fetchAyahs(surahNumber) {
    const response = await fetch(`https://api.alquran.cloud/v1/surah/${surahNumber}/ar.alafasy`);
    const data = await response.json();
    return data.data.ayahs;
  }

  // ملء القائمة بالسور
  async function populateSurahSelect() {
    const surahs = await fetchSurahs();
    const surahSelect = document.getElementById('surahSelect');

    surahs.forEach(surah => {
      const option = document.createElement('option');
      option.value = surah.number;
      option.textContent = surah.englishName + ' - ' + surah.name;
      surahSelect.appendChild(option);
    });

    // عرض السورة الأولى افتراضياً
    displaySurahText(surahs[0].number);
  }

  // عرض آيات السورة
  async function displaySurahText(surahNumber) {
    const ayahs = await fetchAyahs(surahNumber);
    const quranText = document.getElementById('quranText');
    quranText.innerHTML = ''; // مسح النص الحالي

    ayahs.forEach(ayah => {
      const ayahElement = document.createElement('p');
      ayahElement.textContent = `${ayah.numberInSurah}. ${ayah.text}`;
      quranText.appendChild(ayahElement);
    });
  }

  // تغيير السورة عند اختيار سورة جديدة
  document.getElementById('surahSelect').addEventListener('change', function() {
    const selectedSurah = this.value;
    displaySurahText(selectedSurah);
  });

  // استدعاء الدوال
  populateSurahSelect();
</script>

<style>
  #quran-container {
    text-align: right;
    direction: rtl;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }

  #surahSelect {
    font-size: 18px;
    margin-bottom: 20px;
  }

  #quranText {
    font-size: 20px;
    line-height: 1.6;
    color: #333;
  }
</style>