طريقة تغيير لون و حجم القائمة الجانبية فى المدونة بلوجر

طريقة تغيير لون و حجم القائمة الجانبية فى المدونة بلوجر



استكمالا للدرس السابق تغيير مكان القائمة الجانبية سوف اشرح كيف تستطيع تغيير لون الخلفية للقائمة الجانبية و تغيير لون العنوان و تغيير الحجم الكلي للقائمة.

احفظ نسخة احتياطية من قالبك قبل العمل


اولا: تغيير لون عنوان القائمة فقط







ستصبح هكذا ...











اذهب الي Layout==>Edit HTML ثم ابحث عن الكود الآتي

#sidebar-wrapper h2 {
color:$colortituloslateral;
font-size:20px;
text-align: center;
font-weight:normal;
line-height:22px;
margin:0pt 0pt 2px;
}


اضف الكود التالي
background-color:#157DEC;

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


ليصبح الكود كالتالي


#sidebar-wrapper h2 {
color:$colortituloslateral;
background-color:#157DEC;
font-size:20px;
text-align: center;
font-weight:normal;
line-height:22px;
margin:0pt 0pt 2px;
}



ثانيا : تغيير لون خلفية القائمة كلها









سيصبح هكذا .......









افتح Edit HTML وابحث عن الكود الاتي

#sidebar-wrapper {
float:left;
margin:0pt 5px 0pt 0pt;
width:180px;
}

و اضف اليه التالي
background-color:
#157DEC;

ليصبح هكذا


#sidebar-wrapper {
float:left;
background-color:#157DEC;
margin:0pt 5px 0pt 0pt;
width:180px;
}

ويمكنك تغيير اللون كما وضحت بالاعلي.


ثالثا : تغيير حجم ( سمك ) القائمة

ستصبح هكذا....






ادخل Edit HTML وابحث عن الكود التالي

#sidebar-wrapper {
float:left;
border: 3px ridge #2554C7;
margin:0pt 5px 0pt 0pt;
width:220px;
}

الجزء الملون بالاحمر هو الجزء المسئول عن حجم القائمة والان غير هذا الرقم الي 250 وتابع الفرق.
-----------------------------------------------------------------------

ملحوظة هامة جدا جدا :

ممكن الاكواد تختلف من تمبلت الي الاخر ولكن مضمونها واحد ولو في مشاكل و مش لاقي الكود... اترك رد بمشكلتك و سوف اساعدك بقدر الامكان.

الموضوع منقول من مدونة عرب بلوج

هناك تعليق واحد:

مدونة اقوى البرامج يقول...

شكرا جزيلا على المعلومه والدرس الجميل
لقد قمت بتطبيقه لدى مدونتى فى بعض الاشياء كنت اود ان اقوم بتغير خلفيه راس الادوات وقمت بالفعل باستخدام الكود الخاص بكى مع تعديلاتى الخاصه اشكرك شكرا جزيلا
sherefshokre.blogspot.com

اخر مواضيع مـدونـــة حـاسـب البــنات