شرح اضافة اداة استماع وتحميل القرآن الكريم لمدونات بلوجر ومواقع الويب

[احمد مـحمود]

بسم الله الرحمن الرحيم​

---

إضافة أداة استماع وتحميل القرآن الكريم لمدونتك أو موقعك الإلكتروني​

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

مميزات الأداة:​

• واجهة أنيقة وسهلة الاستخدام.
• اختيار من بين قراء متعددين.
• إمكانية تشغيل السور مباشرة أو تحميلها.
• دعم التشغيل التلقائي.
• متوافقة مع مدونات بلوجر والمواقع العادية.

---

معاينه الاداة اضغط هنا​

---

أولاً: تركيب الأداة في صفحة مستقلة​

1. افتح لوحة تحكم بلوجر.
2. من القائمة الجانبية، اختر الصفحات > صفحة جديدة.
3. قم بالتبديل إلى وضع HTML.
4. الصق الكود التالي داخل الصفحة:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mr-abu-guda/blfym-scripts@refs/heads/main/stylesheet_Quran.css">

<script src="https://cdn.jsdelivr.net/gh/mr-abu-guda/blfym-scripts@refs/heads/main/script_to_Quran.js"></script>

<div id="ahmed">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6f9VI3hBLoVlAOGbVki9_APe3tbCxlZcP8espU2PAZtX_-DsxgE6d8CJalKQkf5HggONGdFVFvEz4LKkUNoM0skrfOYzUFNwkc5R-y220BNnZxq33lJZB15C3mnvyLjI3wCYnXDvaykOXB3Z17HRLUe6mUwYmhV5k_XaVeu93VPLUjEobelFDZ6K1Wks/s707/blfym1%20(2).png" alt="Quran Icon"/>

  <div class="blfym-sectio">
    <label for="blfymSelect">القارئ</label>
    <select id="blfymSelect">
      <option value="ajm">أحمد العجمي</option>
      <option value="jleel">خالد الجليل</option>
      <option value="salman[11]">سلمان العتيبي</option>
      <option value="shur[7]">سعود الشريم</option>
      <option value="bu_khtr[8]">صلاح بو خاطر</option>
      <option value="basit[7]">عبد الباسط عبد الصمد</option>
      <option value="sds[11]">عبد الرحمن السديس</option>
      <option value="hthfi[9]">علي الحذيفي</option>
      <option value="frs_a[8]">فارس عباد</option>
      <option value="maher[12]">ماهر المعيقلي</option>
      <option value="jbrl[8]">محمد جبريل</option>
      <option value="minsh" selected>محمد صديق المنشاوي</option>
      <option value="husr[13]">محمود خليل الحصري</option>
      <option value="afs[8]">مشاري العفاسي</option>
      <option value="mansor[11]">منصور السالمي</option>
      <option value="yasser[11]">ياسر الدوسري</option>
    </select>
  </div>

  <audio id="blfym-tash" controls>
    <source id="audioSource" src="https://server10.mp3quran.net/minsh/001.mp3" type="audio/mpeg">
    متصفحك لا يدعم هذا المشغل
  </audio>

  <div class="auto-blfym">
    <span class="auto-blfym-label">التشغيل التلقائي</span>
    <label class="hamo">
      <input type="checkbox" id="ahmedcx">
      <span class="auto-blfym-slide"></span>
    </label>
  </div>

  <div id="quran-blfym-lis"></div>  
</div>

1. احفظ الصفحة وستظهر الأداة بشكل أنيق ومتفاعل.

---

ثانيًا: تركيب الأداة كأداة من التخطيط (أداة جانبية)​

1. اذهب إلى التخطيط > إضافة أداة > HTML/JavaScript.
2. في المحتوى، الصق نفس الكود السابق كاملاً.
3. اضغط حفظ.

ملاحظة مهمة: قد لا تعمل بعض الأجزاء الديناميكية في التخطيط بنفس كفاءة الصفحة المستقلة بسبب قيود بلوجر، لذا يُفضَّل استخدام صفحة مستقلة لعرض الأداة بشكل مثالي.

---

خاتمة​

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

 

[JUBA SAT]

بارك الله فيك وجزاك الله خيرا

 

[القناص الرائع]

الله يبارك فيك اخى الكريم
نسيت تتكلم عن تأثير الاكواد على سرعة المدونة
وسرعة التحميل
هذه من الامور المهمة جدا
التى يهتم بها الكثير من المدونين
.