طريقة تغيير شكل شريط التمرير في مدونات بلوجر

2 سبتمبر، 2021

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


في سنة 2014 قمت بمشاركة أكواد CSS لتغيير شكل شريط التمرير يمكنكم مراجعتها عبر الرابط: كيفية تغيير شريط التمرير لمدونتك حتى يناسب القالب الخاص بها.
أما في هذا الموضوع سوف تتمكن من تغيير الشكل الخاص بشريط التنقل في الصفحة او شريط التمرير بأشكال جديدة وفريدة لم تراها من قبل والطريقة بسيطة جدًا عبر الشرح التالي:


من لوحة تحكم بلوجر ->> المظهر –> أنقر على تعديل HTML ثم أبحث عن الرمز ]]></b:skin>
بعد العثور عليه أختر الشكل الذي تريده كما هو مرقم في الصورة الأولى واضف كود أحد الأشكال فوق الرمز ]]></b:skin> مباشرةً

الشكل 1

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;
}

الشكل 2

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;
}

الشكل 3

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;
}

الشكل 4

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;
}

الشكل 5

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;
}

الشكل 6

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;
}

أنقر على حفظ المظهر وقم بمعاينة مدونتك الآن 😊

2 سبتمبر، 2021