أخر الاخبار

طريقة عمل الوضع الداكن في بلوجر 2023

 طريقة عمل  الوضع الداكن في 2021





 

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

 لاكن شرط ان تكون تعرف التعامل مع اكواد (css)

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


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

فقط عليه الضغط فقط ويمكنك وضعة في اي مكان تريد ان يظهر فيه

    <div class=”switch-mode”><div id=”switch-mode”><div class=”switch-button”><span></span></div></div></div>


والكود التالي هـو الجافا اسكريبت 

تضع هذا الكود فوق <body/>

<!-- Start HTML -->
<pre title='HTML' data-codetype ='HTMLku'><code class='language-markup'>
<script type='text/javascript'>//<![CDATA[!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):a("object"==typeof exports?require("jquery"):jQuery)}(function(a){function b(a){return h.raw?a:encodeURIComponent(a)}function c(a){return h.raw?a:decodeURIComponent(a)}function d(a){return b(h.json?JSON.stringify(a):String(a))}function e(a){0===a.indexOf('"')&&(a=a.slice(1,-1).replace(/\"/g,'"').replace(/\\/g,"\"));try{return a=decodeURIComponent(a.replace(g," ")),h.json?JSON.parse(a):a}catch(b){}}function f(b,c){var d=h.raw?b:e(b);return a.isFunction(c)?c(d):d}var g=/+/g,h=a.cookie=function(e,g,i){if(void 0!==g&&!a.isFunction(g)){if(i=a.extend({},h.defaults,i),"number"==typeof i.expires){var j=i.expires,k=i.expires=new Date;k.setTime(+k+864e5*j)}return document.cookie=[b(e),"=",d(g),i.expires?"; expires="+i.expires.toUTCString():"",i.path?"; path="+i.path:"",i.domain?"; domain="+i.domain:"",i.secure?"; secure":""].join("")}for(var l=e?void 0:{},m=document.cookie?document.cookie.split("; "):[],n=0,o=m.length;o>n;n++){var p=m[n].split("="),q=c(p.shift()),r=p.join("=");if(e&&e===q){l=f(r,g);break}e||void 0===(r=f(r))||(l[q]=r)}return l};h.defaults={},a.removeCookie=function(b,c){return void 0===a.cookie(b)?!1:(a.cookie(b,"",a.extend({},c,{expires:-1})),!a.cookie(b))}});$(document).ready(function(){$.cookie("dark-mode")?($("#switch-mode").addClass("active"),$("body").addClass("dark-mode")):($("body").removeClass("dark-mode"),$("#switch-mode").removeClass("active")),$("#switch-mode").on("click",function(){$.cookie("dark-mode")?$.removeCookie("dark-mode",{path:"/"}):$.cookie("dark-mode","yes",{expires:360,path:"/"}),location.reload()})});//]]></script>
</code></pre>
<!-- End HTML -->

الان نتجه الي الجزء الاصعب بالنسبة للشرح والذي يحتاج الي التركيز فقط

تضع هذا الكود فوق <head/>

    <style type=”text/css”>/*<![CDATA[*//*======================================  button Dark Mode=====================================*/.switch-mode{display:inline-block;margin:0 0 0 10px;background:transparent;min-width:180px;height:64px;line-height:64px;padding:0 15px;position:relative}.switch-mode #switch-mode{display:inline-block;width:40px;height:6px;background:#1a1c25;border-radius:3px;position:relative;top:1.5px;cursor:pointer}.switch-mode #switch-mode .switch-button{width:14px;height:14px;display:block;background:#eb1111;position:absolute;top:-5px;left:0;border-radius:100%}.switch-mode #switch-mode.active .switch-button{background:#0ca71b;left:auto;right:0}/*======================================  body Dark Mode == ضع اكواد التنسيق اسفل التعليق هذا=====================================*/
    /*]]>*/</style>


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

مثال

    لدينا عنوان مقال class او id الخاص به title-post ويكون  في اكواد css  الخاصة به في الوضع العادي لون الخط اسود او اي لون اخر وانتا تريد تغيير لونه عندا الوضع اليلي فعليك سوف عمل هكذا

    /* هذه في الوضع العادي*/.title-post{ color: #000;}
    /* هذه في الوضع اليلي*/.body.dark-mode .title-post{ color: silver;}
وكما ذكرت في اول الشرح يجب عليك ان تعرف التعامل مع اكواد ال css



تعليقات



    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -