للبحـث بداخـل المدونــة . . .

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

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

 


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


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


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



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


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






و شكرا
صاحب مدونة هلا تك التي تهتم بكل ما هو جديد على منصة بلوجر من أضافات و قوالب و شروحاتهم

6 تعليقات

  1. أخي ممكن قالب مدونتك واكن شاكرك 😍😍😍 واعدك باانني لااشاركه لااي شخص
    1. اهلا بيك اخي القالب اسمه سيو فاست فقط قمت ببعض التعديلات عليه
  2. لم تعمل
    1. اهلا بيك ما هي المشكلة التي صادفتك

    2. يمكنك مشاهدة هذا الموضوه

      https://www.halateck.com/2019/12/ctrl-f-head-enter-typetextcss-button.html?showComment=1587917914499#c5051141810161267985
  3. غير معرف
    أزال أحد مشرفي المدونة هذا التعليق.
✩ تساعدنا ملاحظاتك في تطوير مدونتنا وتكون من خلال مشاركة أفكارك واقتراحاتك معنا.
رأيك يهمنا، لذا يرجى مشاركته معنا. يمنع إضافة روابط لأي موقع في التعليقات و شكرا لتفهمك .

أهم الموضوعات المميزة

ملفات تعريف الأرتباط
يستخدم موقعنا ملفات تعريف الارتباط Cookies لتحسين تجربتك أثناء تصفحك لموقعنا .
إقرأ المزيد
هنـاك مشكـلة !
يبدو أن هناك خطأ ما في اتصالك بالإنترنت. يرجى الاتصال بالإنترنت وبدء التصفح مرة أخرى.
تـم الكشــف عن مانــع أعلانــات !
المعذرة ! لقد إكتشفنا أنك قمت بتنشيط Ad-Blocker يرجى النظر في دعمنا من خلال تعطيل Ad-Blocker الخاص بك فهو يساعدنا في تطوير هذا الموقع . . . وشكرا لتفهمك !
Site is Blocked
Sorry! This site is not available in your country.