تكويد وتصميم قالب بلوجر تقسيم منطقة المحتوى

تكويد قالب بلوجر تقسيم منطقة المحتوى

الدرس السابق من تكويد قالب بلوجر قمنا بتصميم وتكويد الهيدر

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


كما تحدثنا في الدرس السابق سنقوم باستخدام Bootstrap نظام الشبكة Grid system
الذي يضم 12 من الصفوف ( class ). الدرس السابق ⏪ تصميم الهيدر
سنقوم باستخدام الكلاسات التالية:

<div class="col-md-8"> منطقة عرض المواضيع </div>

<div class="col-md-4"> منطقة السايدبار </div>

لكي يكون التصميم متجاوب ويعمل على كل مقاسات واحجام الشاشات وفرت مكتبة البوتستراب كلاس ( class ) يدعى"container" يجب وضع الصفوف داخل هذا الكلاس.

هذا الكلاس سيجعل الموقع متجاوب يعمل على كل الشاشات من خلال استخدامنا خصائص css
الخاصة بالبوتستراب بمعنى لو تم فتح الموقع من جهاز ايباد سيتحول عرض الموقع الى عرض شاشة الايباد 768px.

يظهر الكلاس بالشكل التالي:

<div class="container"></div>

حتى نستطيع تميز وتنسيق منطقة المحتوى من خلال css سنقوم بتضمين الاكواد السابقة داخل section 

<section class="main"></section>

لاضافة كود تقسيم منطقة المحتوى توجه الى لوحة تحكم بلوجر

من القائمة الجانبية اضغط على علامة التبويب "المظهر"
ثم اضغط على "تعديل html"
ابحث عن الكود التالي </header> اسفله مباشرة اضف كود html التالي :

كود html

<section class="main"> <div class="container"> <div class="col-md-8"> <article>منطقة عرض المواضيع</article> </div> <div class="col-md-4"> <aside>منطقة السايدبار</aside> </div> </div> <!--end container--> </section>

اضافة كود التنسيق css:

كود css

section.main { background: #ffffff; padding: 50px 0; } aside { background: #fafaff; border: 1px solid #eee; padding: 10px; }

اضغط هنا لمعاينة المظهر

اضغط هنا لمتابعة درس عرض المواضيع في الصفحة الرئيسية واضافة اقراء المزيد 

عرض الودجت في السايدبار