إبحث في موسوعة التدوين

باستخدام مصمم النماذج: كيف تغير لون خلفية عنوان الموضوع المنشور


جميعنا يعلم أنه باستخدام مصمم النماذج فإنه بإمكانك تغيير لون خلفية المشاركة بالكامل (المشاركة + عنوان الموضوع). ولكن ربما يرغب البعض في تغيير لون خلفية عنوان الموضوع المنشور في المدونة فقط وبدون تغيير لون خلفية المشاركة (نص المقالة)، وذلك لكي يستطيع الزوار من تمييز عناوين المقالات وخصوصاً في الصفحة الرئيسية للمدونة أو يصنع خلفية لعنوان الموضوع بدرجة أغمق قليلاً عن خلفية المشاركة كنوع من إضافة الجماليات لقالب المدونة.


وتستطيع تحقيق ذلك من خلال مصمم النماذج بإضافة أمر 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;}

وعند وضع هذا الأمر الجديد في مصمم النماذج لبلوجر.. ستظهر خلفية العنوان باللون الذي اخترته من موقع Color Picker.



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

  1. تدوينة جميلة .. ويعطيك العافية أخي

    ردحذف
  2. الف شكر لك اخي العزيز

    ردحذف
  3. موضوع جميل ورائع
    http://maazikatv.blogspot.com

    ردحذف
  4. السلام عليكم ورحمة الله

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

    ردحذف
  5. هنا
    فريق
    مختص
    في تصميم وبرمجة اكواد CSS وهتمل وغيره
    www.codey.arabe.pro

    ردحذف
  6. موضوع رائع
    برجاء زيارة مدونة التسويق الاليكتروني ( خمسه تسويق)
    http://5taswek.blogspot.com/

    ردحذف
  7. مشكور أخي استفدت من دروسك

    http://ateismoespanarab.blogspot.com.es/

    يعطيك العافية حبيبنا

    ردحذف

نتشارك المعرفة والخبرات مع المدونين العرب ... أترك تعليقك ورأيك دعماً منك لنا.