Post Top Ad

Your Ad Spot

الجمعة، 15 يونيو 2012

تغير لون Scrollbars سكرول بار المدونة الشريط الجانبى والسفلى بالمتصفح

تغير لون السكرول بار الأفتراضى الى لون اخر كما تريدة انت ليتناسب مع شكل استايبل المدونة لمن لا يعرف Scrollbars هو الشريط الجانبى المتواجد بحواف المتصفج او بأسفلة على حسب مساحة تصميم الأستايل اذا كان محتوى المدونة كبير سيظهر السكرول بار بحواف المتصفح الذى من خلالة ان تنتقل الى اعلى اسفل لتشاهد المحتوى او الانتقال الى اعلى هذه مجرد تعريف لكل من لا يعرف Scrollbars عندما يأتى المصمم ويقوم بتصميم قالب جديد يتجاهل خاصية لون السكرول بار ليبقى على الشكل الأفتراضى المعروف ويترك هذه المهمة لمن يمتلك القالب ويضعها بالمدونة وهو الذى يقوم بتغير الون على حسب اذواقة فهذه التدوينة ستعرفكم طريقة تغير لون Scrollbars المدونة الى اى لون تريدة انت ليتناسب مع شكل استايل المدونة الطريقة بسيطة وهو عبارة عن كود بخاصية css تضعه بقالب المدونة ليتم تغير لون Scrollbars  الافتراضى الى لون اخر
قبل ما اضع لكم طريقة تغير لون السكرول بار فهذه صورة للشكل الأفتراضى




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


الان قم بالضغط على زر تحرير HTML


اضغط الأن على ازرر CTRL+F من لوحة المفاتيح الكيبورد ليظهر لك خاصية البحث :
الأن قم بالبحث عن هذه الكلمة :
‪</head>‬
كما واضح لنا بالصورة التالية تم البحث عن الكلمة المطلوبة داخل اكواد القالب :


الأن سنضع هذا الكود بأعلى الكلمة الذى بحثنا عنها :

<style type='text/css'>
html {
scrollbar-arrow-color:#000000;
scrollbar-track-color:#000000;
scrollbar-face-color:#FF0000;
scrollbar-highlight-color:#909400;
scrollbar-3dlight-color:#000000;
scrollbar-darkshadow-color:#473624;
scrollbar-shadow-color:#BFB186;
}
</style>
صورة توضيحية بتركيب الكود بالمكان الصحيح وكما تلاحظون تم وضع الكود بأعلى كلمة ‪</head>‬


بعد تركيب اكود قم بالضغط على زر حفظ النموذح وبعد التغير ستلاحظ بتغير شكل السكرول بار صورة موضحة :


ملحوظة هامة : لتغير اللون من خلال الكود قم بتغير هذه الأكود #000000 اى بعد كلمة color
========================
اليك خدمة تغير الالون :





ملحوظة اخرى : هذه الخاصية لا تظهر بمتصفح الفايرفوكس لكنها تعمل بشكل جيد بمتصفح اكسبلور
اذا اعجبك الدرس لا اطلب منك غير كلمة شكر

هناك 16 تعليقًا:

  1. جزاك الله خير

    ردحذف
    الردود
    1. شكرا لك يا اخى الكريم على المشاركة واسف على تأخير الرد

      حذف
  2. جميلة جدا الاضافة

    ردحذف
    الردود
    1. شكرا لك يا اخى الكريم على المشاركة واسف على تأخير الرد

      حذف
  3. جزاك الله كل خير اضافة ممتازة

    ردحذف
    الردود
    1. شكرا لك يا اخى الكريم على المشاركة وانت المميز بمرورك الطيب

      حذف
  4. شرحك واضح ومفهوم شكرا لك

    ردحذف
    الردود
    1. شكرا لك يا اخى الكريم على المشاركة واسف على تأخير الرد

      حذف
  5. ما الفائدة منها وهى لا تعمل على الفايرفوكس وجوجل كروم

    ردحذف
    الردود
    1. بالفعل يا اخى الكريم هى ليست لها فائدة لكن من الواجب على بأن اضع اى طريقة تخص بلوجر فهذه الطريقة تعمل على متصفح اكسبلور فقط وهذا ليس ذنبى انا اسف يا اخى الكريم

      حذف
  6. مبتشتغلش على الأوبرا ولا الفاير فوكس ولا الكروم .. ياريت صاحب الموضوع يوضحلنا هي بتشتغل على ايه أو لو فيها غلط يعقب عليه وشكرا

    ردحذف
    الردود
    1. اخى الكريم انا واضع ملحوظة تبين لنا بان هذه الأضافة تعمل على متصفح انترنت اكسبلور

      حذف
  7. مشتغلتش عندى فى المدونة
    يا ريت يوضح

    ردحذف
    الردود
    1. اخى الكريم ممكن تجرب على متصفح اكسبلور
      للأسف يا اخى الكريم هذه الخاصية تعمل بشكل سليم على متصفح انترنت اكسبلور ولقد قمت بتجربتها

      حذف
  8. شكراً اقل ما استطيع قوله

    ردحذف
  9. شكراً اقل ما استطيع قوله

    ردحذف

قال تعالى ( مَا يَلْفِظُ مِن قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ )

Post Top Ad