شرح القائمة العلوية وكيفية تثبيتها وتخصيص الوانها.

 

تُعتبر القائمة العلوية (Navigation Menu) من أهم عناصر أي قالب بلوجر، فهي تساعد الزوار على التنقل بين أقسام الموقع بسهولة، وتمنح المدونة مظهرًا احترافيًا مرتبًا. في قالب فرصة تكنو تم تصميم القائمة العلوية لتكون عصرية وسهلة التخصيص، مع إمكانية تثبيتها أثناء التمرير وتغيير ألوانها بما يتناسب مع هوية مدونتك.

في هذا المقال سنشرح بالتفصيل كيفية إنشاء القائمة العلوية، تثبيتها، وتخصيص ألوانها خطوة بخطوة.

---

أولًا: إنشاء القائمة العلوية

1. الدخول إلى لوحة التحكم

   • توجه إلى حسابك في Blogger.

   • اختر المدونة التي قمت بتركيب قالب فرصة تكنو عليها.

2. إضافة الروابط

   • من القائمة الجانبية اضغط على التخطيط (Layout).

   • ابحث عن أداة القائمة العلوية أو صفحات (Pages).

   • اضغط على تعديل لإضافة الروابط الخاصة بأقسام موقعك.

3. الأقسام الأساسية المقترحة
   يمكنك إضافة أقسام مثل:

   • الرئيسية

   • الأخبار

   • التقنية

   • المراجعات

   • اتصل بنا

   • من نحن

4. حفظ التغييرات
   بعد إدخال الروابط وحفظها، ستظهر القائمة العلوية مباشرة في أعلى المدونة.

---

ثانيًا: تثبيت القائمة العلوية عند التمرير

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

1. تفعيل الخاصية

   • ادخل على تعديل HTML من المظهر.

   • ابحث عن الكود الخاص بـ Navigation Bar.

   • ستجد خاصية مدمجة لتثبيت القائمة، وغالبًا مفعّلة بشكل افتراضي.

2. التأكد من عمل التثبيت

   • افتح مدونتك.

   • قم بالتمرير لأسفل الصفحة.

   • يجب أن تظل القائمة العلوية مثبتة أعلى الموقع دون أن تختفي.

3. حل مشكلة عدم التثبيت
   إذا لم تكن الخاصية مفعلة، يمكنك إضافة هذا الكود داخل ملف CSS للقالب:

   .header-menu {
       position: sticky;
       top: 0;
       z-index: 999;
   }
   

   هذا الكود يضمن بقاء القائمة مثبتة دائمًا أثناء التمرير.

---

ثالثًا: تخصيص ألوان القائمة العلوية

الألوان جزء مهم جدًا من هوية موقعك، وقالب فرصة تكنو يمنحك مرونة كبيرة في تخصيصها.

1. الدخول إلى المظهر (Customize)

   • من لوحة بلوجر اختر المظهر > تخصيص.

   • ستجد خيارات متعددة لتعديل الألوان والخطوط.

2. تخصيص ألوان القائمة

   • ابحث عن إعدادات Colors أو Advanced CSS.

   • يمكنك تغيير:

     • لون خلفية القائمة العلوية.

     • لون الخطوط داخل الروابط.

     • لون الرابط عند التمرير (Hover).

3. أمثلة على أكواد CSS للتخصيص

   /* خلفية القائمة */
   .header-menu {
       background-color: #0d6efd; /* أزرق */
   }
   
   /* لون الروابط */
   .header-menu a {
       color: #ffffff; /* أبيض */
   }
   
   /* عند التمرير */
   .header-menu a:hover {
       color: #ffd700; /* أصفر ذهبي */
   }
   

4. نصائح لاختيار الألوان

   • اختر لونًا رئيسيًا يتناسب مع هوية مدونتك (مثل الأزرق للتقنية، الأخضر للبيئة).

   • اجعل لون النص متباينًا مع لون الخلفية لضمان سهولة القراءة.

   • لا تكثر من الألوان، يكفي لونان أساسيان ولون واحد للتأثير (Hover).

---

رابعًا: اختبار القائمة العلوية

بعد إنشاء وتخصيص القائمة، اختبرها جيدًا:

• جرب الدخول من الهاتف للتأكد من أن القائمة متجاوبة.

• تحقق من عمل الروابط بشكل صحيح.

• تأكد من وضوح الألوان وسهولة التصفح.

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

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