تغيير خلفية مدونة بلوجر عن طريق تحرير html

بسم الله الرحمن الرحيم
لا يلزم في هذا الدرس أن تكون خبيرا في تعديل صفحات الانترنت بل يكفي أن تكون لديك مدونة في بلوجر .
نبدأ ! نعم نبدأ فإنا لا أجيد كتابة المقدمات.
لنفرض أنك تريد تغيير لون خلفية الصفحة أو تضع صورة أو صور مكررة ، فكل هذا سيكون بإضافة كود معين لكل منهم في صفحة الأكواد
1- اذهب إلى لوحة تحكم مدونتك ثم اختر قالب ثم اضغط على الزر تحرير HTML وسوف تظهر لك هذه الصفحة

لتغير لون الصفحة عليك البحث عن هذا الكود أو مثله ( استخدم صندوق البحث للسرعة واكتب أكبر قدر من الكلمات لإيجاد الكود بشكل أسرع ، في آخر الدرس هناك شرح لكيف نظهر صندوق البحث الخاص بالاكواد )

/* Content
----------------------------------------------- */
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
}

لاحظ في الكود السابق السطر الذي باللون الأحمر وهو الخاص بخلفية الصفحة

  background: $(body.background);

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

تغير الخلفية إلى لون معين 

إذا أردنا تغيير لون الصفحة مثلا إلى اللون الاخضر فنستبدل $(body.background  إلى رمز اللون الأخضر وهو #00FF00

background:#00FF00;

ويمكنك الحصول على رموز الالوان من خلال برامج معينة أو من مواقع في الانترنت مثل هذه الصفحة
http://www.w3schools.com/tags/ref_colorpicker.asp

تغيير الخلفية إلى صورة

تغيير الخلفية إلى صورة واحدة

لتغيير الخلفية إلى صورة واحدة فنستبدل  $(body.background إلى رابط للصورة في الانترنت وإذا كانت الصورة في جهازك فيجب أن ترفعها باستخدام مواقع رفع الصور وتقوم بنسخ رابط الصورة التي رفعتها فسيكون على الشكل التالي

background:url(هنا رابط الصورة) no-repeat center;

مثال

background:url(http://www.m5zn.com/uploads/2010/8/17/photo/081710100848s8p36tz.jpg) no-repeat center;

تغيير الخلفية إلى صور متكررة

 لتغيير الخلفية إلى صور متكررة وهذا ما يحدث غالبا في صور الزخارف والاشكال الهندسية فيتم بنفس طريقة تغيير الصورة الواحدة مع تغيير قيمة no-repeat إلى repeat

---------------------------------------------------------------------------------------------------------------------

طريقة ظهور صندوق النص الخاص بالاكواد

انقر على أي مكان في الاكواد ثم اضغط على المفتاحين  ctrl + f من لوحة المفاتيح ليظهر لك صندوق البحث في الأعلى مثل ما في الصورة الآتية

-------------------------------------------------------------------------------------------------------------------------------

انتهى الدرس وأي استفسار فيسعدني وضعه في التعليقات
دمتم بخير