إضافة زر الوضع الليلي (Dark Mode) لمدونات بلوجر بدون التأثير على السرعة 2026.

 

إضافة زر الوضع الليلي (Dark Mode) لمدونات بلوجر باحترافية | كود جاهز 2026

أهلاً بك في شروحات قاسي للمعلومات (Kaci Lilmaalounat). اجعل مدونتك تواكب أحدث تقنيات الويب!

في عام 2026، أصبح الوضع الليلي (Dark Mode) ليس مجرد ميزة ترفيهية، بل هو معيار أساسي في أي موقع احترافي. الكثير من زوار موقعك يفضلون تصفح وقراءة المقالات في المساء، واللون الأبيض الساطع قد يزعج أعينهم مما يدفعهم لمغادرة الموقع بسرعة.

💡 لماذا يجب عليك إضافة الوضع المظلم لمدونتك؟

إضافة زر تبديل الوضع الليلي يمنح موقعك طابعاً عصرياً مثل يوتيوب وتويتر، ويحافظ على صحة عين الزائر، كما أنه يوفر استهلاك البطارية على هواتف زوارك، مما يزيد من مدة بقائهم (Session Duration) ويخفض معدل الارتداد.

🚀 مميزات هذا الكود الحصري:

💾

ذاكرة ذكية: الكود يحفظ اختيار الزائر (إذا اختار الوضع الليلي، سيبقى كذلك حتى لو أغلق الموقع وعاد غداً).

⚡

سرعة فائقة: كود جافاسكربت نقي (Vanilla JS) خفيف جداً لا يؤثر أبداً على سرعة القالب.

🎨

تأثير حركي: انتقال سلس وناعم (Smooth Transition) بين الوضع الفاتح والمظلم بلمسة زر.

⚙️ الخطوة الأولى: نسخ كود الوضع الليلي

قمنا بدمج أيقونة (الشمس/القمر) مع أكواد الألوان والبرمجة في صندوق واحد. انقر على زر النسخ بالأسفل:

<!-- START DARK MODE WIDGET BY KACI INFO -->
<style>
/* تنسيق زر الوضع الليلي العائم */
.kaci-dark-toggle {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: #1a237e;
  color: #ffcc00;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  z-index: 99999;
  transition: all 0.3s ease;
  border: 2px solid #fff;
}
.kaci-dark-toggle:hover {transform: scale(1.1);}
.kaci-dark-toggle svg {width: 24px; height: 24px; transition: all 0.3s ease;}

/* أكواد الألوان للوضع الليلي (يتم تطبيقها على القالب) */
body.dark-mode {
  background-color: #121212 !important;
  color: #e0e0e0 !important;
  transition: background-color 0.4s ease, color 0.4s ease;
}
body.dark-mode .post-body, body.dark-mode p, body.dark-mode span, body.dark-mode div {
  color: #d1d1d1 !important;
}
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 {
  color: #ffffff !important;
}
body.dark-mode .widget, body.dark-mode .post-outer {
  background-color: #1e1e1e !important;
  border-color: #333 !important;
}
</style>

<!-- زر التبديل -->
<div class="kaci-dark-toggle" id="darkModeBtn" title="تفعيل/إلغاء الوضع الليلي">
  <svg id="moon-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
  <svg id="sun-icon" style="display:none;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
</div>

<!-- سكربت الذاكرة والتبديل -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  const toggleBtn = document.getElementById("darkModeBtn");
  const moonIcon = document.getElementById("moon-icon");
  const sunIcon = document.getElementById("sun-icon");
  
  // فحص الذاكرة عند تحميل الموقع
  if (localStorage.getItem("kaci-theme") === "dark") {
    document.body.classList.add("dark-mode");
    moonIcon.style.display = "none";
    sunIcon.style.display = "block";
  }

  // عند الضغط على الزر
  toggleBtn.addEventListener("click", function() {
    document.body.classList.toggle("dark-mode");
    if (document.body.classList.contains("dark-mode")) {
      localStorage.setItem("kaci-theme", "dark");
      moonIcon.style.display = "none";
      sunIcon.style.display = "block";
    } else {
      localStorage.setItem("kaci-theme", "light");
      moonIcon.style.display = "block";
      sunIcon.style.display = "none";
    }
  });
});
</script>
<!-- END DARK MODE WIDGET -->

🛠️ الخطوة الثانية: طريقة التركيب في قالب بلوجر

تركيب هذه الإضافة سهل جداً، اتبع هذه الخطوات البسيطة بدقة:

• سجل الدخول إلى بلوجر، ثم اذهب إلى قسم "المظهر" (Theme).
• انقر على السهم بجانب "تخصيص"، واختر "تعديل HTML".
• اضغط في أي مكان داخل الكود، واضغط Ctrl + F لفتح مربع البحث.
• ابحث عن الوسم </body> (ستجده في أسفل القالب تماماً).
• قم بلصق الكود الذي نسخته فوق الوسم </body> مباشرة.
• اضغط على "حفظ". افتح مدونتك واستمتع بزر الوضع الليلي العائم أسفل يسار الشاشة!

🔥 لا تفوت هذه الشروحات الحصرية أيضاً!

واصل تطوير مدونتك مع هذه المواضيع التي نالت إعجاب زوار قاسي للمعلومات:

📋

اضافة اداة اخر المواضيع لى مدونة بلوجر إضافة أداة آخر المواضيع لمدونة بلوجر بطريقة احترافية بدون تعديل القالب تُعد إضافة أداة آخر المواضيع في مدونة بلوجر من أهم الإضافات التي ت....

🚀

بطاقة فيزا RedotPay: طريقة التسجيل وطلب البطاقة وشحنها من Binance خطوة بخطوة بطاقة فيزا RedotPay: طريقة التسجيل وطلب البطاقة وشحنها من Binance ⚠️ تنبيه مهم: تأكد دائمًا من اختيار شبكة....

🛡️

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

 

⭐ ما رأيك في هذا المقال؟

★ ★ ★ ★ ★

0.0 / 5

عدد التقييمات: 0

✅ شكراً لتقييمك!