اضافات بلوجر كمبيوتر جرافيك كتب الكترونية CSS ادوات سيو اكواد HTML البرمجة مواقع للتصميم
آخر الأخبار

استكشف في مدونة أوعي وشك عالم الابتكار

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

الصفحة الرئيسية
اضافات بلوجر

كيفية إضافة زر الوضع المظلم بسهولة إلى مدونات بلوجر| دليل خطوة بخطوة

لذلك ان كنت لاتمتلك هذه الاضافة فتابع معنا هذا الشرح الذي ساعلمك فيه طريقة اضافة زر الوضع المظلم على مدونة بلوجر بسهولة تامة.
wesam elngar
Easily add dark mode button to blogs

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

هذا الكود يُنشئ زرًا لتبديل الوضع الليلي (Dark Mode) على موقع الويب الخاص بك. إليك شرح تفصيلي لكيفية عمل هذا الكود:

  1. الهيكل العام:
    • زر التبديل: يتم إنشاء زر باستخدام عنصر <input> من نوع checkbox مخفي (باستخدام display: none;)، ويتم التحكم في ظهوره من خلال العنصر <label> المرتبط به.
    • الأيقونات: يتم استخدام أيقونتين (SVG) لتمثيل الوضع الليلي والوضع العادي. الأيقونة الأولى (openmode) تظهر عندما يكون الوضع الليلي غير مفعل، والأيقونة الثانية (closemode) تظهر عندما يكون الوضع الليلي مفعلًا.
  2. التنسيقات (Css):
    • زر التبديل: يتم تثبيت الزر في الزاوية اليمنى السفلية من الشاشة باستخدام position: fixed; وbottom: 7px; وright: 17px;.
    • الأيقونات: يتم تنسيق الأيقونات بحيث تكون بحجم 33x33 بكسل، مع تعديل بسيط على المحاذاة الرأسية باستخدام vertical-align: -5px;.
    • تبديل الأيقونات: عند تفعيل الوضع الليلي (عند النقر على الزر)، يتم إخفاء الأيقونة الأولى (openmode) وإظهار الأيقونة الثانية (closemode) باستخدام display: none; وdisplay: block;.
    • الوضع الليلي: يتم تطبيق لون خلفية داكن (#171921) ولون نص أبيض (#fff) على العنصر <body> عند تفعيل الوضع الليلي.
  3. الجافاسكريبت (javascript):
    • التحكم في الوضع الليلي: يتم استخدام localStorage لحفظ حالة الوضع الليلي (مفعل أو غير مفعل) حتى بعد إعادة تحميل الصفحة.
    • عند النقر على الزر، يتم التحقق من قيمة localStorage.toggled:
      • إذا كانت القيمة غير موجودة أو غير مساوية لـ "nightmode"، يتم تفعيل الوضع الليلي عن طريق إضافة الكلاس nightmode إلى <body> وحفظ القيمة في localStorage.
      • إذا كانت القيمة موجودة وتساوي "nightmode"، يتم إلغاء تفعيل الوضع الليلي عن طريق إزالة الكلاس nightmode من <body> وحذف القيمة من localStorage.
    • حالة الزر: يتم التحقق من وجود الكلاس nightmode على <body> عند تحميل الصفحة. إذا كان الكلاس موجودًا، يتم تفعيل حالة الزر (checked) تلقائيًا.
كيفية العمل:
  • عند النقر على الزر:
    • يتم تبديل الوضع الليلي (Dark Mode) وإضافة الكلاس nightmode إلى <body>.
    • يتم حفظ الحالة في localStorage لتذكر التفضيل حتى بعد إعادة تحميل الصفحة.
  • عند إعادة تحميل الصفحة:
    • يتم التحقق من localStorage لمعرفة ما إذا كان الوضع الليلي مفعلًا أم لا، وتطبيق الحالة المناسبة تلقائيًا.
الاستخدام:
  • يمكن استخدام هذا الكود لإضافة ميزة الوضع الليلي إلى أي موقع ويب بسهولة.
  • يتم تفعيل الوضع الليلي عن طريق النقر على الزر الموجود في الزاوية اليمنى السفلية من الشاشة.
مثال عملي:
  • عند تفعيل الوضع الليلي:
    • يتغير لون خلفية الصفحة إلى اللون الداكن (#171921).
    • يتغير لون النص إلى الأبيض (#fff).
    • تتغير الأيقونة لتظهر أن الوضع الليلي مفعل.
  • عند إلغاء تفعيل الوضع الليلي:
    • تعود الألوان إلى وضعها الطبيعي.
    • تعود الأيقونة إلى حالتها الأصلية.
تحسينات مقترحة:
  • إضافة انتقالات سلسة (transitions) لتغيير الألوان عند التبديل بين الوضعين.
  • تحسين تجربة المستخدم (UX) عن طريق إضافة نص توضيحي يظهر عند تمرير الماوس فوق الزر.
  • دعم المزيد من العناصر (مثل الصور أو الأزرار) لتغيير ألوانها تلقائيًا عند تفعيل الوضع الليلي.

هذا الكود يعتبر حلاً بسيطًا وفعالًا لإضافة ميزة الوضع الليلي إلى موقعك باستخدام Html و Css و javascript.

طريقة تركيب الكود

طريقـة التركيـب

أولاً افتح بلوجر انقر فوق الزر "تحرير HTML محرر التعليمات البرمجية.

حدد السمة تحرير HTML

أضف CSS أدناه قبل كود ]]> </b:skin> أو زوج العلامات <style>...</style>

  1. اكواد CSS للوضع المظلم على بلوجر
    
/*----- css dark mode button -----*/   
.arabes1{float:left;position:fixed;bottom:7px;z-index:999;;right: 17px;}
.arabes1 svg{width:33px;height:33px;vertical-align:-5px;background-repeat:no-repeat!important;content:&#039;&#039;}
.arabes1 svg path{fill:#a09f9f9e}
.arabes1 .check:checked~.NavMenu{opacity:1;visibility:visible;top:45px;min-width:200px;transition:all .3s ease;z-index:2}
.iconmode{cursor:pointer;display:block;padding:8px;background-position:center;transition:all .5s linear}.check{display:none}
.arabes1 .iconmode .openmode{display:block;background: #020202;opacity: .3;border-radius: 4px;}
.arabes1 .iconmode .closemode{display:none}
.arabes1 .check:checked~.iconmode .openmode{display:none}
.arabes1 .check:checked~.iconmode .closemode{display:block}
  
 /*----- Start adding Elements From here -----*/   
.nightmode 
{background:#171921;color:#fff!important} 




    
        ====== الوان خلفية و نصوص مختلفة ======
لون اسود داكن و حروف بيضاء
{background:#171921;color:#fff!important}  

لون ارزق داكن و حروف رمادية فاتحة
{background:#242950;color:rgba(255,255,255,.7)} 


لون رمادي داكن و حروف رمادية فاتحة: 
{background:#15202B;color:rgba(255,255,255,.7)}
  2. كود زر الوضع المظلم على بلوجر
    
        ==== اسفل وسم <body> ====
  <!-- Dark mode -->
<div class='arabes1'><input class='check' id='arabes1' title='Mode Dark' type='checkbox'/>  
<label class='iconmode' for='arabes1'>  
<svg class='openmode' viewBox='0 0 24 24'><path d='M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z'/></svg>  
<svg class='closemode' viewBox='0 0 24 24'><path d='M14.3,16L13.6,14H10.4L9.7,16H7.8L11,7H13L16.2,16H14.3M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69M10.85,12.65H13.15L12,9L10.85,12.65Z'/></svg>  
</label>  
</div>
  3. سكريبت الوضع المظلم على بلوجر
    
         ==== فوق الوسم </body> ======
 <script type='text/javascript'>  
//<![CDATA[  
/* Night Mode/Dark Mode Feature - By Arabes1.com */    
$(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#arabes1").on("click",function(){"nightmode"!=localStorage.toggled?($("body").toggleClass("nightmode",!0),localStorage.toggled="nightmode",$(".section-center").css("display","block")):($("body").toggleClass("nightmode",!1),localStorage.toggled="",$(".section-center").css("display",""))}),$("body").hasClass("nightmode")?$("#arabes1").prop("checked",!0):$("#arabes1").prop("checked",!1)});  
//]]>  
</script>


=====
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>

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

إرسال تعليق