زر عائم لحماية العين من الأشعة الضارة
أضافة مهمة جدا و مفيدة للذين يبقون لفترات طويلة و هم امام شاشة الكمبيوتر
سأخبركم في هذه المقالة بكل شيء عن كيفية إضافة تظليل وضع القراءة إلى الموقع الخاص بك بسهولة في دقائق معدودة باستخدام HTML وCSS وJavaScript.
يعد تظليل شاشة وضع القراءة بشكل أساسي نوعًا من انواع الوضع المظلم أو الليلي الذي نراه بالفعل في عدد قليل من مواقع الويب .وهذا في الواقع يشكل طبقة داكنة لحماية عينيك من الضوء الأزرق المنبعث من الهواتف المحمولة وأجهزة الكمبيوتر الخاصة بك.
إذا كان موقع الويب الخاص بك لا يتكون من الوضع المظلم أو الوضع الليلي، فيمكنك إضافة تظليل شاشة الوضع المظلم هذا في موقع المدون الخاص بك لمساعدة زوار موقعك على قراءة مشاركتك دون أي انقطاع.
و التي ستقوم بتركيبه بسرعة و لا تحتاج للتغير على جميع الاضافات الموجودة بالقالب الخاص بك لتركب زر الوضع الليلي
بهذا الزر ستم التطبيق على واجهة القالب بالكامل
لذلك عليك قراءة الخطوات الواردة أدناه بعناية للحصول على فهم واضح حول إضافة تظليل شاشة وضع القراءة في موقع المدون دون أي مشكلة أو خطأ.
لذلك عليك قراءة الخطوات الواردة أدناه بعناية للحصول على فهم واضح حول إضافة تظليل شاشة وضع القراءة في موقع المدون دون أي مشكلة أو خطأ.
شرح بالفيديو
شرح التركيب
قم بتسجيل الدخول إلى Blogger
أولا وقبل كل شيء، تحتاج إلى تسجيل الدخول إلى لوحة تحكم موقع مدونتك باستخدام بيانات اعتماد تسجيل الدخول الخاصة بك.
قم بالذهاب الى المظهر و ثم اختيار HTML
ثم اضغط على CTRL + F ليظهر لك مربع بحث و ثم الصق <body> و ثم ENTER
و الصق الاكواد التالية اسفلها
<button class='AT-Screen-Shader'><svg style='width:24px;height:24px;vertical-align: middle;' viewBox='0 0 24 24'><path d='M12,9.5A2.5,2.5 0 0,0 9.5,12A2.5,2.5 0 0,0 12,14.5A2.5,2.5 0 0,0 14.5,12A2.5,2.5 0 0,0 12,9.5M12,13A1,1 0 0,1 11,12A1,1 0 0,1 12,11A1,1 0 0,1 13,12A1,1 0 0,1 12,13M12,9.5A2.5,2.5 0 0,0 9.5,12A2.5,2.5 0 0,0 12,14.5A2.5,2.5 0 0,0 14.5,12A2.5,2.5 0 0,0 12,9.5M12,13A1,1 0 0,1 11,12A1,1 0 0,1 12,11A1,1 0 0,1 13,12A1,1 0 0,1 12,13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,16C9.37,16 7,14.43 6,12C7.38,8.69 11.19,7.12 14.5,8.5C16.08,9.16 17.34,10.42 18,12C17,14.43 14.63,16 12,16M12,9.5A2.5,2.5 0 0,0 9.5,12A2.5,2.5 0 0,0 12,14.5A2.5,2.5 0 0,0 14.5,12A2.5,2.5 0 0,0 12,9.5M12,13A1,1 0 0,1 11,12A1,1 0 0,1 12,11A1,1 0 0,1 13,12A1,1 0 0,1 12,13Z' fill='currentColor'/></svg></button>
ثم ابحث عن </body> و الصق الكود التالي أعلاه
<div id='readmode'/><script defer='defer' type='text/javascript'>//<![CDATA[$(document).ready(function(){$(".AT-Screen-Shader").click(function(){$("#readmode").toggleClass("active");});});//]]></script>
ثم ابحث عن </head> و الصق الكود التالي أعلاه
<style>/* CSS Screen shader */.AT-Screen-Shader { padding:8px; color: #FFF; position: fixed !important; bottom: 68px; right: 20px; z-index: 998; background: black; outline: 0; border-radius: 50%; cursor: pointer; }#readmode.active{z-index:2147483647;margin:0;border-radius:0;padding:0;background:#111111!important;pointer-events:none;position:fixed;top:-10%;right:-10%;width:120%;height:120%;opacity:0.3600;mix-blend-mode:multiply;display:block}</style>
ثم قم بالحفظ و شاهد النتيجة
من خلال إضافة تظليل شاشة وضع القراءة هذا، سيساعد المستخدمين أو الزوار على قراءة منشور مدونتك في أي حالة مظلمة دون التأثير على أعينهم.
رموز التعليمات البرمجية الواردة أعلاه خفيفة الوزن ولا يتم استخدام CSS إضافي هنا ولن تؤثر سرعة موقع الويب عن طريق إضافة وضع القراءة هذا.
أضف تظليل شاشة وضع القراءة هذا إلى قوالب المدونين، حيث لا يوجد خيار الوضع المظلم، حتى تتمكن من استخدام خيار وضع القراءة هذا ليكون بمثابة وضع مظلم لموقع المدون الخاص بك.
أتمنى أن تكون قد فهمت كيفية إضافة تظليل شاشة وضع القراءة إلى موقع المدون الخاص بك بسهولة في دقائق معدودة باستخدام HTML وCSS وJavaScript.