شرح طريقة تغيير ألوان مدونة بلوجر

السلام عليكم ورحمة الله 

شرح كيفية تغيير ألوان المدونة والتحكم في الستايلات

أول درس في "سلسلة من الدروس لتوضيح كيفية التحكم بمدونتك"

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

لكن هذا غير صحيح.. تابع معنا لتتعلم الطريقة السهلة والسريعة لتعديل ستايل الموقع.

يُنصح البعض بتحميل عدة إضافات مثل: colorzilla أو FireBug 
لمساعدتك في التحكم في استايلات الموقع، لكننا هنا سنشرح طريقة أسهل وأسرع، لست بحاجة إلا لمتصفح كروم فقط.

نبدأ الشرح على بركة الله..

افتح الموقع أو المدونة 

اختر الصفحة التي تريد التعديل عليها.. 

اختر الجزء الذي تريد تعديل اللون الخاص به

هنا سنقوم بتغيير اللون الخاص بالقائمة أعلى المدونة

اختر بزر الماوس اليمين "فحص" أو inspect element
وبإمكانك فتحها من خلال اختيار F12




ستفتح معك قائمة أسفل المتصفح، القائمة تكون مقسومة لجزئين
الجزء الأول: هو أكواد css لكل عنصر
الجزء الثاني: هو أكواد html لكل عنصر

لاحظ أنك كل ما اخترت عنصر معين html سيظهر لك ما يقابله في جهة أكواد css



الآن قلنا نريد تغيير لون القائمة العلوية 
نختار القائمة، نضغط باليمين بزر الماوس، فحص
ثم تظهر القائمة في الأسفل




نلاحظ كود ال html أنه عند التأشير عليه يشير إلى القائمة في الأعلى
نقوم الآن بالتوجه لكود ال css
يظهر لنا من ضمن خصائص هذا العنصر لون الخلفية: 

.topouter-wrapper {

    background: #f09e2e;

    position: relative;

    top: 0;

    right: 0;

    overflow: hidden;

    width: 100%;

    min-height: 45px;

}

لدينا في هذا الكود اسم الكلاس الذي سنعدل خصائصه وهو topouter-wrapper وهذا يختلف من مدونة لأخرى، سنستخدمه في الخطوات القادمة..

أما الخاصية التي نود تعديلها هي: background

نقوم بتغيير اللون كيفما تشاء، مع العلم أنه بإمكانك كتابة اللون بطريقتين

مثال : لإختيار اللون الأسود: 

background: #000000;

background: Blcak;

هكذا تكون قد غيرت لون القائمة العلوية، حسنا هل انتهينا؟
ليس بعد :) بقية الخطوة الأخيرة وهي الأهم..

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

لتثبيت اللون الجديد للقائمة، ابتع الخطوات التالية:
1. الدخول إلى لوحة التحكم الخاصة بمدونات بلوجر 
2. الانتقال إلى مدونتك
3. توجه إلى خيار قالب (يفضل قبل عمل أي تغيير بالأكواد هو حفظ نسخة احتياطية من القالب
تجنبا لأي مشكلة قد تتسبب بها من غير قصد.)
4. تحرير html (الآن أنت في منطقة كود القالب/النموذج)
5. انسخ اسم الكلاس الذي قمت بتغيير إحدى خصائصه وهنا اسمه "topouter-wrapper"
6. ابحث عن اسم الكلاس في كود القالب.. من خلال استخدام ctrl + F سيظهر لك نفس الكود الذي قمنا بإجراء تعديل على خاصية لون الخلفية.
7. قم بتغيير لون الخلفية إلى اللون الذي اخترته أثناء التجربة على المتصفح
8. حفظ النموذج، ثم معاينة.


فيديو يوضح الطريقة بشكل عملي



انتهى :)