إضافة الوضع الليلي السريع إلى قالبك

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

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

المهم لنتكلم عن اضافتنا والتي هي من افضل الإضافات الليلية لحد الآن مشابهة للوضع الليلي باليوتوب حيث لن تلاحظ اي توهج ابيض عند تحميل الموقع او الدخول للمواضيع.
يمكنك تجربة الإضافة على مدونتنا مباشرة... تعمل على اي قالب بدون مشاكل

شرح طريقة التركيب

1. سجل الدخول إلى مدونتك
2. المظهر >> تعديل HTML
3. ابحث عن <body> ثم ضع الكود التالي اسفله

 <script>
//<![CDATA[
function auto(){document.body.classList.add('auto');if(new Date().getHours()>19||new Date().getHours()<6){document.body.classList.add('dark');localStorage.setItem('641234dark','true')}else{document.body.classList.remove('dark');localStorage.setItem('641234dark','false')}}function dark(){localStorage.getItem('641234dark')=='true'?document.body.classList.add('dark'):document.body.classList.remove('dark')}if(localStorage.getItem('641234auto')=='true'){auto()}else{localStorage.getItem('641234dark')==null?auto():dark()}function toggle(){localStorage.setItem('641234auto',localStorage.getItem('641234auto')=='true'?'false':'true');localStorage.getItem('641234auto')=='true'?auto():document.body.classList.remove('auto')}function mode(){document.body.classList.remove('auto');localStorage.removeItem('641234auto');localStorage.setItem('641234dark',localStorage.getItem('641234dark')=='true'?'false':'true');dark()}
//]]>
</script>

4. الكود التالي هو زر الوضع الليلي ضعه بالمكان المناسب

<div class='dark-mode'><button class='toggle' onclick='toggle()' style='display:none' type='button'/><button class='mode' onclick='mode()' type='button'/></div>

5. ابحث عن ]]></b:skin> ثم ضع الكود فوقه

/* Button Mode */
.dark-mode{float: left; position: absolute; left: 90px; top: 25px; z-index: 98;}
.toggle,.mode{position:relative;float:right;outline:0;border:0;padding:0;overflow:hidden;cursor:pointer}
.toggle{margin-left:10px;border-radius:10px;width:33px;height:20px}
.toggle,.mode::before,.dark .mode::after{background:#ccc}
.dark .toggle{background:#444}
.auto .toggle{background:#6d6!important}
.toggle::before,.mode::before,.mode::after{position:absolute;content:&#39;&#39;}
.toggle::before{top:1px;left:1px;transition:.4s;background:#fff;width:18px;height:18px}
.auto .toggle::before{left:14px}
.toggle::before,.mode,.mode::before,.mode::after{border-radius:50%}
.dark .mode{top:2px;left:-2px;overflow:visible}
.dark .mode,.dark .mode::before{border-radius:0}
.mode,.dark .mode::before,.mode::after{background:#999}
.mode{width:20px;height:20px}
.dark .mode,.mode::before,.mode::after{width:16px;height:16px}
.mode::before{top:2px;left:2px}
.dark .mode::before{top:0;left:0;transform:rotate(45deg)}
.mode::after{top:-3px;left:7px}
.dark .mode::after{top:1px;left:1px;width:14px;height:14px}
.u-p-medium h3:after { content: &quot;&quot;; position: absolute; width: 60px; height: 2px; background: #607D8B; display: block; top: 50%; margin-top: -1px; left: 100%; } .u-p-medium h3:before { content: &quot;&quot;; position: absolute; width: 60px; height: 2px; background: #607D8B; display: block; top: 50%; margin-top: -1px; left: auto; right: 100%; } .u-p-medium h3 { font-size: 20px; margin: 0 auto; text-align: center; display: table; position: relative; padding: 0 10px; }
  
/* Body Edit */
body.dark{background: #1c1c1c ;color:#ccc;}

6. احفظ العمل واذهب للمعاينة
* إن لاحظت فالوضع الليلي اشتغل على الخلفية هنا علينا تطبيق .dark على كل وسم مثلا الشريط الجانبي #sidebar ليصبح هكذا .dark #sidebar {هنا Css} وكل قالب يختلف عن آخر وسيتطلب بعض الوقت للتطبيق على كل وسم

كيفية معرفة الوسوم بالمدونة؟
هناك طريقة سهلة لمعرفة سمات عنصر المدونة، استخدم ميزة فحص العنصر (Inspect Element) الموجودة في متصفحك. افتح موقع الويب الخاص بك ، وانقر بزر الماوس الأيمن في المساحة المراد التطبيق عليها وحدد خيار فحص العنصر

لذا كالعادة اوجه كلامي للمبتدئين التعليقات مرحب بها للمساعدة.

ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