قراءة القرآن الكريم أونلاين على بلوجر

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

الأربعاء, ديسمبر 24, 2025

صورة القرآن الكريم مع تصميم إسلامي جذاب، تعكس جمال وروحانية صفحة التلاوة على بلوجر.

القرآن الكريم على بلوجر، مع زخارف متحركة خفيفة وإضاءة حول iframe:

<!-- بداية الصفحة التفاعلية -->
<div style="background: #eaf5f7; padding: 30px; border-radius: 20px; max-width: 1200px; margin: auto; box-shadow: 0 6px 20px rgba(0,0,0,0.15);">

  <!-- العنوان -->
  <h2 style="text-align: center; font-family: 'Tahoma', sans-serif; color: #065f73; margin-bottom: 30px;">
    القرآن الكريم
  </h2>

  <div style="display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start;">

    <!-- الصورة -->
    <div style="flex: 0 0 220px; text-align: center;">
      <a href="#" target="_blank">
        <img src="https://blogger.googleusercontent.com/img/a/AVvXsEg2kjPPuxHgrOkxwOnLG3IR69WO1_52eQR4r_tzs4FBVIPr2m26X32hoJdap-ekTTPG7UUuGqmuCUW-fl5v_mIIspMY4InA60MmplYALp_irsM__ChgbCJ8LDn7RILpqayP_DwLDKA-vGBqQ-LBKHgUyevY5_gN8n5e46rfoZJsuehPgsf-oYk3XQE0GS4=w200-h200" 
             alt="صورة القرآن" 
             style="border-radius: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); width: 100%; height: auto; transition: transform 0.3s;">
      </a>
    </div>

    <!-- إطار القرآن مع تأثيرات -->
    <div style="flex: 1 1 auto; position: relative; padding: 10px; background: #ffffff; border-radius: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); overflow: hidden;">
      
      <!-- تأثير إضاءة حول iframe -->
      <div style="position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(6,95,115,0.1) 0%, transparent 70%); animation: glow 4s infinite alternate;"></div>

      <iframe src="https://quran.com" 
              style="position: relative; border:none; width:100%; height:700px; border-radius: 15px; z-index: 1;" 
              scrolling="yes">
      </iframe>

    </div>

  </div>
</div>

<!-- تأثير الحركة للإضاءة -->
<style>
  @keyframes glow {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(10px, 10px) scale(1.05); }
    100% { transform: translate(0, 0) scale(1); }
  }
  /* تأثير تكبير الصورة عند المرور عليها */
  div img:hover {
    transform: scale(1.05);
  }
</style>
<!-- نهاية الصفحة التفاعلية -->