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

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

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

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

ما هي اضافة الوضع الليلي؟

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

مميزات اضافة الوضع الليلي:

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

طريقة اضافة الوضع الليلي:

اولا قم بعمل نسخة احتياطة لقالب مدونتك في حال وقوع اي خطأ، بعدها ستتوجه الى المظهر>تعديل Html ثم ستقوم بنسخ الكود التالي و تضعه فوق الوسم </body> بالضغط على ctrl + f للبحث عن الوسم.

<script>
const body = document.querySelector(&quot;body&quot;);const darkModeBtn = document.querySelector(&quot;.dark-btn&quot;);if (localStorage.getItem(&quot;darkModeStatus&quot;)){body.classList.add(&quot;dark&quot;);}darkModeBtn.addEventListener(&#39;click&#39;, function(){if (localStorage.getItem(&quot;darkModeStatus&quot;)){body.classList.remove(&#39;dark&#39;);localStorage.removeItem(&quot;darkModeStatus&quot;);}else{
body.classList.add(&#39;dark&#39;);localStorage.setItem(&quot;darkModeStatus&quot;, &quot;true&quot;);}});
</script>
ثانيا ستقوم بوضع ايقونة او زر الوضع الليلي في اي مكان ترغب به في مدونتك سواء في القائمة الرئسية أو أي مكان، قم بنسخ كود html التالي:

<div class='dark-btn' id='botona'>
<a aria-hidden='true' class='fa fa-moon-o'/>
</div>

اخر شيء هو اضافة اكواد css وهنا سيأتي دورك بحيث ستقوم بتنسيق الزر و مظهر القالب على حسب رغبتك لذلك ركز معي جيدا.
ستبحث عن الوسم </b:skin> و تضع اكواد css فوقه. و سوف تضع اولا كود الايقونة التالي و تعديل اكواده على حسب ما ترغب فيه

/*==darkmode button==*/
#botona a{background:#fff;width:40px;border:2px solid #202020;border-radius:50%;height:40px;color:#202020;font-size:25px;text-align:center;line-height:38px;float:left;margin-top:8px;display:block;margin-left:-9px;cursor:pointer;padding-right:1px}#botona a:hover{background:#ffd439;color:#202020;transition:all .3s}

 و بعهدها ستضع الكود التالي بحيث هناك ستقوم بتصميم مظهر قالب الزضع الليلي الخاص بمدونتك

/*==darkmode theme==*/
body.dark{background:#1c2733}
body.dark .class{css stylishit}
body.dark #id{css sytlshit}

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

اسمي الكامل زكرياء الوربا, أبلغ من العمر 21 سنة, أقطن بالمغرب. جرافيك و ويب ديزاينر أعشق المجال التقني وهاذا ما يدفعني للنشر و الكتابة عن هذا المجال, هذفي هو نشر محتوى راقي يفيد الناس و يضفي للمحتوى العربي قوة تنافس المتوى الغربي. facebook instagram twitter

إرسال تعليق

أحدث أقدم