باستخدام مصمم النماذج: كيف تغير لون خلفية عنوان الموضوع المنشور
جميعنا يعلم أنه باستخدام مصمم النماذج فإنه بإمكانك تغيير لون خلفية المشاركة بالكامل (المشاركة + عنوان
الموضوع). ولكن ربما
يرغب البعض في تغيير لون خلفية عنوان الموضوع المنشور في المدونة فقط وبدون تغيير
لون خلفية المشاركة (نص المقالة)، وذلك لكي يستطيع الزوار من تمييز عناوين المقالات
وخصوصاً في الصفحة الرئيسية للمدونة أو يصنع خلفية لعنوان الموضوع بدرجة أغمق
قليلاً عن خلفية المشاركة كنوع من إضافة الجماليات لقالب المدونة.
وتستطيع تحقيق ذلك من خلال مصمم النماذج بإضافة أمر CSS واحد وصغير. والميزة هنا بأنه يمنحك معاينة فورية لمشاهدة النتيجة ومظهر مدونتك .. فإذا أعجبتك النتيجة فباستطاعتك تطبيقها على مدونتك وإن لم تعجبك فلن يتم حفظها.
ولتغيير لون خلفية العنوان:
1. إضغط على علامة تبويب "تصميم" الموجودة في لوحة تحكم المدونة.
2. بعد ذلك إضغط على مصمم النماذج.
3. من قائمة مصمم نماذج Blogger إضغط على متقدم.
4. إضغط على "إضافة CSS" والتي ستجدها في نهاية القائمة التي ظهرت لك كما هو مبين في الصورة التالية.
الآن بإمكانك إضافة أمر الـ CSS التالي
.post-title {background-color:yellow;}
وستجد أن النتيجة قد ظهرت مباشرة في الجزء المخصص لمعاينة النموذج والموجودة في النصف السفلي لمحرر النماذج.
وبالعودة إلى أمر الـ CSS السابق، فستجد أنني قمت بتغيير
لون خلفية جزء من الأمر إلى اللون الأصفر لأنه هو المسؤول عن إظهار لون خلفية
العنوان. فإذا قمت بتغيير كلمة Yellow وتعني بالعربية اللون الأصفر، إلى Red وتعني
اللون الأحمر فسيتم تغيير خلفية العنوان إلى اللون الأحمر مباشرةً.
وهكذا.....
كما يمكنك تخصيص لون من عندك بعيداً عن الألوان الأساسية (Yellow, Red, Blue, Black, White)، وذلك بكتابة كود اللون الذي ترغب به (مثال: 222456#) بحيث تكون علامة (#) في البداية ثم يتبعها 6 أرقام وذلك للوصول إلى الألوان المتدرجة بين الألوان الأساسية. وتستطيع اخيتار كود اللون المناسب لك من خلال هذا الموقع Color Picker أو باستخدام برنامج الرسام الموجود في جميع إصدارات الويندوز. وسأتناول في حديثي الآن موقع Color Picker.
بعد دخولك للموقع السابق، ستظهر لك صفحة تمكنك من اختيار اللون الذي ترغب به وستحوله إلى كود اللون المكون من 6 أرقام. وستجد في الصورة السابقة وجود سهمين الأول من اليمين هو لتحديد اللون الأساسي والسهم الثاني لتحديد تدريج اللون. أما الأرقام الموجودة في المستطيل فهي كود اللون الذي ستقوم بنسخه ولصقه بعد إضافة علامة (#)في أمر الـ CSS السابق بدلاً من كلمة Yellow ليصبح الكود بالشكل التالي
.post-title {background-color:#E01B6A;}
جزى الله خيرا كل من ساهم فيه