19‏/09‏/2016

Admin

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

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

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

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

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

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

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

افتح الموقع أو المدونة 
اختر الصفحة التي تريد التعديل عليها.. 

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


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

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

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

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


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

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

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

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

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


نلاحظ كود ال 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;

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


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

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

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


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



انتهى :)

4 شآركوا بالموضوع

شآركوا بالموضوع
ِِAhmed Sobhy
المشرف
20‏/07‏/2017 5:06:00 ص

ممكن القالب المستخدم فى الشرح

رد
avatar
Dros4U دروس4يو
المشرف
20‏/07‏/2017 8:18:00 م

أهلا أحمد :)
تفضل:
http://www.dros4u.com/2016/07/template-blogger-perfetta.html

رد
avatar
Dros4U دروس4يو
المشرف
20‏/07‏/2017 8:18:00 م

شكرا لميس :D

رد
avatar

التعليقآت

سجل بريدك الإلكتروني هنا لتصلك أحدث المواضيع