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

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

الوضع الليلي هو ميزة تهدف إلى جعل الشاشة دلكنة اللون. عادةً ما توجد هذه الميزة على الأجهزة المحمولة التي تتضمن وظائف "الوضع الليلي" أو "الوضع الداكن" والتي لها فائدة في توفير استخدام البطارية.

وسنشارك معكم متابعين مينت طريقة إضافة زر الوضع الليلي لمدونات بلوجر بأستخدام ملفات تعريف الأرتباط أو Cookies. وأضيف في هذه ميزة ملف تعريف الارتباط ، لذلك عندما نقوم بتحديث الصفحة بعد تنشيط الوضع الليلي ، فلن يعود إلى الوضع الأولي على الرغم من أنك قمت بتغيير الصفحات. بالنسبة لأولئك الذين يرغبون في تثبيت ميزة "الوضع الليلي" ، يرجى اتباع الخطوات التالية.

طريقة إضافة الوضع الليلي على بلوجر 

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

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


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

تعليقات

الأرشيف

نموذج الاتصال

إرسال