القائمة الرئيسية

الصفحات

كيفية اضافة الوضع الليلي لمدونة بلوجر | how to add night mode button to blogger


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


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


اسم المقال

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

مدة القراءة

  4 دقائق

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

1.نصائح قبل البدء فى انشاء مدونة 1 .
2.نصائح وافكار بخبرة 8 سنوات قبل انشاء مدونة بلوجر 2 .



لعلك تتسائل :

  •  ما هو الوضع الداكن / الوضع الليلي ؟ .
  •  لماذا يجب عليك إضافة تبديل الوضع الداكن  او اضافة زر الوضع الليلي لمدونات بلوجر بأستخدام ملفات تعريف الأرتباط ؟ .
  • ما هي طريقة إضافة زر الوضع الليلي لمدونات بلوجر بأستخدام ملفات تعريف الأرتباط  ؟
  • كيفية إضافة عناصر واجهة مستخدم بلوجر 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 .

( الكود الاول )  - جميع الاكواد موجودة بملف TXT بالاسفل فى اخر المقال .

بداية الكود 

<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:&quot;&quot;;width:50%;height:100%}

.togglenight-switch + .togglenight-btn{background:#d5d2fc;border-radius:99em;transition:all .4s ease}

.togglenight-switch + .togglenight-btn:after{content:&#39;&#39;;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:&#39;&#39;;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 .


فى المقال القادم ان شاء الله سوف نتحدث عن 
اضافة سلايد شو تلقائي و احترافي لمدونات بلوجر slideshow blogger widget widget .


قم بتحميل الاكواد من هنا ( اكواد الوضع الليلي )



NS/Eslam Gamal
Reactions:

تعليقات