كيفية إضافة شريط جانبي لقالب البلوجر

السلام عليكم ورحمة الله و بركاته

باسم الله الرحمن الرحيم

بعد أن قدمنا يوم أمس شرحا عن كيفية تغيير قالب البلوجر العادي إلى صفحة بيضاء لتصميم قالب جديد ، أتيناكم اليوم بتكملة للشرح بإضافة " السايد بار أو الشريط الجانبي " .

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

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

1- تحليل هيكل وأسلوب القالب.

2- إضافة مجال جديد للتحرير.

3- تعديل الإستايل.

نعلم أنه يجب أن يكون لديك بعض المعلومات عن الـ "HTML"  و "CSS"  ، وتكون لديك نظرة عن القالب الذي ستقوم بصنعه، بالفعل ستقوم بصنع قالب عادي  ومن بعد ذلك طور مهاراتك.....

ـ تحليل هيكل وأسلوب القالب:

- بالنسبة للغالبية من القوالب، وخاصة منها بلوجر، لها بنية مشابهة جدا، هيدر مع الوصف، مجمع "Wrapper" مع العمود الرئيسي:"main Wrapper" ، الشريط الجانبي، وتذييل"footer" مع الاعتمادات وبعض المعلومات الأخرى. 

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

<div id='content-wrapper'>
 <div id='main-wrapper'>
  <b:section class='main' id='main' showaddelement='no'>
  <b:widget id='Blog1' locked='true' title='Blog Entries' type='Blog'/>
  </b:section>
 </div>

 <div id='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar' preferred='yes'>
   <!-- Sidebar's widgets and gadgets code -->
  </b:section> 

 </div>
</div>

هذا يختلف قليلا من قالب إلى آخر ولكن بشكل عام هي مشابهة جدآ. يتم تجميع و تشكيل كل من المجمع الرئيسي، ومجمع الشريط الجانبي: "Sidebar-wrapper" ، حسب استايل أو نمط CSS التي تحدد كيفية العرض، والعمق وبعض الميزات الأخرى.

لذا يجب عليك التخطيط و القيام بكل هذا العمل وهو ليس بصعب ، فقط قم بإضافة هذه الكودات.

كما أضفنا في السابق كود الـ HTML  للشريط الجانبي و الآن سنزيد كود الـ  CSS  وهو الذي سيقوم بتعديل نمط الشريط الجانبي..

#main-wrapper {
float:left;
width:620px;
}
#sidebar-wrapper {
float:right;
width:300px;

}

لذا سيكون عليك إضافة مجمع لمحتوى الرسائل في القالب وهذا يكون فقط بـالوسوم التالية:

<div id="main-wrapper"> هنا يكون المحتوى  </div>

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

كل من لديه استفسار أو تعقيب فليضعه في تعليق و ما علي إلا أن أجيب في أسرع وقت....فتعليقاتكم و اهتمامكم يزيدان في كثرة المواضيع.

السلام عليكم