تركيب الوضع المظلم / الليلي / لقوالب البلوجر

اضافة مهمة جدا لقوالب البلوجر وهي حماية العين من الاشعة الصادرة من شاشة الكمبيوتر 

عن طريق تطبيق الوضع الليلي على الواجهة بتغيير الوان القالب الى اللون الاسود او اي لون حسب اختيارك

تكون عن طريق اضافة زر باعلى القالب عند النقر عليه تتحول الوان القالب الى اللون اللذي تريده

مثال عن الاضافة

اكواد الأضافة

أولاً ، قم بفتح لوحة تحكم بلوجر انقر على المظهر وانقر على زر تعديل

أضف هذا الكود قبل الوسم </body>

<div class='Switchbtn'>
<span class='nightly'>الوضع الليلي</span> <input class='togglenight togglenight-switch' id='nightmode' type='checkbox'/>
<label class='togglenight-btn' for='nightmode'/></div>
<script type='text/javascript'>
//<![CDATA[
// Night Mode
$("#nightmode").click(function(){$("body").toggleClass("nightmode")}),$("body").toggleClass(localStorage.toggled),$("#nightmode").click(function(){"nightmode"!=localStorage.toggled?($("body").toggleClass("nightmode",!0),localStorage.toggled="nightmode"):($("body").toggleClass("nightmode",!1),localStorage.toggled="")});
//]]>
</script>

ثانيا  بعدها قم بأضافة كود Css هذه قبل الوسم </head>

<style type='text/css'>
/* Night Mode */
.nightly{color:#999;font-size:13px}
.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;left:20px;top:20px}
.togglenight{display:none;}
.togglenight + .togglenight-btn{outline:0;display:inline-block;width:45px;height:10px;position:relative;cursor:pointer;margin-right:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.togglenight + .togglenight-btn:after,.togglenight + .togglenight-btn:before{position:relative;display:block;content:"";width:50%;height:100%}
.togglenight-switch + .togglenight-btn{background:#d5d2fc;border-radius:99em;transition:all .4s ease}
.togglenight-switch + .togglenight-btn:after{content:'';border-radius:100px;background:#887fff;transition:right 0.3s cubic-bezier(0.175,0.885,0.32,1.275),padding 0.3s ease,margin 0.3s ease;position:absolute;width:20px;height:20px;top:-5px;right:0;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}
.togglenight-switch:checked + .togglenight-btn{background:rgba(255,255,255,.15)}
.togglenight:checked + .togglenight-btn:after{content:'';right:55%;background:#ff9f43}
.nightmode{background:#202124;color:rgba(255,255,255,.7)}
.nightmode a{color:rgba(255,255,255,.7)!important}
.nightmode a:hover{color:rgba(255,255,255,.4)!important}
.nightmode .class-baru{}
.nightmode .class-baru{}



</style>

ثالثا يوضع هذا الكود فوق  ]]></b:skin>

.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;left:20px;top:20px}
.Switchbtn{top:10px;left:80px}}
@media screen and (max-width:480px){
.Switchbtn {left:50px}
.nightly{display:none}}
@media screen and (max-width:240px){
.Switchbtn{display:none}}

رابعا قم بأضافة كود  هذه قبل الوسم </head>   بداخل الكود اللذي اضفته منذ قليل شاهد الفيديو

.nightmode .header{background:#222}

بعد التركيب قم بتغير الاسم جسم القالب body  او اي اضافة موجودة بالقالب و اذا اردت يمكك تغير اللون

و ثم احفظ القالب 

مينت تك

وفي الختام !

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