√ شرح طريقة إضافة الوضع الليلي لمدونة بلوجر

شرح طريقة إضافة الوضع الليلي لمدونة بلوجر

10/18/2020

الكثير ممن يزورون مدونتك يبحثون عن الوضع الليلي الخفيف للعين و لا سيما إن تمت زيارة مدونتك ليلا فهو يعد من الإضافات التي تظفي طابعا أنيقا على مدونتك

ما هي إضافة الوضع الليلي

إذا زرت مدونة عرب داش فإنك ستجد في الاعلى زرا صغير إذا ضغطت عليه ستتحول الوان الموقع فالابيض سيصبح أسودا و الاسود سيصبح أبيضا و هذا ما يسمى بالوضع الليلي أو المظلم "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:&quot;&quot;;width:50%;height:100%}
.togglenight-switch + .togglenight-btn{background:#d5d2fc;border-radius:99em;transition:all .4s ease}
.togglenight-switch + .togglenight-btn:after{content:&#39;&#39;;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:&#39;&#39;;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}

كما رأيت فإن هذه هي إضافة الوضع المظلم الجذاب فأرجو أن تتمكن من إضافتها و إذا راودتك احد المشاكل فلا تتردد في مراسلتنا عبر صفحة الفيسبوك عرب داش

omar lammas

شرح طريقة إضافة الوضع الليلي لمدونة بلوجر