ازاي تغير شكل الـ Scrollbar في الموقع
Youssuf Abramo
ليه تغير شكل الـ Scrollbar ؟
حركة بسيطة جدا هتعملها في الموقع بتاعك هتلاقي شكله جميل جدا وجذاب وهي انك تغير شكل الـ Scrollbar بتاع الموقع ودا بنشوفه كتير في مواقع زي فيسبوك وجوجل بس دايما بيستخدموها للـ Scrollbar اللي جوة الموقع مش بتاع الـ body نفسه بس احنا بقى هنعملها كمان للـ body عشان يدي منظر جميل للموقع ككل وبعد اما تعملها ادعيلي بقى يا معلم 😍
اول حاجة انت تقدر تعمل الموضوع دا ببساطة من خلال:
طريقة التنفيذ
-
تكتب كود
-
تنزل بلجن
بس انا زي ما ذكرت قبل كدا في احد بوستاتي ان البلجنز مش افضل خيار انا بفضله لتنفيذ اى feature انت عايزها لانها بتنزل معاها جداول في الداتابيز وبتبطء الموقع فبفضل كل حاجة اعملها كود لو فيه امكانية في دا.. ولو عايز تقرا مقال ازاي تسرع موقعك اتفضل الرابط اهو ابقى اقراه برضو عشان مفيد: اضغط هنا لزيارة الرابط
عشان كدا انا هقولكوا ازاي تعملوها بالكود بطريقة بسيطة جدا ومش لازم تكون فاهم خالص في البرمجة انت هتاخد الكود زي ما هو copy وتحطه عندك paste وتغير في شوية ارقام والوان وبس كدا مش هياخد منك اكتر من 5 دقايق…
كباية الكباتشينو بقى وتعالى ركز معايا….
الذهاب لمكان وضع الكود
اول حاجة هتروح للموقع بتاعك عادي جدا وهتعمل login زى ما احنا متعودين على الـ wp-admin وبعد كدا هتفتح الـ Appearance وهتروح تدوس على الـ Customize كل دا كلام طبيعي وعملناه مليون مرة عشان نعدل على الموقع انا مقولتش حاجة جديدة عليكو…
اول ما تخش بقى يا باشمهندس هتلاقي فيه حاجة اسمها Additional CSS هتدوس عليها وهنا هتلاقيه بيقولك اكتب كود الـ CSSاللي انت عايز تطبقه في الموقع عندك… ببساطة هتعمل نسخ للكود دا وهتحطه في الـ AdditionalCSS زي ما اتفقنا
الكود
/* START SCROLLBAR */
html {
–scrollbarBG: #f5f5f5;
–thumbBG: #e04622;
transition:0.5s;
}
::-webkit-scrollbar-thumb:hover {
–thumbBG: #131359;
transition:0.5s;
}body::-webkit-scrollbar {width: 13px;}body::-webkit-scrollbar-track {background: #f5f5f5 !important;}
body::-webkit-scrollbar-thumb {
background-color: var(–thumbBG) ;
border-radius: 6px;
border: 3px solid var(–scrollbarBG);
}
/* END SCROLLBAR */
لينك تحميل الكود
طيب ركز بقى معايا.. متوقع اول ما تحط الكود هتلاقي شكل الـ Scrollbarاتغير واكيد اكيد انت محتاج تغير في شكله..
انا هكتب دلوقتي شوية مسميات موجودة في الكود وكل اللي عليك هو انك تغير الارقام دي وتحط جنبها نفس وحدة القياس بتاعتها اللي هي الـ pxودي اختصار لكلمة pixelفانت لو فيه حاجة عايز تكبرها هتزود الارقام ولو فيه حاجة عايز تصغرها هتقلل الارقام.. كلام جميل؟ الكلام سهل وزي الفل.. تعالى بقى نفهم الكلام اللي مكتوب عشان نغير فيه صح زي ما احنا عايزين…
شرح الكود
الكود اللي باللون الاحمر دا لون البار نفسه اللي هو برتقالي
الكود اللي باللون الاخضر دا معناه ان لو الماوس اتحط على البار ايه اللون اللي عايزه يظهر في الكود هنا المفروض ازرق
الكود اللي باللون البنفسجي دا عرض البار
الكود اللي باللون البرتقالي دا انك هتغير لون الشريط اللي بيتحرك فيه البار بتاعك وممكن تخليه زي مهو اللي هو ابيض مطفي
الكود اللي باللون التركوازي دا هو انحناء اطراف البار لو مسحت السطر دا او خليته ب 0px هتلاقي البار بقى اطرافه حادة
الكود اللي باللون الازرق دا معناه انك لو عايز البار بتاعك حواليه خط بلون معين، في حالتنا انا عامله نفس لون الخلفية عشان يبقى فيه تباعد بين البار وبين طرف الشاشة لو مش عايز يكون فيه تباعد تابع معايا
الكود اللي باللون اللبني والاخير دا معناه انك هتعمل خط محيطي للبار ولو خليت اللون بتاع البار نفس لون الخلفية هيظهر معاك ايفيكت حلو اوي وهو تباعد البار عن طرف الشاشة ولو مش عايز التباعد دا امسح السطر دا خالص
الالوان المدعومة
بس كدا دول كل حاجة محتاج تعرفها عن الكود وطبعا الالوان بتدعم HEX و RGB و RGBA وحاجات تانية بس انا انصحك تستخدم HEX على طول وتريح دماغك..
ملحوظة: الكود دا ممكن ميكنش مدعوم في بعض المتصفحات بس في الغالب هيشتغل معاك على المتصفحات اللي معمولة بمحرك Chromium اللي معمول بيه Chrome و Edge وغيرهم
إضافة لتنفيذ نفس الشيء
طيب انا مش عايز اوجع دماغي بكل الكلام دا انا عايز بلجن تعملي الحوار دا وانا اتحكم فيها من الـ Dashboard في الووردبريس.. اتفضل يا باشا لينك بلجن اهي استخدمها متحرمش نفسك من حاجة:
بس كدا لو عجبك المحتوى خليك معانا في الجروب هشان بنزل حاجات مفيدة وممكن تبعتلي ادد لو حابب عشان يظهرلك كل اللي بنزله جديد على الجروب وتقدر تاخد لفة في باقي المقالات اللي نزلتها من هنا:
او ممكن برضو تشوف قناة اليوتيوب هتعجبك:
يللا حد عايز حاجة مني؟
صامو عليقو ❤❤
I have been surfing online more than three hours these days,
yet I never discovered any interesting article like yours. It is pretty value
sufficient for me. In my view, if all web owners and
bloggers made excellent content material as you probably did, the net will
be much more useful than ever before.