استخدام الصور بصيغة webp فى بلوجر لزيادة سرعة المدونة

 كيفية إضافة الوضع الليلي أو الوضع الداكن في مدونة بلوجر بسهولة

 كيفية إظافة الوضع الليلي على بلوجر .معكم نالي محجوبة من سيو عربي سوف أشارك معكم  برنامجًا تعليميًا حول كيفية إضافة الوضع الليلي أو زر الوضع المظلم على مدونة بلوجر  من خلال خطوات بسيطة.

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

كيفية تثبيت زر الوضع الليلي أو الوضع الداكن على بلوجر

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

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

الوضع الداكن ، أو السمة الداكنة ، أو الوضع الليلي ببساطة ، هو مخطط لوني. تخيل صفحة بخلفية بيضاء ولون نص غامق في الوضع العادي .أما  في الوضع الداكن سيكون للمستند نفسه خلفية داكنة مع لون نص أبيض.

اليوم ، أصبحت معظم المواقع والمدونات الكبيرة و التطبيقات تتوفرعلى ميزة الوضع الليلي  .وقد تتساءل الان ما الغرض من اضافة الوضع الداكن او الوضع الليلي.

لماذا نظيف الوضع الليلي الى بلوجر؟

 يوفر الوضع الليلي ميزتين أساسيتين:

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

 2)الوضع الليلي يستخدم ضوءًا أقل ، وبالتالي يستهلك طاقة أقل.

كان اتجاه الوضع الليلي او الدارك مود Dark mode نفسه يرتفع بشكل كبير في تصميمات مواقع الويب في الوقت الحاضر. هذا يجعل الموقع  أو المدونة أكثر سهولة ويسهل قراءته أثناء الإضاءة المنخفضة. من منا لا يريد الراحة في عينيه أثناء القراءة؟

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

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

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

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

أولاً ، افتح حساب blogger الخاص بك أولاً وادخل إلى قائمة Dashboard

ادهب الى المظهر => ثم تعديل  HTML.

الخطوة الأولى

قم بوضع  كود زر الوضع الليلي فى المكان الذي تريد أن يظهر الزر فيه.

تم تصميم الكود على وضعه داخل قائمة لذلك يمكنك تعديل الكود او إزالة وسم الـ li

إذا اردت تغير مكانه فى قالبك

كود الزر:

<!-- بداية كود الوضع الليلي --> <li class='menu-item-2758' id='menu-category-item-2758'> <div class='Switchbtn' style='color: #f0f2f5;'> <input class='togglenight togglenight-switch' id='nightmode' type='checkbox'/> <label class='togglenight-btn' for='nightmode' title='الوضع الليلي'/> </div> </li> <!-- نهاية كود الوضع الليلي -->

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

قم  بوضع السكربت التالي فوق الوسم </body>

<!-- بداية اسكربت الوضع الليلي --> <script> //<![CDATA[ $("#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> <!-- نهاية اسكربت الوضع الليلي -->

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

الخطوة الاخيرة نظيف ستايل الوضع الليلي في css , لكن يجب عليك التعديل عليه لانه بدون التعديل لن يشغل معك.

/*------------------ بداية استايل الوضع الليلي ------------------*/ .Switchbtn { position: absolute; left: 125px; top: 10px; height: 40px; line-height: 40px; text-align: center; display: inline-block; align-items: center; z-index: 999 } .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: #ffc800; 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: rgb(76, 175, 80); } .blogger-iframe-colorize { display: block !important; } .nightmode { background: #000; } @media screen and (max-width: 720px) { .Switchbtn { left: 0px; } } @media screen and (max-width: 600px) { .Switchbtn { left: 10px; } } @media screen and (max-width:480px) { .Switchbtn { left: 1px; } } @media screen and (max-width:240px) { .Switchbtn { display:none; } } /*------------------ نهاية استايل الوضع الليلي ------------------*/

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

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

.nightmode 

قم بنسخه وكرره 

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

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

مثال :

ادا قمت بوضع كود الستايل مباشرة بدون التعديل , لن يعمل لانك لم تظف المناطق او الاماكن التي تريد ان تظيف اليه الوضع المظلم .

لدلك مثلا تريد ان تظبق الوضع المظلم على الهايدر header

فمادا سافعل  ,,, ساضيف classe  الهايدر الى  الكود..nightmode

كما في المثال التالي :

.nightmode  #header{

background: #000;

}

ادن اعتقد انك فهمت الان , يجب ان تكرر هدا الكود  وتضيف اليها classe او id حسب الاماكن التي تريد تظليلها عند تفعيل الوضع المظلم. وكدلم الوان النصوص .

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