إضافة الوضع الليلي لمدونة بلوجر

ازيك؟.. في التدوينة دي هتعرف ازاي تضيف خاصية او زر الوضع الليلي لمدونة بلوجر بطريقه سهلة فقط تابع الشرح بتركِز،

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

لكن اولآ ما اهمية اضافة زر الوضع الليلي لموقعك؟

عندما تضيف الزر في مدونتك يقوم بتحويل اي لون فاتح الي لون غامق -حسب رغبتك-، ودا بيساعد بشكل كبير علي راحة الزائر في القراءة ويجعله يبقى لفترة في موقعك.

متنساش تنزل نسخة من قالبك للحفاظ بها في حال حدث مشكلة ما معك

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

اولآ: نذهب الى لوحة تحكم بلوجر ◀ اضغط علي المظهر ثم علي تعديل HTML ◀ نضغط علي ctrl + f من الكيبورد ونبحث عن الوسم </head> ثم ننسخ الأكواد الآتيه ونضعها قبله/فوقه:

<style type='text/css'>
/* Dark Mode */
.ind-darkmode{display:inline-block;float:left;margin-top:10px;position:static;margin-left:50px;top:0;z-index:999}
.ind-darkmode svg{width:24px;height:24px;vertical-align:-5px;background-repeat:no-repeat!important;content:&#39;&#39;}
.ind-darkmode svg path{fill:#000}
.ind-darkmode .check:checked ~ .NavMenu{is opacity:1;visibility:visible;top:45px;min-width:200px;transition:all .3s ease;z-index:2}
.ind-icon{cursor:pointer;display:block;padding:8px;background-position:center;transition:all .5s linear}
.ind-icon:hover{border-radius:100px;background:rgba(0,0,0,.2) radial-gradient(circle,transparent 2%,rgba(0,0,0,.2) 2%) center/15000%}
.check{display:none}
.ind-darkmode .ind-icon .openmode{display:block}
.ind-darkmode .ind-icon .closemode{display:none}
.ind-darkmode .check:checked ~ .ind-icon .openmode{display:none}
.ind-darkmode .check:checked ~ .ind-icon .closemode{display:block}
.Night{background:#353535}
</style>

بعد ذلك قُم بالبحث عن الوسم </body> وضع هذه الأكواد فوقه/قبله:

<script type='text/javascript'>//<![CDATA[ $(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#ind-darkmode").on("click",function(){"Night"!=localStorage.toggled?($("body").toggleClass("Night",!0),localStorage.toggled="Night",$(".section-center").css("display","block")):($("body").toggleClass("Night",!1),localStorage.toggled="",$(".section-center").css("display",""))}),$("body").hasClass("Night")?$("#ind-darkmode").prop("checked",!0):$("#ind-darkmode").prop("checked",!1)});//]]> </script>

اقرأ أيضًا:

الآن هذا الكود تضعه في المكان الذي تريد وضع فيه زر الوضع الليلي -غالبآ تكون في الهيدر-، فقط ضع هذه الأكواد في المكان الذي تُريد ان يظهر فيه الزر:

<div class='ind-darkmode'><input class='check' id='ind-darkmode' title='Mode Dark' type='checkbox'/> <label class='ind-icon' for='ind-darkmode'> <svg class='openmode' viewBox='0 0 24 24'><path d='M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z'/></svg> <svg class='closemode' viewBox='0 0 24 24'><path d='M14.3,16L13.6,14H10.4L9.7,16H7.8L11,7H13L16.2,16H14.3M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69M10.85,12.65H13.15L12,9L10.85,12.65Z'/></svg> </label> </div>

قم بحفظ القالب واختبر الزر، لم يفعل شئ!! بالطبع لم يعمل لأنك لم تضيف اي خصائص لأي عنصر ..تابع:

نقوم بوضع .Night قبل class "الفئة" للعنصر في المكان المظلل، ونضع مثلآ لون الخلفية او لون الخط وهكذا، ببساطه مثلآ ستقوم بأخذ الـ class للعنصر مثل ".header" ونضع .Night قبله ونغير لون الخلفيه او النص كما تُريد.. هكذا:

.Night .header {background:#1e1f26;}

وقم بتكرار هذه الخطوة علي كل عنصر تريد تغيره وبعد الأنتهاء قم بحفظ المظهر.