تغيير شكل Scrollbar ببلوجر

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

تغيير شكل شريط التمرير ببلوجر في هذه التدوينة سوف أساعدك على تحسين مظهر شريط التمرير Scrollbar، في الوقت الحالي تعمل فقط في متصفحات الويب مثل Opera و Chrome و Safari، لسوء الحظ لاتعمل على متصفح firefox and IE. لأن اضافتنا كليا تعتمد على Css كما يمكنك التعديل عليها بسهولة مثل الألوان، العرض، الطول

• معاينة

شرح طريقة التركيب
1. سجل الدخول إلى مدونتك
2. المظهر >> تعديل HTML
3. ابحث عن ]]></b:skin> ثم ضع الشكل فوقه

شريط التمرير الأبيض

body::-webkit-scrollbar {
  width: 8px;
}
body::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
  background-color: #dfdfdf;
  border-radius: 10px;
}

شريط التمرير النحيل

body::-webkit-scrollbar {
  width: 5px;
}
body::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
  background-color: #11171a;
  border-radius: 10px;
}

شريط التمرير الأسود

body::-webkit-scrollbar {
  width: 10px;
}
body::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}

شريط التمرير البرتقالي

body::-webkit-scrollbar {
  width: 12px;
}
body::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.4);
}
body::-webkit-scrollbar-thumb {
  background-color: #e78632;
  background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.3) 20%,transparent 20%,transparent 40%,rgba(255, 255, 255, 0.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%,transparent 80%,rgba(255, 255, 255, 0.3) 80%);
  border-radius: 10px;
}

شريط تمرير مجرة

body::-webkit-scrollbar {
  width: 15px;
}
body::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.1);
}
body::-webkit-scrollbar-thumb {
  background-image: linear-gradient(45deg, #00aeff, #a68eff);
  border-radius: 10px;
  -webkit-box-shadow: rgba(0,0,0,.12) 0 3px 13px 1px;
}

شريط التمرير الأخضر

body::-webkit-scrollbar {
  width: 12px;
}
body::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.4);
}
body::-webkit-scrollbar-thumb {
  background-color: #aab74d;
  background-image:-webkit-linear-gradient(rgba(255,255,255,.3) 20%,transparent 20%,transparent 40%,rgba(255, 255, 255, 0.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%,transparent 80%,rgba(255, 255, 255, 0.3) 80%);
  border-radius: 10px;
}

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

التفسير
العناصر المتوفرة لتخصيص شريط التمرير في متصفحات الويب هي التالية:

 
:: - webkit-scrollbar {} / * شريط التمرير * / 
:: - webkit-scrollbar-button {} / * السهام * / 
:: - webkit-scrollbar-thumb {} / * مؤشر التمرير * / 
:: - webkit-scrollbar-track {} / * حاوية شريط التمرير * / 
:: - webkit-scrollbar-track-piece {} / * شريط التمرير * / 
:: - webkit-scrollbar-corner {} / * الزاوية السفلية من أشرطة التمرير * / 
:: - webkit-resizer {} / * شريط السحب لتغيير الحجم * /

عليك فقط استخدام تلك التي تحتاجها للتعديلات وليس من الضروري استخدام جميع القواعد ومع ذلك، إذا كنت تريد معرفة المزيد عنها ، أوصي بمقالة scroll bars حول أشرطة التمرير

إن كانت لديك أي تساؤلات فالمرجو ترك تعليق، ارد على جميع التعليقات ولا تنسى مشاركة الموضوع.

ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

عن الكاتب : Hussam

إرشادات

تحميل الملفات

نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
• موقع : Mediafire
• موقع :file-upload
• باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
• تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
• كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
• إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.

أين تجدنا؟

بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web


كلمة الختام

في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com

أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم