U3F1ZWV6ZTgwNzczMjc0MDNfQWN0aXZhdGlvbjkxNTA0OTc4MjA3
recent
أخبار ساخنة

اضافة الوضع المظلم / الليلي / لقوالب البلوجر 2019




اضافة الوضع المظلم /  الليلي  /  لقوالب البلوجر


اضافة مهمة جدا لقوالب البلوجر وهي حماية العين من الاشعة الصادرة من شاشة الكمبيوتر 
عن طريق تطبيق الوضع الليلي على الواجهة بتغيير الوان القالب الى اللون الاسود او اي لون حسب اختيارك
تكون عن طريق اضافة زر باعلى القالب عند النقر عليه تتحول الوان القالب الى اللون اللذي تريده


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









شرح التركيب




اكواد الأضافة


أولاً ، قم بفتح لوحة تحكم بلوجر انقر على المظهر وانقر على زر تعديل
أضف هذا الكود قبل الوسم </body>




<div class='Switchbtn'>
<span class='nightly'>الوضع الليلي</span> <input class='togglenight togglenight-switch' id='nightmode' type='checkbox'/>
<label class='togglenight-btn' for='nightmode'/></div>
<script type='text/javascript'>
//<![CDATA[
// Night Mode
$("#nightmode").click(function(){$("body").toggleClass("nightmode")}),$("body").toggleClass(localStorage.toggled),$("#nightmode").click(function(){"nightmode"!=localStorage.toggled?($("body").toggleClass("nightmode",!0),localStorage.toggled="nightmode"):($("body").toggleClass("nightmode",!1),localStorage.toggled="")});
//]]>
</script>



ثانيا  بعدها قم بأضافة كود Css هذه قبل الوسم </head>




<style type='text/css'>
/* Night Mode */
.nightly{color:#999;font-size:13px}
.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;left:20px;top:20px}
.togglenight{display:none;}
.togglenight + .togglenight-btn{outline:0;display:inline-block;width:45px;height:10px;position:relative;cursor:pointer;margin-right:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.togglenight + .togglenight-btn:after,.togglenight + .togglenight-btn:before{position:relative;display:block;content:"";width:50%;height:100%}
.togglenight-switch + .togglenight-btn{background:#d5d2fc;border-radius:99em;transition:all .4s ease}
.togglenight-switch + .togglenight-btn:after{content:'';border-radius:100px;background:#887fff;transition:right 0.3s cubic-bezier(0.175,0.885,0.32,1.275),padding 0.3s ease,margin 0.3s ease;position:absolute;width:20px;height:20px;top:-5px;right:0;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}
.togglenight-switch:checked + .togglenight-btn{background:rgba(255,255,255,.15)}
.togglenight:checked + .togglenight-btn:after{content:'';right:55%;background:#ff9f43}
.nightmode{background:#202124;color:rgba(255,255,255,.7)}
.nightmode a{color:rgba(255,255,255,.7)!important}
.nightmode a:hover{color:rgba(255,255,255,.4)!important}
.nightmode .class-baru{}
.nightmode .class-baru{}



</style>




ثالثا يوضع هذا الكود فوق  ]]></b:skin> 


.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;left:20px;top:20px}
.Switchbtn{top:10px;left:80px}}
@media screen and (max-width:480px){
.Switchbtn {left:50px}
.nightly{display:none}}
@media screen and (max-width:240px){
.Switchbtn{display:none}}




رابعا قم بأضافة كود  هذه قبل الوسم </head>    بداخل الكود اللذي اضفته منذ قليل شاهد الفيديو





.nightmode .header{background:#222}



بعد التركيب قم بتغير الاسم جسم القالب body  او اي اضافة موجودة بالقالب و اذا اردت يمكك تغير اللون



و ثم احفظ القالب 




مينت تك

تعديل المشاركة
author-img

maher

تعليقات
    9 تعليقات
    إرسال تعليق
    • واصل زين العابدين photo
      واصل زين العابدين19 نوفمبر 2019 5:12 م

      رابط التحميل معطل

      إرسال تعليقحذف التعليق
      • maher photo
        maher20 نوفمبر 2019 3:25 ص

        اهلا بك اخي الكريم

        الرابطين يعملان بشكل صحيح و تمت اضافة رابط تحميل ثالث

        حذف التعليق
      • واصل زين العابدين photo
        واصل زين العابدين20 نوفمبر 2019 12:32 م

        بنفس المشكلة الرابط معطل ممكن تنزل الكود هنا

        إرسال تعليقحذف التعليق
      • واصل زين العابدين photo
        واصل زين العابدين24 نوفمبر 2019 1:03 م

        نموزج اتصل بنا لا. يظهر لي ممكن. تنزلو هنا ولا لا

        إرسال تعليقحذف التعليق
        • .07 photo
          .076 ديسمبر 2019 1:35 م

          كيف أقوم بتثبيتها في مكان محدد وليس متحركة

          إرسال تعليقحذف التعليق
          • maher photo
            maher13 ديسمبر 2019 1:48 م

            اهلا بك اخي الكريم
            هذه الاضافة مصممة لتنزل و تصعد مع نزول و صعود المدونة
            انت كل ما عليك هو تثبيت شريط الاقسام مثل ما هو موجود بمدونتي يعني عند نزول الصفحة ينزل شريط الاقسام و عند التعديل
            على زر الوضع الليلي مثل ما
            تم شرحه بالفيديو و تقوم بوضع الزر على شريط الاقسام عندئذ ستبدو ان الاضافة مثبته على شريط الاقسام
            ساضع موضوع اشرح به طريقة تثبيت شريط الاقسام عند النزول للاسفل

            حذف التعليق
            • maher photo
              maher31 مارس 2020 2:32 ص

              شاهد اخي هذه المدونة تم تركيبها بالقائمة العلوية و القائمة العلوية تنزل مع نزول الصفحة

              الشرط هي ان القائمة تنزل مع نزول الصفحة

              https://apk5star66.blogspot.com/

              حذف التعليق
              • maher photo
                maher1 سبتمبر 2020 4:13 ص

                و اذا لا تريدها بداخل الاقسام / عندالنزول للاسفل / تريد ان تكون ثابتة في مكان تختاره
                غير التالي بداخل اكواد ]]> تجد التالي position:fixed غيرها الى position: absolute
                و قم بالحفظ

                حذف التعليق
              الاسمبريد إلكترونيرسالة