تسريع ارشفة مواضيع بلوجر المدونة لاتظهر في جوجل شرح فيدبرنر

من الأشياء المهمة في تصميم المواقع والتي نادرا مانجدها في المدونات العربية خاصة ألا وهي التصميم على شريط التمرير للمتصفح

سنتعلم في هذا المقال طريقة بسيطة يمكننا من خلالها التعديل واضافة بعض التأثيرات الجمالية على شريط التمرير

ولكن قبل كل ذلك يجب ان نعرف ماهو شريط التمرير وكيف ولماذا سنقوم بالتعديل عليه؟

تصميم أزرار الويب Css و Html لمدونتك من الصفر شرح مفصل اصنع ازرارك بنفسك والآن

ماهو شريط التمرير ScrollBar

شريط التمرير هو عنصر واجهة مستخدم يمكن من خلاله تمرير النص المستمر أو الصور أو أي محتوى آخر في اتجاه محدد مسبقا على شاشة الكمبيوتر أو نافذة حتى يمكن عرض المحتوى بالكامل أو جزء منه

حسنا شريط التمرير من خلاله يمكننا التنقل داخل أي صفحة على الويب سواء للنزول والصعود أو التنقل من جهة اليمين واليسار

حيث يظهر في الأجهزة المكتبية والمحمولة في يمين المتصفح ومن الممكن ان يظهر أيضا في يسار المتصفح

هل سيظهر تصميمي لشريط التمرير على أجهزة الهواتف النقالة؟

يوجد أكثر من نوع لشريط التمرير في الهواتف وسيكون ظاهرا بالنسبة للمتصفح بشكل افتراضي ولكن يمكنك التعديل على مادون ذلك اي النوافذ المبثقة والمربعات واجزاء المواقع وغيره

ولكن وبالرغم من ذلك مازال من المستحسن التعديل على شكل شريط التمرير الأفتراضي للمتصفح على الأجهزة المكتبية والمحمولة

حيث سيكون من الملائم ان يظهر تصميم الموقع الخاص بك بشكل جيد الى ممتاز بالنسبة لمن يمتلك ميزة عرض الشريط

فكلما كان تصميم الموقع متكاملا كلما أصبح أجمل في طريقة عرضه

طريقة التعديل والتصميم على شريط التمرير Scroll Bar

من الجيد ان تكون لك معرفة مسبقة بلغات تصميم المواقع لتستطيع باستخدامها اضافة التأثيرات والألوان التي تناسب احتياجاتك ولكن ليس من الضروري ان تتقنها للبدء بتصميم احترافي

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

ولكن الغرض الأساسي من انشاء هذه المقالة هو تعلم طريقة كتابة جزء الأكواد الأساسية والتعديل والتصميم على شريط التمرير بأنفسنا وبدون الاستعانة بأي من هذه المواقع

الخطوة الأولى : كتابة أكواد Css الأساسية

لن تحتاج الى اضافة اي من أكواد Html فشريط التمرير معرف مسبقا لدى المتصفح ولاتحتاج الى انشاء اي عنصر جديد

كما ويوجد العديد من الأجزاء الخاصة بشريط التمرير والتي يمكننا تحديدها باستخدام Css لنضفي اليها التأثيرات التي نرغب بها ولنذكرها جميعها

::-webkit-scrollbar{} هذا الكود سنستطيع من خلاله التعديل على الجزء الخارجي من شريط التمرير
::-webkit-scrollbar-button{} يقصد بهذا الكود الأزرار التي تظهر في بداية ونهاية شريط التمرير
::-webkit-scrollbar-thumb{} نستطيع من خلال هذا الكود التعديل على المؤشر المتحرك بداخل شريط التمرير
::-webkit-scrollbar-track{} هذا الكود خاص بمسار شريط التمرير أي المساحة التي يمكن للمؤشر التحرك بها
باقي العناصر ليست مهمة للغاية ولكن سأذكرها من باب الفائدة
::-webkit-scrollbar-track-piece{} هي الطبقة العلوية من شريط التمرير التي لا يغطيها عنصر التمرير القابل للسحب (الإبهام)
::-webkit-scrollbar-corner{} هذا الكود خاص بالتعديل على الزاوية السفلية حيث قد يلتقي شريطا التمرير فيكون مثل الفاصل بين نقطتي الالتقاء
::-webkit-resizer{} يعالج مقبض تغيير الحجم القابل للسحب الذي يظهر أعلى ركن شريط التمرير في الزاوية السفلية لبعض العناصر

وهذه جميع الأكواد التي يمكنك من خلالها التعديل على شريط التمرير

الخطوة الثانية : التعديل على أكواد شريط التمرير

الآن وبعد ان انتهينا من ذكر النقاط الأساسية التي سنبدأ بها التصميم على شريط التمرير يمكننا البدء في كتابة أكواد Css خاصتنا

يوجد شرح بالفيديو في نهاية المقال يمكنك الاعتماد عليه في كتابة الأوامر والعناصر التي يمكننا اضافتها إلى الأكواد الأساسية

وبصراحة يوجد العديد من أكواد Css التي يمكننا استخدامها لإضافة التأثيرات الخاصة بنا وسأذكر منها مايكفي لتعديل العناصر الأساسية فقط فإذا أردت يمكنك تعلم لغة Css من الصفر في أقل من يوم واحد

background: هذه الميزة تقوم بالتغير على لون الغلاف أي ستتحكم بالألوان باستخدامها
border-radius: هذه الميزة ايضا ستحتاج إليها للتحكم في انحناء الأطراف الخارجية لشريط التمرير
display: سنستخدم هذه في اظهار أو اخفاء العناصر التي لانحتاجها
width: سنتحكم بها بالعرض
height: سنتحكم بها بالطول

الآن وبعد ان ذكرنا الأجزاء والخصائص الأساسية يمكننا الانتقال إلى عرض مثال بسيط للأكواد التي سيبدو عليها تصميمنا

::-webkit-scrollbar{
   background: transparent;
   width: 10px;
}   

::-webkit-scrollbar-thumb{
    background: #c30909;
    border-radius: 10px;
    height: 100px;
}

وسيكون شكل شريط التمرير Scroll Bar ظاهرا كالتالي

الخطوة الثالثة : اضافة الخصائص الجديدة الى جذر الموقع

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

كما يمكنك تحميل ملف الشرح ليسهل عليك المتابعة والتعديل

وفي الختام اتمنى ان يكون هذا المقال قد افادكم ولو بالقليل من المعلومات

لاتنس ترك تعليقك بالأسفل