مقالات

شرح عمل وضع ليلي لمدونات بلوجر او اي استضافة ويتم تسجيله في كوكيز المتصفح Dark Mode


اقدم لكم شرح و اكواد تمكنك من عمل وضع ليلي في موقعك لاكن شرط ان تكون تعرف التعامل مع اكواد ل 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

    مقالات ذات صلة

    زر الذهاب إلى الأعلى