كود الوضع الليلي لقوالب مدونات بلوجر

أولاً ، قم بفتح لوحة تحكم بلوجر/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}

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

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