الاثنين، 18 يونيو 2012

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

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



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

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

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






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











اذهب الي 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 وتابع الفرق.
-----------------------------------------------------------------------

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

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

هل اعجبك هذا الموضوع ؟

هناك 17 تعليقًا:

  1. شكرا موضوع مفيد فعلا
    وشرح غايه في الروعة بالتوفيق
    http://abda3design.blogspot.com

    ردحذف
  2. واجهت نفس ألمشكلة لم أجد لها حل رغم شرحك أريد تصغير سمك ألطول
    th3progate.blogspot.com

    ردحذف
  3. أزال المؤلف هذا التعليق.

    ردحذف
    الردود
    1. لديك بعض العناوين الجانبية في المدونة مثل كن من اصدقاء المدونة اريد التحكم في طول اللون

      حذف
    2. بالنسبة لمدونتي فهذا ليس لون انما هي صوره
      واذا ارت وضع صوره مصمه لديك او صممها لك احد يمكن ان اوفيك بالشرح

      حذف
  4. وعلي سبيل المثال لدي مدونة اخري هي مدونة البارق
    http://elbariqnet.blogspot.com/
    والصوره الجانبيه لها هي في هذا الرابط

    http://2.bp.blogspot.com/_3wbGbyR2A8Q/S3mTCV19mrI/AAAAAAAAAT8/XqBkMHGYFLA/s1600/maroc-se2.jpg

    ردحذف
  5. نعم اخي اريد وضع مثل الصورة التي لديك
    و اعتدر عن الازعاج
    بارك الله فيك

    ردحذف
    الردود
    1. حسنا اخي ساوافيك بالشرح خلال اسبوع

      حذف
    2. اخي نظرا لديق الوقت ساشرح هنا في ايحاز

      في الكود الاول في هذه الصفحة ضع الكود التالي

      -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 {
      ثم عدل علي لبصوره كما تريد ان لم تفهم من هذا الشرح
      فسوف اشرح في بالتفصيل لكن فيما بعد

      حذف
  6. @Zokora Brade ماذا تريد يا اخبي بالضبط

    ردحذف
  7. شكرا لك ما قصرت

    مدونة مدون لخدمات بلوجر والفوتوشوب
    http://mdwanblog.blogspot.com/

    ردحذف
  8. أخي إضافة صورة للعناوين ألجانبية

    ردحذف
  9. @Zokora Brade

    السلام عيكم ورحمة الله وبركاته
    هذا فديو شرح

    http://youtu.be/Nn6UaC2_3OM

    ردحذف

جميع المواد الواردة في هذا الموقع حقوقها محفوظة لذى ناشريها ،ممنوع النقل بدون تصريح أو ذكر للمصدر . Privacy-Policy | إتفاقية الإستخدام

إن جميع المواد الموجودة في الموقع تعبر عن آراء كتابها ولاتعبر عن رأي الموقع لذلك لايتحمل الموقع أي مسؤوليات تجاهها

هذا قالب المهندس عبدالرحمن احمد وهذه حقوق ملكية فكرية