القائمة الرئيسية

الصفحات

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

يسعى الكثير من المدونين وأصحاب المواقع وحتى مطوري مواقع الويب الى إضفاء بعض الجماليات على مواقعهم وهذا بالإستعانة ببعض أكود CSS.
فلربما تكون قد لاحظت على بعض مواقع الويب الشهيرة و التي يوجد بها شريط التمرير بلون مختلف ،وتسائلت كيف يمكن الحصول على مثل هذا الشريط الجانبي الجميل؟
و في تدوينة اليوم على موقعنا الجعبة التقنية  سنشرح كيفية إضافة هذا الشريط الجانبي في القالب الخاص بك. 
فكما هو معلوم فجميع المتصفحات لديها شريط تمرير خاص بها للصعود والنزول أثناء التصفح ولكن بشكله الافتراضي يبقى غير محبب لدى الغالبية.
 فإذا قمنا بإضافة بعض الأكواد البرمجية المرفقة أسفل هذه التدوينة في القالب الخاص بنا، وتنفيذه بطريقة صحيحة فستلاحظ عند فتح موقع الويب الخاص بك في أي متصفح  زر تمرير أنيق وملون داخل النافذة.
 إذا بإذن الله سنتمكن ممن تحقيق هذا وجعل  شريط التمرير الخاص بكبنا جذاب وجميل وملون حسب ذوقنا و بطريقة أنيقة ستلائم بالتأكيد موقعك أو مدونتك. 
لذا دعونا نبدا في شرح  كيفية تثبيت أداة أداة التمرير الخاصة بـ Animated CSS داخل قالب بلوجر
طريقة تركيب إضافة الشريط الجانبي للصعود والنزول الملون
قبل القيام بهذه الخطوات قم بأخذ نسخة إحتياطية من قالبك للرجوع اليها عند حدوث خطأ ما
  1. - ندخل الى تحرير القالب HTML
  2. - نأخذ نسخة إحتياطية من القالب للعودة إلها في حالة الخطأ
  3. - نبحث على هذا الوسم : ]]></b:skin> 
  4. - وهذا بالضغط على Ctrl + F5 في لوحة المفاتيح
  5. - نضع أحد أكود CSS المرفقة قبل الوسم ]]></b:skin>
  • التأثير الأول: تأثير التمرير على صفحة الويب باللون الأسود
إضغط هنا لمعاينة التأثير الأول الأسود
إنسخ هذا الكود 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)
    }
    ℹ️ إخلاء المسؤولية ☟
    ملاحظة مهمة جدا:
    تبرئة للذمة أمام الله أولا ثم امام الجميع ثانيا ، فإننا نصرح بأننا قمنا بطرح هذا الموضوع ليستفيد منه الزوار الكرام من جانبه الايجابي فقط، لأننا لسنا على دراية بما تحتويه الملفات الاخرى من محتوى ضار او غير اخلاقي.
    و لو تبين لنا الأمر فاننا سنقوم بحذف الموضوع و الاعتذار للجميع
    كما نوصي أي شخص له دراية او ملاحظة بخصوص أي محتوى مسيئ بأن يقوم بتنبيهنا في صندوق التعليقات (كفاعل خير و ناصح جزاه الله)
    كما أن موقع الجعبة التقنية غير مسؤول عن التطبيقات و لا على المحتوى الذي يتم عرضه داخلها و لا عن أي تغييرات قد تطرأ عليها مستقبلا بعد طرحها للزائر لتحميلها والإستفادة منها.
    هدفنا هو نشر المعلومة لعامة الناس بالمجان ،كما حصلنا عليها بدورنا في مواقع أخرى
    هل اعجبك الموضوع :

    تعليقات

    ملاحظة مهمة جدا
    نحن لم نقم بأي تعديل لهذا الملف وتم كتابة المقال دون المساس بحقوق الآخرين
    نحن لا نشجع على الترويج للمحتوى المهكر او المقرصن او ما يسيء للاخرين
    نحن لا ندعي امتلاكنا للتطبيقات و البرامج المعروضة على الموقع و لا لحقوقها
    نحن نقوم بكتابة مقال تقني عن التطبيقات و البرامج التي نراها ذات منفعة للمستخدم و نتيح له امكانية تحميلها من موقعها الرسمي.
    المقالات المنشورة على الموقع هي ملك لمدونة الجعبة التقنية ✍
    نطلب من كل من أسأنا له عن غير قصد أن يتصل بنا لتصحيح الخطأ مع تقديمنا اعتذارا له⁦ ❤️⁩