اقدم لكم اضافة مهمة جداالوضع الليلي او الوضع المظلم Niht Mode
لقوالب البلوجر
الشكل الرابع
الاضافة مهمة جدا و سهلة التركيب و بخطوات بسيطة فقط تحتاج لقليل من التركيز
و هي لحماية العين و ضوء الكمبيور الابيض
طريقة التركيبنذهب الى المظهر و نضغط على تعديل HTML
نبحث عن <body و نلصق الاكواد التالية اسفله
قد يكون بالشكل الموجود بالفيديو او يكون بهذا الشكل المهم ان يوضع اسفله
<div class='modedark'><input class='check' id='modedark' title='Mode Dark' type='checkbox'/>
<label class='iconmode' for='modedark'>
<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>
نبحث عن </body> و نلصق الكود التالي اعلاه
<script type='text/javascript'>
//<![CDATA[
/* Night Mode/Dark Mode */
$(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#modedark").on("click",function(){"nightmode"!=localStorage.toggled?($("body").toggleClass("nightmode",!0),localStorage.toggled="nightmode",$(".section-center").css("display","block")):($("body").toggleClass("nightmode",!1),localStorage.toggled="",$(".section-center").css("display",""))}),$("body").hasClass("nightmode")?$("#modedark").prop("checked",!0):$("#modedark").prop("checked",!1)});
//]]>
</script>
نبحث عن </head> و نلصق الكود التالي اعلاه
<!--</b:if></head><!--</head>
<style type="text/css">
/*---- Night Mode/Dark Mode ----*/
.modedark {
background: linear-gradient(to right, #ff1800 40%, #d40303); /*Background color of icon*/
float: left;
position: fixed;
bottom: 20px; /*Change this for position*/
z-index: 999;
opacity:0.7 /*Opacity Degree Of Icon*/
; left: 64px; border-radius: 44px;
}
.modedark svg {
width: 24px;
height: 24px;
vertical-align: -5px;
background-repeat: no-repeat!important;
content: ''
}
.modedark svg path {
fill: #fff
}
.modedark .check:checked~.NavMenu {
opacity: 1;
visibility: visible;
top: 45px;
min-width: 200px;
transition: all .3s ease;
z-index: 2
}
.iconmode {
cursor: pointer;
display: block;
padding: 8px;
background-position: center;
transition: all .5s linear
}
.iconmode: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
}
.modedark .iconmode .openmode {display: block }
.modedark .iconmode .closemode {
display: none
}
.modedark .check:checked~.iconmode .openmode {
display: none
}
.modedark .check:checked~.iconmode .closemode {
display: block
}
.nightmode {background:#15202B;color:rgba(255,255,255,.7)}
</style>
الأكواد الخاصة بالتعديل على الوان القالب و لون الخط
.nightmode #outer-wrapper,.nightmode #sidebar-wrapper{background:#323232;color:#fff!important}
طريقة تركيب اكواد التعديل على لون القالب و لون الخط
تلصق هذه الاكواد بين الوسمين </style> <style> بالتي وضعناها فوق </head>
اذا لم تتوفر بداخل القالب مكتبة الجي كويري يرجى اضافتها فوق /head
<script src='https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js'/>
شاهد الصورة
شاهد الصورة
يمكنك متابعة الفيديو المرفق لمعرفة الطريقة
و شكرا
شكرًا لوقتكم واهتمامكم بقراءة موضوع تركيب أضافة الوضع الليلي لقوالب بلوجر الشكل الخامس. إذا صادفتكم أي مشكلة أثناء استخدام الكود أو كان لديكم أي استفسار، فلا تترددوا في طرحه ضمن التعليقات أو التواصل معنا عبر صفحة الاتصال بنا . ولا تنسوا الانضمام إلى متابعي مدونة هلا تك ليصلكم كل كل ما هو جديد.