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

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

المعاينة

See the Pen اضافة الوضع الليلي لمدونات بلوجر by Adel Talyani (@adel-talyani) on CodePen.

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

ملاحظة : لا تنسى أخذ نسخة احتياطية للقالب

1. قم بتسجيل حسابك ثم إذهب إلى منصة البلوجرblogger
2. إنتقل للمدونة >> ثم إلى المظهر >> ثم إضغط على تحرير  Edit HTML 
3. إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
4. بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب

قم بالبحث عن هذا الوسم

]]></b:skin> اضغط مرتين لتحديد

فوقه أي قبله قم بوضع css.كود

:root {
    --primary-color: #302AE6;
    --secondary-color: #536390;
    --font-color: #424242;
    --bg-color: #fff;
    --heading-color: #292922;
}
[data-theme="dark"] {
    --primary-color: #9A97F3;
    --secondary-color: #818cab;
    --font-color: #e1e1ff;
    --bg-color: #161625;
    --heading-color: #818cab;
}
.main-post-sec {
  background-color: var(--bg-color);
  color: var(--font-color);
  margin: 0 auto;
  font-size: calc(1rem + 0.25vh);
}
.tl-midheader {
  background-color: var(--bg-color);
  color: var(--font-color);
  font-size: calc(1rem + 0.25vh);
}
.post-meta {
  background-color: var(--bg-color);
  color: var(--font-color);
  max-width: 90%;
  margin: 0 auto;
  font-size: calc(1rem + 0.25vh);
}
aside#sidebar-wrapper .widget {
  background-color: var(--bg-color);
  color: var(--font-color);
  font-size: calc(1rem + 0.25vh);
  max-width: 90%;
}
.tab-mash-button {
  background-color: var(--bg-color);
  color: var(--font-color);
  max-width: 90%;
  margin: 0 auto;
}
.rhead {
  background-color: var(--bg-color);
  margin: 0 auto;
  font-size: calc(1rem + 0.25vh);
}
body {

  background-color: var(--bg-color);
  color: var(--font-color);
  max-width: 90%;
  margin: 0 auto;
  font-size: calc(1rem + 0.25vh);
}
h1 {
    color: var(--heading-color);
    font-size: 2rem;
    margin-bottom: 1vh;
}
p {
  font-size: 1.1rem;
  line-height: 1.6rem;
}
a {
  color: var(--primary-color);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  font-weight: bold;
  &:hover, &:focus {
     border-bottom: 3px solid currentColor;
  }
}
section {
  max-width: 68%;
  margin: 0 auto;
}
.post-meta {
  font-size: 1rem;
  font-style: italic;
  display: block;
  margin-bottom: 4vh;
  color: var(--secondary-color);
}

/*slider switch css */
.theme-switch-wrapper {
  display: flex;
  align-items: center;
  
  em {
    margin-left: 10px;
    font-size: 1rem;
  }
}
.theme-switch {display: inline-block; height: 34px; position: relative;width: 60px;left: 12px;}

.theme-switch input {
  display:none;
}


.slider{
	background-color: #ccc;
	bottom: 0;
	cursor: pointer;
	left: 0px;
	position: absolute;
	right: -6px;
	top: 0;
	transition: .4s;
}

.slider::before {
	background-color: #fff;
	bottom: 4px;
	content: "";
	height: 26px;
	left: 3px;
	position: absolute;
	transition: .4s;
	width: 27px;
}

input:checked + .slider {
  background-color: #66bb6a;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

صورة توضيحية

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

قم بالبحث عن هذا الوسم

]]></body> اضغط مرتين لتحديد

فوقه أي قبله قم بوضع js.كود

<script TYPE='text/javascript'>
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);
    if (currentTheme === 'dark') {
        toggleSwitch.checked = true;
    }
}
function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark');
    }
    else { document.documentElement.setAttribute('data-theme', 'light');
          localStorage.setItem('theme', 'light');
    }    
}
toggleSwitch.addEventListener('change', switchTheme, false);
</script>

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

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

صورة توضيحية

<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round"></div></label></div>

• 
  بهذا ينتهي الدرس، أي إستفسار أترك تعليق في الأسفل أو إتصل بنا وإن شاء الله سنكون في عونكم.
  

إضافات بلوجر