إضافة زر الوضع الليلي لمدونات بلوجر بأستخدام ملفات تعريف الأرتباط

أولاً ، قم بفتح لوحة تحكم بلوجر/Blogger > انقر على المظهر وانقر على زر تعديل HTML > أضف هذا الكود قبل الوسم </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>

أنتبه جيداً لما هو قادم ،الذي تم وضع علامه عليه هذه مثال يمكن أتبداله أو التعديل عليه بما يناسب قالب مدونتك عن طريقة تغير .class-baru بالفئة أو بالمعرف في جزء معين ف قالب مدونتك.أيضاً قم بأضافة .nightmode قبل الفئة أو المعرف جزء القالب الذي تريد تغييره عندما يكون الوضع الليلي نشطًا. على سبيل المثال مثل هذا:

.nightmode .header{background:#222}

.nightmode .title{color:#fff}

ومال يليه...

قم أيضًا بتحرير كود CSS هذا لتحديد موضع زر الوضع الليلي

.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;left:20px;top:20px}

عندما تنتهي من تحرير كل ما تحتاجه ، انقر فوق الزر حفظ المظهر وشاهد النتائج على مدونتك.

انقر على الزر أدناه للاطلاع على مثال لتطبيق ميزة الوضع الليلي على بلوجر . انقر فوق زر الوضع الليلي في الجزء الأيسر في القائمة العلوية.