• تغيير شكل 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 {} / * شريط السحب لتغيير الحجم * /
    
    عليك فقط استخدام تلك التي تحتاجها للتعديلات وليس من الضروري استخدام جميع القواعد
    ان واجهت اي مشاكل فباب التعليقات مفتوح . . . بالتوفيق 😍

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

    روابط الموضوع للنسخ

    رابط
    HTML
    BBCode
    يسمح بنقل الموضوع لكن مع ذكر المصدر في نهاية الموضوع المنقول ووضع رابط الموضوع الأصلي
    تغيير شكل Scrollbar ببلوجر

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

    2 تعليقات
    كيف تعلق ؟

    1. غير معرف9/06/2020

      أزال أحد مشرفي المدونة هذا التعليق.

      ردحذف
      الردود
      1. ممنوع وضع روابط بالتعليقات خصوصا روابط المدونات قليلة الأدب والتي تخالف شرع الله 😡 😤

        حذف

    contact-us

    الاسم

    بريد إلكتروني *

    رسالة *