تركيب أضافة الوضع الليلي لقوالب بلوجر
اقدم لكم اضافة مهمة جدا
الوضع الليلي او الوضع المظلم 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'/>
شاهد الصورة
شاهد الصورة
يمكنك متابعة الفيديو المرفق لمعرفة الطريقة
و شكرا