الجمعة، 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 التعليقات

جزاك الله خير

جميلة جدا الاضافة

جزاك الله كل خير اضافة ممتازة

شرحك واضح ومفهوم شكرا لك

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

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

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

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

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

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

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

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

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

شكرا لك يا اخى الكريم على المشاركة وانت المميز بمرورك الطيب

شكراً اقل ما استطيع قوله

شكراً اقل ما استطيع قوله

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

الرموز التعبيريةالرموز التعبيرية