طريقة تغيير لون و حجم القائمة الجانبية فى المدونة بلوجر
استكمالا للدرس السابق تغيير مكان القائمة الجانبية سوف اشرح كيف تستطيع تغيير لون الخلفية للقائمة الجانبية و تغيير لون العنوان و تغيير الحجم الكلي للقائمة.
احفظ نسخة احتياطية من قالبك قبل العمل
اولا: تغيير لون عنوان القائمة فقط
ستصبح هكذا ...
اذهب الي 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 وتابع الفرق.
-----------------------------------------------------------------------
ملحوظة هامة جدا جدا :
ممكن الاكواد تختلف من تمبلت الي الاخر ولكن مضمونها واحد ولو في مشاكل و مش لاقي الكود... اترك رد بمشكلتك و سوف اساعدك بقدر الامكان.
D:
ردحذفشكرا موضوع مفيد فعلا
ردحذفوشرح غايه في الروعة بالتوفيق
http://abda3design.blogspot.com
واجهت نفس ألمشكلة لم أجد لها حل رغم شرحك أريد تصغير سمك ألطول
ردحذفth3progate.blogspot.com
اي طول بالضبط تقصد يا اخي
حذفأزال المؤلف هذا التعليق.
ردحذفلديك بعض العناوين الجانبية في المدونة مثل كن من اصدقاء المدونة اريد التحكم في طول اللون
حذفبالنسبة لمدونتي فهذا ليس لون انما هي صوره
حذفواذا ارت وضع صوره مصمه لديك او صممها لك احد يمكن ان اوفيك بالشرح
وعلي سبيل المثال لدي مدونة اخري هي مدونة البارق
ردحذفhttp://elbariqnet.blogspot.com/
والصوره الجانبيه لها هي في هذا الرابط
http://2.bp.blogspot.com/_3wbGbyR2A8Q/S3mTCV19mrI/AAAAAAAAAT8/XqBkMHGYFLA/s1600/maroc-se2.jpg
نعم اخي اريد وضع مثل الصورة التي لديك
ردحذفو اعتدر عن الازعاج
بارك الله فيك
حسنا اخي ساوافيك بالشرح خلال اسبوع
حذفاخي نظرا لديق الوقت ساشرح هنا في ايحاز
حذففي الكود الاول في هذه الصفحة ضع الكود التالي
-moz-background-inline-policy:continuous;
background:url("http://2.bp.blogspot.com/_3wbGbyR2A8Q/S3mTCV19mrI/AAAAAAAAAT8/XqBkMHGYFLA/s1600/maroc-se2.jpg") no-repeat scroll right center transparent;
مباشرة بعد
#sidebar-wrapper h2 {
ثم عدل علي لبصوره كما تريد ان لم تفهم من هذا الشرح
فسوف اشرح في بالتفصيل لكن فيما بعد
لم أفهم شيء أخي
ردحذفأخي ممكن مساعدة
ردحذف@Zokora Brade ماذا تريد يا اخبي بالضبط
ردحذفشكرا لك ما قصرت
ردحذفمدونة مدون لخدمات بلوجر والفوتوشوب
http://mdwanblog.blogspot.com/
أخي إضافة صورة للعناوين ألجانبية
ردحذف@Zokora Brade
ردحذفالسلام عيكم ورحمة الله وبركاته
هذا فديو شرح
http://youtu.be/Nn6UaC2_3OM