شرح طريقة إضافة الوضع الليلي لمدونة بلوجر
إضافات بلوجرما هي إضافة الوضع الليلي
إذا زرت مدونة عرب داش فإنك ستجد في الاعلى زرا صغير إذا ضغطت عليه ستتحول الوان الموقع فالابيض سيصبح أسودا و الاسود سيصبح أبيضا و هذا ما يسمى بالوضع الليلي أو المظلم "drak mode or night mode"
العمل الأساسي لهذه الإضافة هي حماية عين الزائر عندما يزور موقعك ليلا فإذا كان الزائر يعاني من ألم في العين فإنه سيخرج مباشرة من موقعك , و العكس إذا وجدت راحة في زيارة موقعك فإنه سيبقى مدة طويلة و هذا سيقلل من معدل الإرتداد في موقعك
لمعاينة الإضافة على موقع عرب داش
مميزات الوضع الليلي
- يحمي العين
- يقلل من معدل الإرتداد في موقعك
- خفيف و سريع
- يضفي طابعا أنيقا على مدونتك
كيف تضيف الوضع الليلي في مدونة بلوجر
أولا و قبل كل شيئ يجب أن تكون لك معرفة بسيطة ب css لأنك ستحتاج لإضافة بعض الأكواد حسب القالب الخاص بك و لكن لا تقلق لن نحرمك من هذه الإضافة الأنيقة فإن لم تكن كذلك فهذه هي خدمتي على موقع كفيل يمكنني ان اضيف لك الوضع المظلم بخمس دولار فقط أما إن كنت تعرف بعض الشيئ في لغة css فتابع معي الشرح
أولا بإضافة هذا الكود فوق /body
<div class='Switchbtn'>
<span class='nightly'>Night Mode</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;right:20px;top:20px}
.togglenight{display:none;}
.togglenight + .togglenight-btn{outline:0;display:inline-block;width:45px;height:10px;position:relative;cursor:pointer;margin-left: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:left 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;left: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:'';left: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>
.nightmode h1{color:#fff}
بحيث أننا قمنا بتعديل h1 بإستخدام nightmode فهنا عند الضغط على زر الوضع المظلم سيظهر h1 باللون الأبيض و أخيرا قم بإضافة كود css التالي للتحكم في مكان ظهور زر الوضع المظلم
.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}
0 التعليقات