اقدم لكم اضافة رائعة جدا زر الوضع المظلم

تركيب زر الوضع الليلي لقالب بلوجر

يمكنك اضافتها الى اي قالب بخطوات بسيطة
مرحبا ! موضوع اليوم هو طريقة اضافة الوضع الليلي لمدونات بلوجر عن طريق الغاء الوضع النهاري ( ابيض ) , ان الوضع العادي او نهاري يؤثر سلبيا على متصفحي مدونتك او موقعك , حيث ان الكثير من الناس تفضل ميزة الوضع الليلي في التطبيقات و المواقع للحفاض على البصر لان شدة اضائة تكون قوية بالنسبة لون ابيض اما الون الاسود فهي ضعيفة و لاتاثر على البصر لهذا قمت بكثابة هذه تدوين حول اضافة الوضع الليلي لمواقع و مدونات بلوجر.ان تشغيل الوضع الليلي حتما سيجعل زوار مدونتك من البقاء اكثر مدة و تصفح اكثر من موضوع مادام هناك اهتمام بالزوار باضافتك لميزة للوضع الليلي لهذا انصحكم بتفعيل هذه الاضافة من اجل ترك افضل تجربة للزوار مدونتك او موقعك , كما ان هذه الاضافة ستزيد من اناقة مدونتك لانا باختصار هذه الاضافة هي عبارة عن زر و تشغيلها عن طرين نقرة و هذا لن يتطلب الكثير من الوقت , حسنا الان نمر الى طريقة تركيبها على مدونات بلوجر.

معاينة زر الوضع المعتم

معاينة القالب

لتركيب الاضافة

توجه الى القالب ثم تحرير html

ضع الكود التالي في المكان الذي يناسبك ((الزر)) يفضل بداخل الهيدر

<div class="button-con">
  <label for='cb1'>
    <svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" version="1.1" id="dayIcon" x="0px" y="0px" viewBox="0 0 35 35" style="enable-background:new 0 0 35 35;" xml:space="preserve">
      <g id="Sun">
        <g>
          <path style="fill-rule:evenodd;clip-rule:evenodd;" d="M6,17.5C6,16.672,5.328,16,4.5,16h-3C0.672,16,0,16.672,0,17.5    S0.672,19,1.5,19h3C5.328,19,6,18.328,6,17.5z M7.5,26c-0.414,0-0.789,0.168-1.061,0.439l-2,2C4.168,28.711,4,29.086,4,29.5    C4,30.328,4.671,31,5.5,31c0.414,0,0.789-0.168,1.06-0.44l2-2C8.832,28.289,9,27.914,9,27.5C9,26.672,8.329,26,7.5,26z M17.5,6    C18.329,6,19,5.328,19,4.5v-3C19,0.672,18.329,0,17.5,0S16,0.672,16,1.5v3C16,5.328,16.671,6,17.5,6z M27.5,9    c0.414,0,0.789-0.168,1.06-0.439l2-2C30.832,6.289,31,5.914,31,5.5C31,4.672,30.329,4,29.5,4c-0.414,0-0.789,0.168-1.061,0.44    l-2,2C26.168,6.711,26,7.086,26,7.5C26,8.328,26.671,9,27.5,9z M6.439,8.561C6.711,8.832,7.086,9,7.5,9C8.328,9,9,8.328,9,7.5    c0-0.414-0.168-0.789-0.439-1.061l-2-2C6.289,4.168,5.914,4,5.5,4C4.672,4,4,4.672,4,5.5c0,0.414,0.168,0.789,0.439,1.06    L6.439,8.561z M33.5,16h-3c-0.828,0-1.5,0.672-1.5,1.5s0.672,1.5,1.5,1.5h3c0.828,0,1.5-0.672,1.5-1.5S34.328,16,33.5,16z     M28.561,26.439C28.289,26.168,27.914,26,27.5,26c-0.828,0-1.5,0.672-1.5,1.5c0,0.414,0.168,0.789,0.439,1.06l2,2    C28.711,30.832,29.086,31,29.5,31c0.828,0,1.5-0.672,1.5-1.5c0-0.414-0.168-0.789-0.439-1.061L28.561,26.439z M17.5,29    c-0.829,0-1.5,0.672-1.5,1.5v3c0,0.828,0.671,1.5,1.5,1.5s1.5-0.672,1.5-1.5v-3C19,29.672,18.329,29,17.5,29z M17.5,7    C11.71,7,7,11.71,7,17.5S11.71,28,17.5,28S28,23.29,28,17.5S23.29,7,17.5,7z M17.5,25c-4.136,0-7.5-3.364-7.5-7.5    c0-4.136,3.364-7.5,7.5-7.5c4.136,0,7.5,3.364,7.5,7.5C25,21.636,21.636,25,17.5,25z" />
        </g>
      </g>
    </svg>
  </label>
  <input class='toggle' id='cb1' type='checkbox'/>
  <label class='toggle-button' for='cb1'></label>
  <label for='cb1'>
    <svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" version="1.1" id="nightIcon" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
      <path d="M96.76,66.458c-0.853-0.852-2.15-1.064-3.23-0.534c-6.063,2.991-12.858,4.571-19.655,4.571  C62.022,70.495,50.88,65.88,42.5,57.5C29.043,44.043,25.658,23.536,34.076,6.47c0.532-1.08,0.318-2.379-0.534-3.23  c-0.851-0.852-2.15-1.064-3.23-0.534c-4.918,2.427-9.375,5.619-13.246,9.491c-9.447,9.447-14.65,22.008-14.65,35.369  c0,13.36,5.203,25.921,14.65,35.368s22.008,14.65,35.368,14.65c13.361,0,25.921-5.203,35.369-14.65  c3.872-3.871,7.064-8.328,9.491-13.246C97.826,68.608,97.611,67.309,96.76,66.458z" />
    </svg>
  </label>
