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

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

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

• معاينة

طريقة التركيب

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

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

/* css scrollbar qaisi1web */
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;
}

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

/* css scrollbar qaisi1web */
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;
}

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

/* css scrollbar qaisi1web */
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;
}

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

/* css scrollbar qaisi1web */
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;
}

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

/* css scrollbar qaisi1web */
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;
}

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

/* css scrollbar qaisi1web */
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;
}

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

التفسير

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

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

عليك فقط استخدام تلك التي تحتاجها للتعديلات وليس من الضروري استخدام جميع القواعد

ان واجهت اي مشاكل فباب التعليقات مفتوح . . . بالتوفيق 😍

أ هلا بجميع اصدقاء مدونة القيسي ويب بعد فترة غياب ان شاء الله لن تتكرر عد لكم ولدي الكثير من الجديد لأقدمه لكم كما تعلمون من اهم ...