فلربما تكون قد لاحظت على بعض مواقع الويب الشهيرة و التي يوجد بها شريط التمرير بلون مختلف ،وتسائلت كيف يمكن الحصول على مثل هذا الشريط الجانبي الجميل؟
و في تدوينة اليوم على موقعنا الجعبة التقنية سنشرح كيفية إضافة هذا الشريط الجانبي في القالب الخاص بك.
فكما هو معلوم فجميع المتصفحات لديها شريط تمرير خاص بها للصعود والنزول أثناء التصفح ولكن بشكله الافتراضي يبقى غير محبب لدى الغالبية.
فإذا قمنا بإضافة بعض الأكواد البرمجية المرفقة أسفل هذه التدوينة في القالب الخاص بنا، وتنفيذه بطريقة صحيحة فستلاحظ عند فتح موقع الويب الخاص بك في أي متصفح زر تمرير أنيق وملون داخل النافذة.
إذا بإذن الله سنتمكن ممن تحقيق هذا وجعل شريط التمرير الخاص بكبنا جذاب وجميل وملون حسب ذوقنا و بطريقة أنيقة ستلائم بالتأكيد موقعك أو مدونتك.
لذا دعونا نبدا في شرح كيفية تثبيت أداة أداة التمرير الخاصة بـ Animated CSS داخل قالب بلوجر
طريقة تركيب إضافة الشريط الجانبي للصعود والنزول الملون
قبل القيام بهذه الخطوات قم بأخذ نسخة إحتياطية من قالبك للرجوع اليها عند حدوث خطأ ما
- - ندخل الى تحرير القالب HTML
- - نأخذ نسخة إحتياطية من القالب للعودة إلها في حالة الخطأ
- - نبحث على هذا الوسم : ]]></b:skin>
- - وهذا بالضغط على Ctrl + F5 في لوحة المفاتيح
- - نضع أحد أكود CSS المرفقة قبل الوسم ]]></b:skin>
موضوع مقترح لك: طريقة إضافة خاصية ZIPPY لإخفاء المحتوى في مدونات بلوجر
- التأثير الأول: تأثير التمرير على صفحة الويب باللون الأسود
إضغط هنا لمعاينة التأثير الأول الأسود
إنسخ هذا الكود CSS
::-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;
}
إضغط هنا لمعاينة التأثير الثاني البرتقالي
إنسخ هذا الكود CSS
::-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)
}
إقرأ هذا الموضوع:إضافة خاصية العداد الزمني قبل مغادرة صفحة التحميل في بلوجر
- التأثير الثالث: تأثير التمرير على صفحة الويب باللون الأزرق
إضغط هنا لمعاينة التأثير الثالث الأزرق
إنسخ هذا الكود CSS
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
border-radius: 10px;
}
::-webkit-scrollbar
{ width: 10px;
background-color: #F5F5F5;
} ::-webkit-scrollbar-thumb { background-color: #3366FF;
border-radius: 10px;
background-image: -webkit-linear-gradient(0deg,
rgba(255, 255, 255, 0.5) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0.5) 75%,
transparent 75%,
transparent)
}
مرحبا بكم على مدونة الجعبة التقنية
نشكركم على زيارة موقعنا والإستفادة من المحتوى المقدم
سيتم الرد على استفساراتكم فور دخول الأدمن
شكرا لكم