الخميس، 25 يونيو 2009

سلسلة تحديث قالب المدونة: استخدام صورة كخلفية لقالب المدونة

تحدثنا فى الدرس السابق عن كيفية إضافة بنر خاص بمدونتك بعدة طرق , أما اليوم سنقدم درسا بسيطا ألا وهو وضع صورة كخلفية لمدونتك . ملحوظة : تم اس... thumbnail 1 summary

تحدثنا فى الدرس السابق عن كيفية إضافة بنر خاص بمدونتك بعدة طرق , أما اليوم سنقدم درسا بسيطا ألا وهو وضع صورة كخلفية لمدونتك .
ملحوظة : تم استخدام قالب "Minima" فى الدرس السابق وسأكمل هذا الدرس بنفس القالب وربما باقي الدروس حتى إشعار لآخر.




لاحظ عزيزي المدون أننا قد استخدمنا صورة من صور الفيكتور لعمل البنر وكان باللون البرتقالي الجذاب , فعند اختيارك للبنر الخاص بموقعك أرجو الانتباه لتناسق الألوان عند اختيارك صورة الخلفية وألوان الخطوط أيضا .




وها أنا أقدم بين يديك بعض من الخلفيات الرائعة نتيجة بحثي الخاص على الشبكة :





تعديل قالب المدونة

بعد ذلك قم بالدخول إلى حسابك ثم من قائمة "Layout" اضغط على "Edit HTML" ثم قم بالبحث عن هذا الكود :


body {background: $bgcolor;



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





url(the_url_of_your_image )




ليصبح الكود النهائى بهذا الشكل :


body { background:$bgcolor
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqdRKqkqDP36kM2AFtS4MYgqp38TxQp7b6PrgsoSX5olv6YM54jUuNg2oQTWVbjQixAFaxaTJwOS6JKiP-RwqW0fUpytXFEcUauO069uGGOvdOA2P4IsPcRD40XNtXU-dljKC9KjdBev0/s400/wood92.jpg);





حيث سيتغير رابط صورتك بالطبع , ثم اضغط على "Save Template" .








يمكنك التحميل من هنا .

وبعض من صور الفيكتور أيضا :



يمكنك تحميلها من هنا .

وبعد الانتهاء من اختيار الخلفية المناسبة قم برفع الصورة إلى موقع مستضيف أو ارفع الصورة إلى البلوجر عن طريق عمل موضوع خاص وضع به الصور والخلفيات الخاصة بموقعك ولا تقم بنشرة بل احفظه كمسودة لديك "Save As Draft" كما ذكرنا سابقا .




تبقى خطوة واحدة وهى إظهار المنطقة الأساسية "The Main Section" أى المنطقة التى يوجد بها الـ "Post" و "Sidebar" وذلك عن طريق تغيير لون خلفية هذا الجزء .

قم بالبحث عن هذا الكود :




#outer-wrapper {




قم بإضافة هذا السطر :



background: #ffffff;




وبالطبع فإن "#ffffff" هو رمز اللون الابيض ويمكنك تغييرة كما تفضل راجع أكواد و أسماء الألوان .


وها هى النتيجة النهائية :




انتهى .

هناك تعليقان (2)

  1. مشاء الله عليك اللهم بارك
    بس بعد اذنك سؤال انا عوز اتعلم اعمل تمبلت للبوجر بنفسى يعنى مثلا احط صورتى خلفيه

    ردحذف