اضافة الوضع الداكن لمدونات بلوجر

كيفية اضافة الوضع الداكن / الليلي إلى موقع الويب الخاص بك و لمدونات بلوجر

لعلك تتسائل :

•  ما هو الوضع الداكن / الوضع الليلي ؟ .
•  لماذا يجب عليك إضافة تبديل الوضع الداكن  او اضافة زر الوضع الليلي لمدونات بلوجر بأستخدام ملفات تعريف الأرتباط ؟
   .
• ما هي طريقة إضافة زر الوضع الليلي لمدونات بلوجر بأستخدام ملفات تعريف الأرتباط  ؟
  
  
• كيفية إضافة عناصر واجهة مستخدم بلوجر blogger أو مكوناتها إلى الوضع المظلم باستخدام CSS والتحكم فى مكان زر الوضع الليلي web widget .

وهذا ما سنقوم بالاجابة عنه فى هذا المقال فتابع معنا ..

 ما هو الوضع الداكن / الوضع الليلي night mode 

•  كما نعلم جميعًا ، أصبح استخدام الهواتف المحمولة والكمبيوتر المحمول أحد أكثر الإجراءات الروتينية شيوعًا في حياتنا. 

• وبالتالي ، من الواضح أن معظمنا يستخدمه في الليل و قد زاد فى الاونة الاخيرة الاستخدام الليلي . 

• و لسوء الحظ ، إذا قمت بذلك ، فقد تشعر بألم في العين خاصة إذا كنت تقضي ساعات طويلة أمام الشاشة في الليل هذا بالنسبة لك ولذائر مدونة بلوجر .

• اما انت كصاحب مدونة بلوجر فيجب عليك اضافة زر الوضع  الليلي  الى مدونة بلوجر او الموقع الالكترونى الخاص بك للحفاظ على راحة زوارك وللاحتفاظ بهم قدر الامكان على موقعك .

 لماذا يجب عليك اضافة تبديل الوضع الداكن/ الليلي او اضافة الوضع الليلي لمدونات بلوجر بأستخدام ملفات تعريف

 إن وجود مثل هذه الميزة في موقع الويب الخاص بك - بغض النظر عن النظام الأساسي الذي تستخدمه Blogger أو WordPress - سيضيف مجموعة من المزايا عند اضافة زر الوضع الليلي على مدونات بلوجر .

وهذه المزايا تتمثل فى :

1. انطباع احترافي لموقعك على الويب حيث سيظهر القالب مثل  قالب بلوجر احترافي .
2. تجربة مستخدم أفضل .
3. خفض معدل الارتداد حيث سيبقى الزوار لفترة أطول لأنهم يشعرون براحة أكبر في قراءة المحتوى الخاص بك.

عمل وضع ليلي لمدونات بلوجر و طريقة تفعيل الوضع الليلي لقالب سيوبلس المجاني وباقى قوالب بلوجر

• من الجيد جدا ان تمتلك  ميزة الوضع الليلي فى مدونه بلوجر او ان تضيف زر الوضع الليلي المظلم dark mode .

• و طريقة إضافة الوضع الليلي لمدونة بلوجر و إضافة زر الوضع الليلي لمدونات بلوجر بأستخدام ملفات تعريف الارتباط تعتبر طريقة سهلة وبسيطة .

•  يتم تقديم هذه الميزة الرائعة الى منصات وورد بريس wordpress و أيضًا إلى منصة Blogger.

• تحتاج فقط إلى إجراء بعض التعديلات عن طريق إدخال بعض أسطر التعليمات البرمجية في قالب Blogger الخاص بك. للقيام بذلك ، اتبع دليلنا المكون من أربع خطوات أدناه.

 الخطوة الاولى 01

 أولاً ، اتبع هذه الخطوات لتجهيز القالب الخاص بك و اضافة الوضع الداكن فى مدونة البلوجر :

تعليمات هامة سنقوم بها ويجب قراءتها :

1. قم بفتح المدونة واذهب الى لوحة التحكم بلوجر ثم اختار المظهرثم اضغط على تعديل HTML .
2. قبل عمل الخطوة السابقة يجب ان تقوم بعمل نسخة احتياطية من القالب الخاص بك أولاً .
3. يتم استخدام Ctrl + C للنسخ و Ctrl + V للصق الرموز التالية في أماكنها المناسبة بسهولة .
4. يتم البحث عن سطر الكود داخل HTML القالب بالضغط على Ctrl + F .
5.  احفظ القالب الخاص بك واخرج بعد الانتهاء من تنفيذ ال 3 خطوات التالية وتاكد من رسالة تم الحفظ .

 الخطوة الثانية 02

 بعد ذلك ، قم بلصق الكود التالي قبل الوسم  (   </ head  ) الموجود بمنتصف القالب يمكنك البحث عنه باستخدام  Ctrl + F .

بداية الكود 

<style type='text/css'>

/* Night Mode */

.nightly{color:#999;font-size:13px}

.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}

.togglenight{display:none;}

.togglenight + .togglenight-btn{outline:0;display:inline-block;width:45px;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:#d5d2fc;border-radius:99em;transition:all .4s ease}

.togglenight-switch + .togglenight-btn:after{content:'';border-radius:100px;background:#887fff;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)}

.togglenight-switch:checked + .togglenight-btn{background:rgba(255,255,255,.15)}

.togglenight:checked + .togglenight-btn:after{content:'';left:55%;background:#ff9f43}

.nightmode{background:#202124;color:rgba(255,255,255,.7)}

.nightmode a{color:rgba(255,255,255,.7)!important}

.nightmode a:hover{color:rgba(255,255,255,.4)!important}

.nightmode .class-baru{}

.nightmode .class-baru{}


</style>

نهاية الكود 

الخطوة الثالثة 03

 بعد ذلك قم بالبحث عن الوسم (  <body/>  ) الموجود بمنتصف القالب ثم قم بلصق الكود التالى فوقه مباشرة ( لا تنسي ترك مسافتين او اكثر بين الاكواد وبعضها ) .

بداية الكود 

<div class='Switchbtn'>

<span class='nightly'>Night Mode</span> <input class='togglenight togglenight-switch' id='nightmode' type='checkbox'/>

<label class='togglenight-btn' for='nightmode'/></div>

<script type='text/javascript'>

//<![CDATA[

// Night Mode

$("#nightmode").click(function(){$("body").toggleClass("nightmode")}),$("body").toggleClass(localStorage.toggled),$("#nightmode").click(function(){"nightmode"!=localStorage.toggled?($("body").toggleClass("nightmode",!0),localStorage.toggled="nightmode"):($("body").toggleClass("nightmode",!1),localStorage.toggled="")});

//]]>

</script>

نهاية الكود 

الخطوة الرابعة 04

وهذه الخطوة للتحكم في ظهور مكان الاضافه او زر الوضع الليلى ، قم باضافة الكود التالي css في المكان الذي تريده فى القالب ويفضل ان يكون فى منتصف القالب .

بداية الكود

.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}

نهاية الكود

وكالعادة فى موقعنا قبل اي حاجه يجب ان ننوه لحاجه مهمه جدا ، ليست كل القوالب متشابهه فيما بينها وتقبل نفس الاكواد .

فيجب عليك عمل نسخة احتياطية من القالب قبل البدء فى عمل اى شئ خاص بأكواد المدونه ثم  حدث اى مشاكل اثناء تفعيل الاضافة فبكل سهوله ستقوم بعمل استعادة للنسخة الاحتياطية  .

وعود نفسك دائما على عمل نسخة احتياطية للقالب قبل إجراء اى تعديل ولو بسيط فى ال HTML الخاص بمدونتك .