كيفية إظهار عنصر على سطح المكتب فقط وإخفائه على الموبايل في بلوجر

واجهتني مشكلة عندما اردت ان اظهر اداةعلي سطح المكتب واخفاؤها علي الموبايل وبعد تجارب عدد من الاكواد وجدت كود اخيرا فقررات ان اشاركه معكم .

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

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

في هذا المقال، سنتعرف على كيفية تحقيق ذلك باستخدام أكواد CSS في منصة بلوجر.

ما هي أهمية هذه الأداة؟

1. تحسين تجربة المستخدم: بعض العناصر قد تكون مصممة خصيصًا لشاشات كبيرة، مثل الإعلانات أو الجداول الكبيرة. عرضها على الهواتف المحمولة قد يجعل التصفح صعبًا.
2. تحسين سرعة الموقع: إخفاء العناصر غير الضرورية على الموبايل يمكن أن يقلل من وقت تحميل الصفحة، مما يحسن تجربة المستخدم.
3. تخصيص المحتوى: يمكنك عرض محتوى مختلف بناءً على نوع الجهاز، مما يسمح لك بتقديم تجربة مخصصة لكل مستخدم.

كيفية تطبيق الأداة في بلوجر

لإظهار عنصر على سطح المكتب فقط وإخفائه على الموبايل، نستخدم أكواد CSS مع تقنية Media Queries. إليك الخطوات التفصيلية:

قم بتسجيل الدخول إلى بلوجر  انقر فوق السمات > تحرير HTML

ابحث عن الكود </head>

 يرجى نسخ كود Css هذا، ثم لصقه قبل الكود </head>

 
<style>
  /* إظهار العنصر على سطح المكتب */
  .desktop-only {
    display: block;
  }

  /* إخفاء العنصر على الموبايل */
  @media only screen and (max-width: 767px) {
    .desktop-only {
      display: none;
    }
  }
</style>

تطبيق الكود على العنصر

1. انتقل إلى الجزء الذي تريد إظهاره على سطح المكتب فقط.
2. أضف الكلاس desktop-only إلى العنصر. مثلاً:

 
  <div class="desktop-only">
  هذا العنصر سيظهر فقط على سطح المكتب.
</div>

حفظ التغييرات

1. بعد إضافة الكود، انقر على "حفظ القالب (Save Theme) لحفظ التغييرات.

شرح الكود

1. اختبار التغييرات:

   • بعد تطبيق الكود، تأكد من اختبار الموقع على أجهزة مختلفة (سطح المكتب، الهاتف
   • المحمول، الجهاز اللوحي) للتأكد من أن العنصر يظهر ويختفي بشكل صحيح.

2. استخدام أدوات المطورين:

   • يمكنك استخدام أدوات المطورين في المتصفح (مثل Chrome DevTools) لمحاكاة أجهزة مختلفة واختبار التغييرات.

3. تحسين الأداء:

   • تأكد من أن العناصر التي تخفيها على الموبايل لا تؤثر على سرعة تحميل الصفحة. يمكنك استخدام أدوات مثل Google PageSpeed Insights لتحليل أداء موقعك.

خاتمة

 تعد أداة تخصيص العرض في بلوجر طريقة فعالة لتحسين تجربة المستخدم وتقديم محتوى مخصص بناءً على نوع الجهاز. باستخدام أكواد CSS البسيطة، يمكنك التحكم في إظهار أو إخفاء العناصر بسهولة. 

جرب هذه الأداة على مدونتك، وستلاحظ تحسنًا في تجربة المستخدم وأداء الموقع. إذا كانت لديك أي أسئلة أو استفسارات، فلا تتردد في مشاركتها في التعليقات!