راسلنا من خلال النمودج التالي :

الاسم

بريد إلكتروني *

رسالة *

أكتب ما تود البحث عنـه .....

إعلان
إعلان

آخر الأخبار

اضافة الوضع المظلم / الليلي / لقوالب البلوجر 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  او اي اضافة موجودة بالقالب و اذا اردت يمكك تغير اللون



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




مينت تك


hala teck
الكاتب : MAHER

مدون عربي صاحب مدونة هلا تك يهتم بكل جديد بعالم التقنية و المعلومات

شارك الموضوع
تعليقات
  1. الردود
    1. اهلا بك اخي الكريم

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

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

    ردحذف
    الردود
    1. استخدم نموذج اتصل بنا و سارسل لك الكود

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

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

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

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

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

      https://apk5star66.blogspot.com/

      حذف

إرسال تعليق

إعلان