طريقة إضافة ألعاب تفاعلية بتقنية Full-Screen في بلوجر (كود قابل للتخصيص)

طريقة إنشاء صفحة ألعاب ثابتة في بلوجر عبر كود HTML جاهز

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

جدول المحتويات

طريقة إنشاء صفحة ألعاب ثابتة في بلوجر عبر كود HTML جاهز

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

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

صفحة الألعاب الثابتة ليست مجرد مجموعة ألعاب، بل هي تجربة مستخدم متكاملة تزيد من مدة بقاء الزوار وتقلل معدلات الارتداد، مما يعزز تصنيف المدونة في محركات البحث.

خبير تحسين تجربة المستخدم

1. الكود الكامل لإضافة اللعبة

انسخ الكود التالي بالكامل وألصقه في أي مكان داخل مدونتك (سواء في محرر المقالة بوضع HTML، أو في أداة HTML/JavaScript).

<style>  
.auth-frame {  
  width: 100%;  
  height: 100vh;  
  border: none;  
  margin: 0;  
  padding: 0;  
}  
body {  
  margin: 0;  
  padding: 0;  
  overflow: hidden;  
}  
</style>  
<button id="closeAuthBtn" style="
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  background: var(--danger, #ef4444);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: all 0.2s ease;
  color: white;
">
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <line x1="18" y1="6" x2="6" y2="18"></line>
    <line x1="6" y1="6" x2="18" y2="18"></line>
  </svg>
</button>

<script>
  document.getElementById('closeAuthBtn').addEventListener('click', function() {
    var iframe = document.querySelector('.auth-frame');
    if (iframe) {
      iframe.style.display = 'none';
    }
    this.style.display = 'none';
    // إظهار زر تشغيل اللعبة بعد الإغلاق
    var playBtn = document.getElementById('playGameBtn');
    if (playBtn) playBtn.style.display = 'flex';
  });
</script>
<iframe   
  src="https://previews.customer.envatousercontent.com/files/363224876/index.html"   
  class="auth-frame"  
  title="تسجيل الخروج">  
</iframe>  
  
<style>  
/* Hide Blogger header and sidebar */  
#header-wrapper,  
#sidebar-wrapper,  
.header,  
.navbar,  
#blog-pager,  
.post-footer,  
.comments {  
  display: none !important;  
}  
  
/* Make content full width */  
#main-wrapper,  
#content-wrapper {  
  width: 100% !important;  
  max-width: 100% !important;  
  margin: 0 !important;  
  padding: 0 !important;  
}  
  
/* Full height iframe */  
.auth-frame {  
  width: 100vw;  
  height: 100vh;  
  border: none;  
  margin: 0;  
  padding: 0;  
  position: fixed;  
  top: 0;  
  left: 0;  
  z-index: 9999;  
}  
  
body {  
  margin: 0 !important;  
  padding: 0 !important;  
  overflow: hidden !important;  
}  
</style>

