تحميل Adobe Photoshop CS 8 فوتوشوب 8 عربى وانجليزى كامل بلسريل برابط مباشر

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

• شرح أضافة الوضع اليلي على المدونة 

اولاً قم بفتح المدونة ثم أنقر على المظهرثم أنقر فوق تعديل HTML وأبحث عن وسم

 
ثم ضع الكود التالى فوقة مباشر  

<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>

كما موضح لك بالصورة التالية 

ثانياً أبحث عن وسم
وضع الكود التالى فوقة مباشر

<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;right:20px;top:20px} .togglenight{display:none;} .togglenight + .togglenight-btn{outline:0;display:inline-block;width:45px;height:10px;position:relative;cursor:pointer;margin-left: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:left 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;left: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:'';left: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>

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

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

تعديل المقال