عرب حصرى

كيف تضيف الوضع الليلي على موقعك او مدونتك بلوجر شرح حصري وتحميل الكود مجاناً

جدول محتوى المقال

مقدمة

الوضع الليلي له فوائد كثيرة عند وضعه على موقعك أو مدونتك فى منصة بلوجر او منصة ورد برس او موقعك الإلكتروني على أي منصة ، يعد الوضع الليلي زر هاماً ومميزاً بدأنا أن نراه مؤخراً على المواقع العملاقة والشهيرة مثل فيسبوك ويوتيوب وذلك مهم وضروري لإراحة العين فعندما يقوم مستخدم الموقع او زائر الموقع بتفعيل الوضع الليلي او وضع الظلام او الدارك مود فتصبح ألوان الموقع ليلية أي ألوان غامقه اللون وهي درجات اللون الأسود .. يعد هذا مريح للعين وغير مضر بالتالي يكون هذا سبب كبير فى تقليل معدل إرتداد الزوار على المواقع كما يطيل وقت جلوس المستخدمين داخل صفحة الموقع وداخل الموقع بالكامل .. لذلك شرحنا اليوم عن كيفية إضافة زر الوضع الليلي على موقعك أو مدونتك فى بلوجر فتابعونا.

إحتراف وأسرار بلوجر كيف تضيف الوضع الليلي على مدونتك.

Adding The Night Mode To Blogger

تحميل جميع الأكواد أسفل المقال.

الشرح كاملاً من خلال الفيديو :

تم التحديث : يمكنك الآن وضع شكل مختلف وجزاب لزر الوضع الليلي مع أكواد بدون أخطاء ونظيفة كود جديد مختلف الرابط بالأسفل مع نفس الخطوات التى تم شرحها بالفيديو لكن بتغيير كود التعديل ، إنظر الشرح بالأسفل.

الخطوات:

سوف تقوم بتطبيق نفس الخطوات الواردة فى شرح الفيديو ولكن سوف تغير كود .nightmode الذي يتم التعديل عليه فى ملف الستايل الى الكود .darkmode هذا كل شيئ.

يمكنك معاينة الزر الذي هو موجود على موقعنا هنا الآن.

صورة للمعاينة:

إليكم نفس الملفات الواردة ولكن مع أكواد مختلفة لزر الوضع الليلي الجديد.

 

التعديل:

 

فقط على ملف الستايل وهو كالتالي :

فقط قم بقرأة الكلام الشرح داخل ملف الستايل ثم قم بمسحه

وهو التالي :

الكود الذي سيتم التعديل عليه هو

.darkmode

قم بنسخه وكرر هذا كما ورد بالفيديو

قم بجلب الكلاس او الـ أي دي للعنصر

ثم ضعه بعد الكود

.darkmode

ثم عدل على لون الخلفية او لون الكلام

ثم إنسخ الخلفية او الكولور وضعهم بين الأقواس

إترك كل شيئ كما هو فقط عدل على كود

الـ darkmode

الذي هو بالأسفل هنا وإسمه

.darkmode

قم بنسخ الكود فى الملف وكرره ثم قم بالتعديل عليه كما تم شرحه.

الكود هو :

.darkmode {
}

طريقة التعديل على الكود .darkmode لظهور الوضع الليلي على مدونتك او موقعك.

ضع اسم الكلاس ( class ) او الـ أي دي ( ID ) للعنصر هنا

مع وضع النقطة ( . ) قبل الكلاس او رمز الشباك ( # ) قبل الـ أي دي.

مثال:

{
background: #000;
}

هذا مجرد مثال للون خلفية العنصر لكود سي اس اس الذى يتم وضعه للعنصر.

{
 color: #fff;
}

هذا مجرد مثال للون خط العنصر لكود سي اس اس الذى يتم وضعه للعنصر.

التحميل :

تحميل الملفات الواردة بالفيديو وملفات الشكل الجديد الرائع.

زر الوضع الليلي شكل 1

من فايل أبلود :

التحديث.

زر الوضع المظلم الجديد شكل 2 بدون أخطاء

من فايل أبلود :

أي أسئلة إترك تعليق فى الأسفل وسوف نرد عليكم فوراً.

شارك المقال لتفيد غيرك وتدعم الموقع لتقديم المزيد.

الكاتب

Mohsen Abdo

الإنشاء

08 يناير 2021

آخر تحديث

المشاهدات