</div>

ابحث عن ]]></b:skin> وضع فوقه الكود التالي

/* ISSAMWEEB */
body {
  background: #25272A;
  -webkit-transition: background-color 150ms ease-out !important;
  transition: background-color 150ms ease-out !important;
}
body.issweebday-background {
  background: #fff;
}
.button-con {
  cursor: default;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -76px;
  margin-top: -18px;
}
#dayIcon {
  position: relative;
  width: 26px;
  height: 26px;
  top: -3px;
  margin: 0 7px;
  fill: #9caec0;
}
#nightIcon {
  position: relative;
  width: 26px;
  height: 26px;
  top: -3px;
  margin: 0 7px;
  fill: #9caec0;
}
#dayIcon, #nightIcon {
  cursor: pointer;
}
.toggle {
  display: none;
}
.toggle, .toggle:after, .toggle:before, .toggle *, .toggle *:after, .toggle *:before, .toggle + .toggle-button {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.toggle::-moz-selection, .toggle:after::-moz-selection, .toggle:before::-moz-selection, .toggle *::-moz-selection, .toggle *:after::-moz-selection, .toggle *:before::-moz-selection, .toggle + .toggle-button::-moz-selection {
  background: none;
}
.toggle::selection, .toggle:after::selection, .toggle:before::selection, .toggle *::selection, .toggle *:after::selection, .toggle *:before::selection, .toggle + .toggle-button::selection {
  background: none;
}
.toggle + .toggle-button {
  outline: 0;
  display: inline-block;
  width: 4em;
  height: 2em;
  position: relative;
  cursor: pointer;
  border: 2px solid #333;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.toggle + .toggle-button:after, .toggle + .toggle-button:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}
.toggle + .toggle-button:after {
  left: 0;
}
.toggle + .toggle-button:before {
  display: none;
}
.toggle:checked + .toggle-button:after {
  left: 50%;
}
.toggle + .toggle-button {
  padding: 2px;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  border: 2px solid rgba(156, 174, 192, 0.27);
  border-radius: 2em;
}
.toggle + .toggle-button:after {
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  background: rgba(156, 174, 192, 0.27);
  content: "";
  border-radius: 1em;
}
.toggle:checked + .toggle-button:after {
  left: 50%;
}

ثم قم بالبحث عن </body> وضع الكود التالي فوقه

<script type='text/javascript'> $('body').toggleClass('issweebday-background'); $('#cb1').on('click', function () { $('body').toggleClass('issweebday-background'); }); </script>

و ثم قم بالحفظ و ستعمل معك الأضافة بشكل صحيح

وفي الختام !

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

اضافات شروحات بلوجر