اضافة الوضع الليلي لقوالب البلوجر الشكل الرابع

Dark Mode اضافة الوضع الليلي للقالب

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

مثال عن الاضافة

شرح التركيب

الاكواد الخاصة بالأضافة

أولاً ، قم بفتح لوحة تحكم بلوجر انقر على المظهر وانقر على زر تعديل

أضف هذا الكود قبل الوسم </body>

<script>
//<![CDATA[
// Smarth Toggle
toggleClass("modedark")}),$("body").toggleClass(localStorage.toggled),$("#modedark").click(function(){"modedark"!=localStorage.toggled?($("body").toggleClass("modedark",!0),localStorage.toggled="modedark"):($("body").toggleClass("modedark",!1),localStorage.toggled="")});
//]]>
</script>
<script>
//<![CDATA[
// Malam Kelabu
$(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#modedark").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")?$("#modedark").prop("checked",!0):$("#modedark").prop("checked",!1)});
//]]>
</script>

ثانيا  يوضع هذا الكود فوق  ]]></b:skin> 

/* Warna Mode Malam */.Night body {background:#202125} .Night #wrapper{background:#202125}.Night #HTML3{background:#202125}.Night .share-this-pleaseeeee{background:#202125}.Night .related-post h4{background:#202125}.Night #label-info-th{background:#202125}.Night .post-body{color:#ccc}.Night #baca-juga h2{color:#ccc;background:#202125}.Night .label-info-th a{color:#ccc;background:#3d4658}.Night li.recent-posts a{color:#ccc}.Night .recent-posts-title h2{color:#ccc}.Night .widget-content{color:#ccc;background:#202125}.Night .post-info{color:#ccc}.Night h2.post-title a{color:#9e9e9e}.Night h2.post-title a:hover{color:#eee}.Night .post-title{color:#9e9e9e}.Night ul.nav-social{color:#202125}.Night .post-snippet{color:#ccc}.Night #Label1{background:#202125}.Night .blog-posts .post-outer .post{background:#202125;border-bottom-color:#252a33}.Night .PopularPosts h2{background:#202125}.Night .latest-post-title h2{background:#202125;border-bottom-color:#313640}.Night .newspaptext{color:#9e9e9e}.Night .PopularPosts h2 span{color:#9e9e9e}.Night .list-label-widget-content ul li{border-bottom-color:#313640}.Night .img-thumbnail img{background:#252931 linear-gradient(to right,rgba(255,255,255,0) 5%,#313640 20%,rgba(255,255,255,0) 30%);background-size:800px 104px}.Night .comments .comment-block {background:#12161f}.Night #header-container{background:rgba(32, 33, 36,.95);background-image:linear-gradient(110deg,rgba(255,255,255,0.1) 16%,rgba(255,255,255,0.1) 17%,rgba(255,255,255,0.05) 17%,rgba(255,255,255,0.05) 23%,transparent 8.5%,transparent 78%,rgba(255,255,255,0.05) 78%,rgba(255,255,255,0.05) 84%,rgba(255,255,255,0.1) 84%,rgba(255,255,255,0.1));box-shadow:0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2)}.Night .comments .comment-block{background:#12161f}.Night #header-wrapper{background:rgba(32, 33, 36,.95);background-image:linear-gradient(110deg,rgba(255,255,255,0.1) 16%,rgba(255,255,255,0.1) 17%,rgba(255,255,255,0.05) 17%,rgba(255,255,255,0.05) 23%,transparent 8.5%,transparent 78%,rgba(255,255,255,0.05) 78%,rgba(255,255,255,0.05) 84%,rgba(255,255,255,0.1) 84%,rgba(255,255,255,0.1));box-shadow:0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2)}.Night .sidebar h2{color:#b7b7b7}.Night .sidebar-sticky h2{color:#b7b7b7}.Night .latest-post-title h2{color:#b7b7b7}.Night .above-post-widget h2{color:#b7b7b7;border-bottom-color:#313640}.Night .comments h3{color:#b7b7b7;}.Night .breadcrumbs a{color:#eee}.Night .btnsocialshare{background:#383c44}.Night .label-line::before{background:#202125}.Night .label-line-c::before{background:#333740}.Night a.showcontent:hover{background:#373a42}.Night a.showcontent{background:#202125} .Night .comments .comments-content .comment-content{color:#fff}.Night div#Label1 h2{border-bottom:1px solid #eee;background:#202125}.Night .related-post-style-3 .related-post-item-title{color:#bbb}.Night #baca-juga ul{border:2px solid #eee}.Night #comments a.hiddencontent{background:#424854}.Night .comments .comments-content .comment-thread ol{background:#202125}.Night .comments .comments-content .inline-thread{background:#202125}.Night.displaypageNum a,.showpage a,.pagecurrent, #blog-pager-newer-link a, #blog-pager-older-link a {color:#eee;background:transparent;border:1px solid #eee}.Night .label-size{color:#eee;border:1px solid #eee}.Night .post-bottom a,.post-label a{color:#eee}/* Toggel */.smarthbtn{position:absolute;right:50px;top:4px;height:40px;line-height:40px;text-align:center;display:inline-block;align-items:center;z-index:10}.togglenight{display:none;} .togglenight + .togglenight-btn{outline:0;display:inline-block;width:35px;height:10px;position:relative;cursor:pointer;margin-left: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:#888;border-radius:99em;transition:all .4s ease} .togglenight-switch + .togglenight-btn:after{content:'';border-radius:100px;background:#fff url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.55,18.54L4.96,19.95L6.76,18.16L5.34,16.74M11,22.45C11.32,22.45 13,22.45 13,22.45V19.5H11M12,5.5A6,6 0 0,0 6,11.5A6,6 0 0,0 12,17.5A6,6 0 0,0 18,11.5C18,8.18 15.31,5.5 12,5.5M20,12.5H23V10.5H20M17.24,18.16L19.04,19.95L20.45,18.54L18.66,16.74M20.45,4.46L19.04,3.05L17.24,4.84L18.66,6.26M13,0.55H11V3.5H13M4,10.5H1V12.5H4M6.76,4.84L4.96,3.05L3.55,4.46L5.34,6.26L6.76,4.84Z' fill='%23fff'/%3E%3C/svg%3E") center / 17px no-repeat;transition:left 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;left:0;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);background-color: #333;}
.togglenight-switch:checked + .togglenight-btn{background:#888} .togglenight:checked + .togglenight-btn:after{content:'';left:50%;background:#222 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z' fill='%23fff'/%3E%3C/svg%3E") center / 17px no-repeat;background-color:#333;}

ثالثا هذه الاكواد خاصة باظهار الزر و يوضع في المكان المناسب

<div class="smarthbtn">
<input class="togglenight togglenight-switch" id="modedark" type="checkbox" />
<label class="togglenight-btn" for="modedark" title="Mode Dark"></label></div>

الاكواد الخاصة بتطبيق الوضع الليلي على اي قسم

.Night .footer-wrapper {
background:#202125;
color:#FFF;
}

و ثم قم بحفظ القالب و مبروك عليك الاضافة

تحرير المقال