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

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

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

متنساش اخذ نسخة من قالبك في حال حدث خطأ ما.

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

اولآ: نسجل الدخول الي بلوجر >> اضغط علي المظهر ثم علي تعديل 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;}

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

لا تنسى وضع ".Night" قبل اسم الفئة لأنها لن تعمل بدونها.

الموضوع ليس مُعقدآ انه بسيط، ولكن إذا واجهتك اي مشكله يُمكنك ترك لنا تعليق تحت في خانه التعليقات وسنساعد بالطبع، بس كدا خلاصنا... سلاااام;).