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

1. المعاينة
2. الخطوة الاولى
3. الخطوة الثانية
4. الخطوة الثالثة
5. صورة توضيحية

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

المعاينة

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

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

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>

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

إضافات بلوجر