طريقة تغيير شريط التمرير فى مدونات بلوجر بالشرح المبسط. ~ تحميل جميع البرامج

السلام عليكم ورحمة الله وبركاته

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

لتفعيل اى شكل من الاشكال الاتية اتبع هذه الخطوات

1-قم بالبحث عن]]></b:skin>

وضع فوقه كود الشكل الذى تريده.

الشكل الأول

::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #D62929;
}

الشكل الثانى

::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar
{
width: 6px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
background-color: #000000;
}

الشكل الثالث

::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%,
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.5, transparent), to(transparent));
}

الشكل الرابع

::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
background-color: #F90; background-image: -webkit-linear-gradient(45deg,
   rgba(255, 255, 255, .2) 25%,
  transparent 25%,
  transparent 50%,
  rgba(255, 255, 255, .2) 50%,
  rgba(255, 255, 255, .2) 75%,
  transparent 75%,
  transparent)
}

والان شرح لعمل شريطك الخاص !

من المرجح إن المعظم لاحظ فى مجمل الأكواد السابقة وجود ثلاثة أسطر رئيسية تتكرر بشكل منتظم وهى بالترتيب
1-

::-webkit-scrollbar-track{الكود هنا}

وهو المسئول عن الجزء المشار اليه

::-webkit-scrollbar{الكود هنا}

وهو المسئول عن الجزء المشار اليه

::-webkit-scrollbar-thumb{الكود هنا}

وهو المسئول عن الجزء المشار اليه

ومع إستبدال كلمة "الكود هنا" بكود CSS مناسب يمكنك الحصول على شريط التمرير الخاص بك والفريد من نوعه حسب درجة إجادتك للغة CSS3 .

وإليكم بعض التنويهات التى تساعدكم

1-كود تغيير لون الخلفية

background-color:???;

-إستبدل علامات الإستفهام بكود اللون الذى تريده.
درجات الألوان الأكثر إستخداماً

#ddd#26C72E#FF3D8E#17B9F4#F49517

2-كود عمل دوران للأحرف

border-radius:???;

-إستبدل علامات الإستفهام برقم صحيح لتحصل على الدوران الذى تريده.

3-كود للتحكم فى العرض

width:???;

-إستبدل علامات الإستفهام برقم صحيح لتحصل على العرض الذى تريده.

4-كود وضع فترة زمنية لتنفيذ التغيير

transition:???;

-إستبدل علامات الإستفهام بعدد الثوانى التى تريد تنفيذ الكود فيها.

يتبقى شرح خاصية الـ Hover وخاصية الـ Active

أولا:خاصية الـ Hover وهى الخاصية التى تتحكم فى خصائص الشئ عند مرور المؤشر فوقه.
فعلى سبيل المثال "شريط تمرير الفيس بوك" عند مرور المؤشر فوقه نلاحظ أن العرض يزيد واللون يصبح أثقل.
وأيضاً مؤشر متصفح "جوجل كروم" عند مرور المؤشر فوقه نلاحظ أن اللون يصبح أثقل.
-لتفعيل هذه الخاصية نقوم بوضع كلمة hover مسبوقة بهذه النقاط ":" فى الأداة التى نريد عمل هذه الخاصية لها.
لاحظ

::-webkit-scrollbar-track:hover{الكود هنا}

-قم بإستبدال كلمة "الكود هنا" بكود CSS مناسب.

ثانيا:خاصية الـ Active وهى الخاصية التى تتحكم فى خصائص الشئ عند الضغط عليه.
فعلى سبيل المثال "شريط تمرير متصفح "جوجل كروم" عند الضغط عليه بالمؤشر نلاحظ أن اللون يصبح أثقل من اللون الأصلى ومن لون الـ hover أيضاَ.
-لتفعيل هذه الخاصية نقوم بوضع كلمة active مسبوقة بهذه النقاط ":" فى الأداة التى نريد عمل هذه الخاصية لها.
لاحظ