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

Admin Amer

أغسطس 09, 2019

0 تعليقات

شاركه غرد جوجل+

السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.

السلام عليكم ومرحبا بكم في مدونة الخبير عامر بشير

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

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

• الكود التالي خاص ب الزر الذي يضغط عليه ويمكنك وضعه في اي مكان تريد ضهوره

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

• و الكود التالي هوا كود الجافا سكريبت يمكنك تحميله من هنا او من هنا او من هنا [ رفعته لكي لا يتم تخريب الاكواد في الموضوع ]
• تضع الكود فوق ال 

• الان نتجه الى الجزء المتعب و الذي يحتاج الى إجتهاد فردي 
• ضع هذه الاكواد فوق ال 

<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 يمكنك اخذ بعض الاساسيات في هذا الموقع من هنا

معاينة الاضافة من هنا

اذا اردت مني اضافة لك الوضع اليلي يمكنك شراء خدمة الدعم الفني من المدونة وراسلني من هنا 

ملاحظة فقط
وضعت التعديل في خدمة الدعم الفني لان العمل متعب حسب القالب  و تأخذ الكثير من الوقت و من المستحل اضافتها لكل متابعين المدونة الكرام كلهم 

الكلمات المفتاحية :

Written by you: Technical blogger AMER BACHIR

URL Of Post:

https://ab-expert.blogspot.com/2019/08/dark-mode.html

HTML Code Of Post:

<a href="https://ab-expert.blogspot.com/2019/08/dark-mode.html">كيفية عمل وضع ليلي لمدونات بلوجر او اي استضافة ويتم تسجيله في كوكيز المتصفح Dark Mode كتبها: المدون التقني - الخبير عامر بشير</a>