أذا كنت من مستخدمي قالب Plus UI، فقد حان الوقت لاستكشاف ميزة تغيير لون الثيم تلقائيًا. هذه الميزة ليست مجرد إضافة بسيطة، بل هي أداة قوية لتحسين تجربة المستخدم وإضفاء طابع ديناميكي على موقعك.
 |
| كيفية إضافة ميزة تغيير لون الثيم تلقائيًا في قالب Plus UI |
في هذا المقال، سنتعرف بالتفصيل على كيفية إضافة ميزة تغيير لون الثيم تلقائيًا في قالب Plus UI، وكيف يمكن لهذه التقنية أن تُحدث فرقًا كبيرًا في تصميم موقعك وأدائه. إن معرفة كيفية إضافة ميزة تغيير لون الثيم تلقائيًا في قالب Plus UI ليست فقط خطوة نحو تحديث مظهر موقعك، بل هي أيضًا وسيلة لتعزيز تفاعل الزوار وتقديم تجربة تصفح مريحة ومميزة.
لنبدأ الآن رحلتنا لاكتشاف هذه الميزة الرائعة!
ما هي ميزة Auto Theme Changer؟
تتيح هذه الميزة تغيير ألوان الثيم تلقائيًا دون الحاجة إلى تدخل يدوي. يمكنها التبديل بين الوضعين الداكن والفاتح أو بين ألوان مخصصة أخرى في قالب Plus UI، مما يجعل تجربة التصفح أكثر راحة وسلاسة.
فوائد ميزة Auto Theme Changer
سهولة الاستخدام
لا حاجة للمستخدمين لتغيير الألوان يدويًا، حيث يتم التبديل تلقائيًا أثناء:
- تحميل الموقع.
- تصفح المقالات، الصفحات، أو الروابط.
- تحديث الصفحة.
تحسين تجربة المستخدم (UX)
بفضل التبديل التلقائي، تقل معدلات الارتداد وتزداد معدلات التفاعل، مما يعزز وقت بقاء المستخدم على الموقع.
راحة العين
الألوان التلقائية تقلل إجهاد العين، خاصةً عند التبديل بين الأوضاع المختلفة.
إبراز التحديثات
تظهر هذه الميزة الموقع بشكل أكثر حداثة وتفاعلية.
كيفية إضافة الميزة إلى قالب Plus UI
قبل أن نبدأ في إضافة الأكواد في XML، أنصحك بأخذ نسخة احتياطية من السمة الحالية لديك. بالصدفة، إذا حدثت أي مشكلة، يمكنك استعادتها لاحقًا.
الخطوة 1: انتقل إلى لوحة تحكم بلوجر.
الخطوة 2: انقر فوق زر السمة، ثم انقر فوق تحرير HTML.
الخطوة 3: الآن قم بنسخ الكود ولصقه أعلاه </head>في القالب الخاص بك.
<style>
.head1,.para1,.para2{margin-left:6px}.head1{font-size:14px;font-family:"Google Sans Text";color:#343435;margin-bottom:-7px;font-weight:unset}.para1{margin-bottom:-11px}.brr{content:"";display:block;border-bottom:1px solid var(--contentL);margin:12px 5px}.cusP{margin-bottom:-20px}@media screen and (min-width:750px){.switch{left:205px;transform:rotate(90deg);top:-48px}}@media screen and (max-width:361px) and (min-width:322px){.switch{left:220px!important;top:-45px!important}}@media screen and (max-width:321px){.switch{left:202px!important;top:-46px!important;transform:rotate(90deg)!important}}@media screen and (max-width:376px) and (min-width:362px){.switch{left:240px!important;top:-45px!important}}@media screen and (max-width:415px) and (min-width:395px){.switch{left:280px!important;top:-45px!important}}@media screen and (max-width:394px) and (min-width:377px){.switch{left:255px!important;top:-45px!important}}@media screen and (max-width:749px) and (min-width:416px){.switch{left:286px;top:-45px}}.switch{position:relative;display:inline-block;width:55px;height:30px;margin-bottom:-2000px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:"";height:22px;width:22px;left:3.5px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--linkC)}.drK input:checked+.slider{background-color:var(--darkU)}input:focus+.slider{box-shadow:0 0 1px #2196f3}input:checked+.slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}
</style>نقترح إضافة CSS باستخدام الطريقة الثانية، وهي استخدام رابط CDN خارجي بنمط CSS. بهذه الطريقة، إذا تم إجراء أي تغييرات على الكود، فسترى التحديثات على موقعك على الفور، ولكن إذا كنت تنوي تخصيص الأداة، فاستخدم الطريقة الأولى.
استخدام رابط CDN بنمط CSS خارجي 👇
إذا كنت تريد الحصول على آخر التحديثات في أقرب وقت ممكن، فاستخدم رابط CDN أدناه.
<link rel="stylesheet" href="https://theamanstark.com/cdn/blogger/plus-ui/autoThemeChanger/latest/autoTheme.min.css" />إذا كنت تريد استخدام الإصدار 1.0 من autoThemeChanger، فاستخدم رابط CDN أدناه.
<link rel="stylesheet" href="https://theamanstark.com/cdn/blogger/plus-ui/autoThemeChanger/v1.0/autoTheme.min.css" />الخطوة 6: الآن ابحث عن الكود </body> وقم بلصق كود javascript التالي الموجود فوقه مباشرة.
إذا كنت تريد الحصول على آخر التحديثات في أقرب وقت ممكن، فاستخدم رابط CDN أدناه.
<script src='https://theamanstark.com/cdn/blogger/plus-ui/autoThemeChanger/latest/autoTheme.min.js'></script>إذا كنت تريد استخدام الإصدار 1.0 من Auto ThemeChanger، فاستخدم رابط CND أدناه.
<script src='https://theamanstark.com/cdn/blogger/plus-ui/autoThemeChanger/v1.0/autoTheme.min.js'></script>الخطوة 7: وأخيرًا، أضف HTML التالي في <div class='cusP'> الصورة أدناه لمعرفة مكان الإضافة.
<div class="brr"/><h6 class="head1">Auto Theme Changer</h6><p class="para1">When turned on automatically changes</p><p class="para2">the theme color on reload.</p><label class="switch"><input id="theme-toggle" type="checkbox"/><span class="slider round"/></label><div class="brr" style="margin-top:-6px;"/><h6 class="head1">Auto Themer</h6><p class="para1">When turned on automatically changes</p><p class="para2">the theme color every 5 sec.</p><label class="switch"><input id="auto-theme" type="checkbox"/><span class="slider round"/></label>هام ! لا يمكنك حاليًا تعديل حد زمني للموضوع التلقائي من 5 ثوانٍ إلى رقم مخصص؛ سيتم تضمين ذلك في إصدار مستقبلي من الكود.
الخطوة 8: ثم احفظ.
تم أخذ هذه الاكواد مباشرة من مستودع تغيير السمات التلقائي الخاص بـ theamanstark.
لماذا تعتبر هذه الميزة مفيدة؟
- تعزيز التفاعل: تجعل الميزة الموقع أكثر ديناميكية، مما يزيد من اهتمام المستخدمين.
- تحسين التصميم: تضيف لمسة عصرية وشخصية إلى موقعك.
- راحة المستخدم: تقدم تجربة تصفح مريحة تتناسب مع ظروف الإضاءة المختلفة.
الأسئلة الشائعة
1. ما هي ميزة Auto Theme Changer في قالب Plus UI؟
ميزة Auto Theme Changer هي خاصية تتيح تغيير ألوان الثيم تلقائيًا بين الوضعين الداكن والفاتح أو ألوان أخرى دون تدخل يدوي، مما يوفر تجربة تصفح مريحة وديناميكية للمستخدمين.
2. هل يمكن تخصيص المؤقت الزمني لتغيير الألوان تلقائيًا؟
نعم، يمكن تعديل المؤقت الزمني الافتراضي (5 ثوانٍ) حسب الحاجة باستخدام خيارات التخصيص المتوفرة في الكود.
3. ما هي فوائد ميزة Auto Theme Changer للمواقع؟
تشمل الفوائد تحسين تجربة المستخدم، تقليل إجهاد العين، تقليل معدل الارتداد، وزيادة التفاعل مع الزوار. كما تضيف طابعًا حديثًا وديناميكيًا لتصميم الموقع.
4. كيف أضيف ميزة Auto Theme Changer إلى قالب Plus UI؟
يمكن إضافة الميزة من خلال ثلاث خطوات أساسية:
- إدراج أكواد CSS (داخليًا أو عبر رابط خارجي).
- إدراج كود JavaScript أعلى وسم </body>.
- إضافة كود HTML في القسم المحدد بالقالب.
5. هل تؤثر ميزة تغيير لون الثيم تلقائيًا على سرعة تحميل الموقع؟
إذا تم استخدام أكواد خفيفة ومصادر موثوقة مثل روابط CDN، فلن تؤثر الميزة بشكل ملحوظ على سرعة تحميل الموقع.
الخاتمة
إضافة ميزة Auto Theme Changer في قالب Plus UI تمثل نقلة نوعية في تصميم موقعك، حيث تجمع بين الجمال والوظائف العملية. هذه الميزة لا تساعد فقط في تقديم تجربة تصفح أكثر راحة وسلاسة، بل تسهم أيضًا في تعزيز تفاعل الزوار وزيادة وقت بقائهم على الموقع.
باتباع الخطوات البسيطة المذكورة، يمكنك تطبيق هذه الميزة بسهولة وإظهار موقعك بمظهر عصري يجذب المزيد من الزوار.
لا تتردد في استغلال هذه الفرصة لتحسين موقعك وجعله أكثر حداثة وتفاعلًا. حان الوقت لتجعل موقعك ينبض بالحياة ويأسر قلوب زواره!
