![]() |
زر تغيير حجم النص |
مرحبًا ومرحبًا بكم في موضوعنا اليوم حول كيفية إضافة أداة تغيير حجم النص في مدونة بلوجر. في عالم الويب الحديث، يُعتبر تحسين تجربة المستخدم وإمكانية الوصول الشاملة أمرًا حيويًا. واحدة من الطرق الفعالة لتحقيق ذلك هي توفير وظيفة تغيير حجم النص في مدونتك. سيتيح هذا الأمر للزوار تخصيص تجربتهم وتكبير أو تصغير النص وفقًا لتفضيلاتهم الشخصية.
ولكن ما هي أهمية تغيير حجم النص؟ حسنًا، يلعب تحسين حجم النص دورًا حاسمًا في جعل المحتوى أكثر قراءةً وفهمًا للزوار، وخاصةً أولئك الذين يعانون من صعوبات في الرؤية أو لديهم إعاقات بصرية. بالإضافة إلى ذلك، فإن توفير أداة تغيير حجم النص يعكس التزامك باتباع المعايير القياسية لوصول الويب والتي تهدف إلى جعل المواقع أكثر قابلية للوصول لجميع المستخدمين.
في هذا المقال، سنقدم لكم خطوات مفصلة لكيفية إضافة أداة تغيير حجم النص إلى مدونتك على منصة بلوجر. سنركز على توضيح الشفرات اللازمة وكيفية تنفيذها بطريقة سهلة وآمنة. كما سنشرح المزايا الرئيسية لهذه الإضافة وكيف يمكنها تحسين تجربة الزوار وجعل مدونتك أكثر قابلية للوصول.
لذا، دعونا ننطلق في هذه الرحلة لإضافة أداة تغيير حجم النص إلى مدونتك على بلوجر ونحقق تجربة استخدام أفضل لجميع الزوار.
ما هي أداة تغيير حجم النص؟
تسمح أداة تغيير حجم النص للأشخاص ذوي الإعاقات بتكبير أو تصغير النص في موقع ويب دون فقدان أي من المعلومات الموجودة على الصفحة. وسيساعد ذلك المواقع في اتباع توجيه WCAG 2.0 AA 1.4.4 الذي ينص على أن يتمكن النص من التكبير حتى 200٪ من حجمه الأصلي. ويعد تحسين حجم النص ميزة هامة.
- يمكن تعيين إعدادات حجم النص بشكل عام.
- في معظم الحالات، قد لا يحتاج حجم النص إلى التعديل مرة واحدة.
- يمكن أن يتدفق المحتوى بشكل طبيعي عند عرضه بعد تغيير الحجم بشكل محدود.
معاينة اداة تغيير حجم النص
كيفية إضافة اداة زر تغيير حجم النص إلى مدونتك على بلوجر؟
يجب عليك اتباع الخطوات التالية:ملاحظة هامة:قبل أن نبدأ في إضافة الشفرات في XML، أوصي بأخذ نسخة احتياطية من القالب الحالي. في حالة حدوث أي مشكلة، يمكنك استعادته لاحقًا.
الخطوة 1:قم بتسجيل الدخول إلى لوحة التحكم الخاصة بك على بلوجر .<b:if cond='data:view.isPost'> <div class='Tresizerts'> <div id='Ifont'>A+</div> <div id='Dfont'>A-</div> </div> </b:if> <style> /* Text Resizer CSS by webwrd.com */ .Tresizerts{position:fixed;right:25px;bottom:150px;background:#ffffff;box-shadow:0 0 5px #000000;border-radius:5px;box-sizing:border-box;z-index:1;transition:all .3s linear} .darkMode .Tresizerts{background:var(--darkU);color:#ffffff;box-shadow:0 0 5px #ffffff} #Ifont,#Dfont{font-size:18px;padding:10px;box-sizing:border-box;background:#ffffff;color:#000000} .darkMode #Ifont,.darkMode #Dfont{background:var(--themeC);color:#ffffff;border-color:#ffffff} #Ifont{border-radius:5px 5px 0 0;border-bottom:.5px solid #000000} #Dfont{border-top:.5px solid #000000} #Dfont{border-radius:0 0 5px 5px} #Ifont:hover,#Dfont:hover{background:var(--themeC);color:var(--darkU);} </style> <script src='https://code.jquery.com/jquery-3.6.0.min.js'/> <script>/*<![CDATA[*/ $("").ready(function(){$("#Ifont").click(function(){curSize=parseInt($(".postBody").css("font-size"))+1,curSize<=20&&$(".postBody").css("font-size",curSize)}),$("#Dfont").click(function(){curSize=parseInt($(".postBody").css("font-size"))-1,curSize>=10&&$(".postBody").css("font-size",curSize)})}); /*]]>*/ </script>
بعض المميزات لهذه الإضافة لتغيير حجم النص في مدونة بلوجر:
1. سهولة الاستخدام:
2. إمكانية الوصول:
3. متوافقة مع المعايير:
4. تجربة مستخدم محسنة:
5. التكامل السلس:
6. تكيف المحتوى:
7. شخصية مخصصة:
إضافة تغيير حجم النص تعد إضافة قيمة لأي مدونة تستهدف تحسين تجربة المستخدم وزيادة إمكانية الوصول للجميع.
جميع الحقوق محفوظة ©
www.webwrd.com