اضافة رائعة جدا اضافة الوضع الليلي الى مدونتك

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

اضافة الوضع الليلي الى مدونتك 

الوضع الليلي اضافة رائعة جدا

يمكنك اضافتها الى اي قالب بخطوات بسيطة

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

معاينة الاضافة

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

توجه الى القالب ثم تحرير 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>

و شكرا