<button id="playGameBtn" style="
  transform: translate(-50%, -50%);
  background: var(--linkC, #3b82f6);
  border: none;
  border-radius: 8px;
  padding: 4px 12px;
  display: none;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: all 0.2s ease;
">
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <polygon points="5 3 19 12 5 21 5 3"></polygon>
  </svg>
  تشغيل اللعبة
</button>

<script>
  document.getElementById('playGameBtn').addEventListener('click', function() {
    var gameIframe = document.querySelector('.auth-frame');
    if (gameIframe && gameIframe.style.display === 'none') {
      gameIframe.style.display = 'block';
      this.style.display = 'none';
      document.getElementById('closeAuthBtn').style.display = 'flex';
    } else if (!gameIframe) {
      alert('لم يتم العثور على إطار اللعبة');
    }
  });
</script>

ملاحظة: الرابط الموجود في src الخاص بـ iframe هو رابط تجريبي من Envato. يجب استبداله برابط لعبتك الحقيقية.

2. شرح الكود بالتفصيل

أولاً: أقسام CSS

يحتوي الكود على جزأين من CSS:

• الجزء الأول (الأول <style>) يعطي الإطار .auth-frame عرضًا وارتفاعًا كاملين ويخفي أشرطة التمرير في الصفحة.
• الجزء الثاني (الأخير <style>) مسؤول عن إخفاء عناصر مدونة بلوجر الأصلية مثل الهيدر، السايدبار، التعليقات، وجعل منطقة المحتوى بعرض 100%، كما يجعل الإطار ثابتًا على الشاشة (position: fixed) ليملأ النافذة كاملة.

ثانياً: زر الإغلاق

زر دائري بلون أحمر (id="closeAuthBtn") يظهر في أعلى اليمين. عند الضغط عليه، يتم إخفاء الإطار وإخفاء الزر نفسه، ثم يظهر زر “تشغيل اللعبة”.

ثالثاً: إطار اللعبة (iframe)

عنصر <iframe> يحمل رابط اللعبة. تم إعطاؤه class auth-frame ليتم تطبيق أنماط العرض الكامل عليه.

رابعاً: زر تشغيل اللعبة

زر id="playGameBtn" يكون مخفيًا في البداية (display: none)، وعند النقر عليه بعد إغلاق اللعبة يقوم بإعادة عرض الإطار وإخفاء نفسه وإظهار زر الإغلاق مرة أخرى.

خامساً: جافاسكريبت

سكريبتان: الأولى تتحكم في إغلاق اللعبة، والثانية تتحكم في إعادة تشغيلها. كلاهما يستخدمان querySelector للتعامل مع iframe.

3. طريقة تثبيت الكود في بلوجر

لديك طريقتان لتطبيق الكود:

1. إضافته في مقالة جديدة: عند إنشاء مقالة جديدة، اختر وضع “HTML” بدلاً من “كتابة”، ثم الصق الكود كاملاً. احفظ المقالة وستظهر اللعبة في الصفحة.
2. إضافته كأداة HTML/JavaScript في التخطيط: إذا أردت ظهور اللعبة في صفحة منفصلة أو في الصفحة الرئيسية، اذهب إلى لوحة تحكم بلوجر → التخطيط → إضافة أداة → اختر HTML/JavaScript، ثم الصق الكود واحفظ الترتيب. يمكنك وضع الأداة في أي مكان، لكن يفضل وضعها في منطقة المحتوى.

تحذير! عند لصق الكود في محرر المقالة، تأكد من عدم وجود أي تعارض مع قوالب بلوجر التي تحتوي بالفعل على عناصر بنفس المعرفات (id). الكود الحالي يستخدم معرفات فريدة مثل closeAuthBtn وplayGameBtn، لذا فهو آمن.

4. تغيير رابط اللعبة وإضافة ألعاب أخرى

لتغيير اللعبة المعروضة، ابحث داخل الكود عن السطر التالي:

<iframe src="https://previews.customer.envatousercontent.com/files/363224876/index.html" class="auth-frame" title="تسجيل الخروج"></iframe>

استبدل الرابط الموجود داخل src برابط لعبتك. يجب أن يكون الرابط يشير إلى ملف HTML أو خدمة تسمح بالتضمين عبر iframe. بعض المصادر التي يمكنك الحصول منها على ألعاب قابلة للتضمين:

• Envato Elements / CodeCanyon (ملفات الألعاب HTML5).
• منصات مثل itch.io توفر خيار تضمين اللعبة.
• إذا كانت اللعبة محفوظة لديك على استضافة، ارفع الملفات ثم استخدم الرابط الكامل.

تنبيه! بعض المواقع (مثل مواقع الألعاب الشهيرة) تمنع التضمين عبر iframe لأسباب أمنية. تأكد من أن الرابط يعمل عند فتحه في نافذة منفصلة، وجرب إضافته في أداة iframe تجريبياً.

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

5. تخصيص إضافي

تغيير ألوان الأزرار

زر الإغلاق يستخدم لوناً متغيراً var(--danger, #ef4444)، إذا كان قالب بلوجر يحتوي على متغير CSS مخصص للون التحذير يمكنه التكيف، وإلا سيظهر اللون الأحمر الافتراضي. لتغييره يدوياً، استبدل القيمة #ef4444 باللون الذي تريده.

زر التشغيل يستخدم var(--linkC, #3b82f6)، يمكنك أيضاً تغيير #3b82f6 إلى أي لون تختاره.

تعديل موضع زر الإغلاق

يمكنك تعديل القيم top: 20px; right: 20px; لتحريك الزر إلى اليسار أو الأسفل حسب رغبتك.

إخفاء عناصر إضافية من القالب

في القسم الأخير من CSS، تجد قائمة بالمحددات المخفية مثل #header-wrapper, #sidebar-wrapper … إلخ. إذا كان قالبك يحتوي على أقسام أخرى تريد إخفاءها أثناء عرض اللعبة، أضفها إلى القائمة مفصولة بفواصل.

6. ملاحظات هامة حول الأداء والتوافق

نصيحة: تأكد من أن رابط اللعبة يعمل عبر بروتوكول HTTPS لتجنب مشاكل المحتوى المختلط في بلوجر.

للجوال: الكود مصمم لملء الشاشة على جميع الأجهزة، لكن تأكد من أن اللعبة نفسها متجاوبة مع الشاشات الصغيرة.

خطأ شائع: إذا لم تظهر اللعبة وتظهر صفحة فارغة، فقد يكون السبب أن الموقع المضمن يمنع التضمين باستخدام X-Frame-Options. في هذه الحالة لن يعمل الحل.

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

ملاحظة من الكاتب

7. طريقة إضافة زر لعودة المستخدم إلى المدونة

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

<style>  
.auth-frame {  
  width: 100%;  
  height: 100vh;  
  border: none;  
  margin: 0;  
  padding: 0;  
}  
body {  
  margin: 0;  
  padding: 0;  
  overflow: hidden;  
}  
</style>  

<div style="position: fixed; top: 20px; right: 20px; z-index: 10000; display: flex; gap: 12px;">
  
  <!-- زر العودة إلى الصفحة الرئيسية -->
  <button id="homeBtn" style="
    background: var(--linkC, #3b82f6);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
    color: white;
  ">
    <svg class='line' viewBox='0 0 24 24'><path d='M9.02 2.84004L3.63 7.04004C2.73 7.74004 2 9.23004 2 10.36V17.77C2 20.09 3.89 21.99 6.21 21.99H17.79C20.11 21.99 22 20.09 22 17.78V10.5C22 9.29004 21.19 7.74004 20.2 7.05004L14.02 2.72004C12.62 1.74004 10.37 1.79004 9.02 2.84004Z'></path><path d='M12 17.99V14.99'></path></svg>
  </button>
  
  <!-- زر الإغلاق -->
  <button id="closeAuthBtn" style="
    background: var(--danger, #ef4444);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
    color: white;
  ">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <line x1="18" y1="6" x2="6" y2="18"></line>
      <line x1="6" y1="6" x2="18" y2="18"></line>
    </svg>
  </button>
  
</div>

<script>
  // زر العودة للصفحة الرئيسية
  document.getElementById('homeBtn').addEventListener('click', function() {
    window.location.href = '/'; // يغير المسار حسب هيكل موقعك
  });
  
  // زر الإغلاق
  document.getElementById('closeAuthBtn').addEventListener('click', function() {
    var iframe = document.querySelector('.auth-frame');
    if (iframe) {
      iframe.style.display = 'none';
    }
    this.style.display = 'none';
    document.getElementById('homeBtn').style.display = 'none';
    
    // إظهار زر تشغيل اللعبة بعد الإغلاق
    var playBtn = document.getElementById('playGameBtn');
    if (playBtn) playBtn.style.display = 'flex';
  });
</script>

<iframe   
  src="https://previews.customer.envatousercontent.com/files/363224876/index.html"   
  class="auth-frame"  
  title="لعبة سباق">  
</iframe>  
  
<style>  
/* Hide Blogger header and sidebar */  
#header-wrapper,  
#sidebar-wrapper,  
.header,  
.navbar,  
#blog-pager,  
.post-footer,  
.comments {  
  display: none !important;  
}  
  
/* Make content full width */  
#main-wrapper,  
#content-wrapper {  
  width: 100% !important;  
  max-width: 100% !important;  
  margin: 0 !important;  
  padding: 0 !important;  
}  
  
/* Full height iframe */  
.auth-frame {  
  width: 100vw;  
  height: 100vh;  
  border: none;  
  margin: 0;  
  padding: 0;  
  position: fixed;  
  top: 0;  
  left: 0;  
  z-index: 9999;  
}  
  
body {  
  margin: 0 !important;  
  padding: 0 !important;  
  overflow: hidden !important;  
}  
</style>

<button id="playGameBtn" style="
  transform: translate(-50%, -50%);
  background: var(--linkC, #3b82f6);
  border: none;
  border-radius: 8px;
  padding: 4px 12px;
  display: none;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: all 0.2s ease;
">
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <polygon points="5 3 19 12 5 21 5 3"></polygon>
  </svg>
  تشغيل اللعبة
</button>

<script>
  document.getElementById('playGameBtn').addEventListener('click', function() {
    // هنا ضع الرابط أو إعادة تشغيل اللعبة
    var gameIframe = document.querySelector('.auth-frame');
    if (gameIframe && gameIframe.style.display === 'none') {
      // إعادة عرض اللعبة
      gameIframe.style.display = 'block';
      this.style.display = 'none';
      document.getElementById('closeAuthBtn').style.display = 'flex';
    } else if (!gameIframe) {
      alert('لم يتم العثور على إطار اللعبة');
    }
  });
</script>

---

بهذا نكون قد غطينا كل ما تحتاجه لإضافة ألعاب احترافية في مدونة بلوجر باستخدام كود نظيف وسهل التعديل. جرب الخطوات بنفسك، ولا تتردد في تعديل الألوان والأحجام لتناسب قالب مدونتك. إذا واجهتك أي مشكلة، تحقق من وحدة التحكم (F12) للتأكد من عدم وجود أخطاء جافاسكريبت.

نجاح! الآن مدونتك قادرة على عرض ألعاب تفاعلية بملء الشاشة مع تحكم كامل للمستخدم.