الدليل الشامل: إضافة نظام تنبيه حالة الإنترنت الاحترافي لمدونات بلوجر

أهلاً بكم في مدونة أديب القربعي - محترف التصميم. هل تساءلت يوماً كيف تجعل مدونتك تبدو كأنها تطبيق هاتف ذكي؟ إن السر يكمن في تفاعل الموقع مع حالة المستخدم. اليوم سنشرح بالتفصيل الممل كيفية إضافة كود "Internet Status Alert" الذي يظهر للزوار عند انقطاع الشبكة، وهي ميزة أساسية لكل من يسعى لتحويل مدونته إلى تطبيق ويب تقدمي (PWA).

لماذا يحتاج موقعك إلى هذا التنبيه؟

بصفتي مصمم واجهات مستخدم، أرى أن تجربة المستخدم (UX) لا تتوقف عند شكل الألوان، بل تمتد لتشمل كيفية تعامل الموقع مع الظروف الصعبة مثل ضعف الإنترنت. إليك الفوائد:

• ✅ الاحترافية المطلقة: يشعر الزائر بمدى اهتمامك بالتفاصيل التقنية.
• ✅ تقليل معدل الارتداد: بدلاً من أن يظن الزائر أن موقعك "معطل"، سيفهم أن المشكلة من اتصاله.
• ✅ التوافق مع السيو: جوجل تعطي أفضلية للمواقع التي تقدم حلولاً برمجية ذكية للمستخدم.

---

👁️ قسم المعاينة الحية (Live Preview)

قبل أن ننتقل للكود، جرب الأداة بنفسك. اضغط على الزر أدناه لمحاكاة ما سيحدث في مدونتك:

لوحة اختبار الإضافة

قم بالضغط على الزر وشاهد أسفل شاشة المتصفح الآن:

📶

عذراً، لا يوجد اتصال بالإنترنت

---

شرح مكونات الكود (للمحترفين)

يتكون الكود الذي سأعطيك إياه من ثلاثة أجزاء رئيسية:

1. CSS: المسؤول عن جمالية التنبيه وحركة النبض (Pulse) للأيقونة.
2. HTML: الهيكل الذي يحتوي على أيقونة SVG والنص التنبيهي.
3. JavaScript: المحرك الذكي الذي يراقب حالة المتصفح لحظة بلحظة.

كود التركيب الجاهز (Copy & Paste)

قم بنسخ هذا الكود بالكامل وضعه قبل وسم </body> في قالب مدونتك:

<!-- كود تنبيه الإنترنت - تطوير أديب القربعي -->

<style>

  @keyframes pulse-wifi {

    0% { opacity: 1; transform: scale(1); }

    50% { opacity: 0.5; transform: scale(0.9); }

    100% { opacity: 1; transform: scale(1); }

  }

  .animate-pulse { animation: pulse-wifi 1.5s infinite ease-in-out; }

</style>

<div id="status-checker" style="display:none; position:fixed; bottom:30px; left:50%; transform:translateX(-50%); background:#e74c3c; color:white; padding:12px 25px; border-radius:12px; font-family:inherit; z-index:999999; box-shadow:0 8px 25px rgba(0,0,0,0.2); font-weight:bold; text-align:center; min-width:280px; align-items:center; justify-content:center; gap:12px; direction:rtl;">

   <div id="icon-container" class="animate-pulse">

     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

        <path d="M16.72 11.06A5 5 0 0 1 12 13a5 5 0 0 1-4.72-1.94"></path>

        <path d="M20.96 6.82A10 10 0 0 0 12 5a10 10 0 0 0-8.96 1.82"></path>

        <line x1="12" y1="18" x2="12.01" y2="18"></line>

     </svg>

   </div>

   <span id="status-text">لا يوجد اتصال بالإنترنت حالياً</span>

</div>

<script>

  function checkNetwork() {

    var statusDiv = document.getElementById('status-checker');

    var statusText = document.getElementById('status-text');

    var iconContainer = document.getElementById('icon-container');

    statusDiv.style.fontFamily = window.getComputedStyle(document.body).fontFamily;

    if (navigator.onLine) {

      if (statusDiv.style.display === 'flex' && statusDiv.style.background.includes('rgb(231, 76, 60)')) {

          statusDiv.style.background = '#27ae60';

          statusText.innerHTML = 'تم استعادة الاتصال بنجاح';

          iconContainer.classList.remove('animate-pulse');

          iconContainer.innerHTML = '✅';

          setTimeout(function() { statusDiv.style.display = 'none'; }, 3000);

      }

    } else {

      statusDiv.style.background = '#e74c3c';

      statusText.innerHTML = 'عذراً، لا يوجد اتصال بالإنترنت';

      iconContainer.classList.add('animate-pulse');

      statusDiv.style.display = 'flex';

    }

  }

  window.addEventListener('online',  checkNetwork);

  window.addEventListener('offline', checkNetwork);

  window.onload = checkNetwork;

</script>

خاتمة ونصيحة المصمم

بصفتي أديب القربعي، أنصحكم دائماً بتجربة الأكواد على متصفحات مختلفة (Chrome, Safari, Firefox) لضمان أن التجربة مثالية لجميع الزوار. هذه الإضافة هي مجرد بداية لتحويل مدونتك إلى منصة احترافية متكاملة.

هل أعجبك المقال؟ شاركه مع أصدقائك المطورين!

مع تحيات: أديب القربعي - محترف التصميم