تكويد قالب بلوجرتصميم الهيدرتصميم متوافق مع الجوال

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

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

الدرس السابق ⏪ اضافة قائمة علوية

سنعمل لان على تكويد وتنسيق الهيدر لاظهار عنوان ووصف الموقع
ستقوم باضافة كود html5, css3 نستطيع من خلاله اضافة اداة في قسم الهيدر من القالب
قسم الهيدر او كما يسمى راس الصفحة  يحتوي على عدة وسوم الوسم الرئيسي

<header>   <!-- رأس الصفحة -->  </header>

يتم تنسيق الهيدر حسب رغبتك وحاجتك يمكن تقسيم الهيدر الى قسمين:
القسم الاول: سنضيف بداخله اداة رأس الصفحة لعرض عنوان الموقع الإلكتروني ووصفه.
القسم الثاني: سنضيف اداة AdSense لعرض إعلانات على الموقع.

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

يشمل نظام الشبكة وسوم html محددة مسبقا ومنسقة باستخدام css مما يجعل خيارات التخطيط سهلة للغاية
يجب وضع الصفوف داخل class. يكون مساحة عرضه ثابتة هذا الكلاس يظهر بالشكل التالي

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

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

<div class="col-md-4"> col-md-4 </div>

<div class="col-md-8"> اcol-md-8</div>

<div class="col-md-12"> col-md-12 </div>

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

تكويد الهيدر لعرض عنوان الموقع وعرض اعلانات ادسنس

توجه الى لوحة تحكم بلوجر

من القائمة الجانبية اضغط على علامة التبويب "المظهر"
ثم اضغط على "تعديل html"

ابحث عن الكود التالي </nav> اسفله مباشرة اضف كود html التالي :

كود html الهيدر

<!-- رأس الصفحة --> <header> <div class="container"> <div class="col-md-12"> <div class="col-md-4"> <b:section id='widget-header'/> </div> <div class="col-md-8"> <b:section id='widget-adsense'/> </div> </div> </div> </header>

كود css

header { width: 100%; padding:50px 0; background: #f8f8f8; }

بعد اضافة الكود اضغط على حفظ المظهر ثم توجه الى القائمة الجانبية علامة التبويب التخطيط قم بتحديث الصفحة

ستلاحظ ظهور ادوات جديدة باسم (widget-header)  و (widget-adsense) كما في الصورة التالية

من خلال الكود <b:section id='widget-header'/> نستطيع اضافة اداة راس الصفحة في تخطيط القالب

من خلال الكود <b:section id='widget-adsense'/> نستطيع اضافة اداة اعلانات ادسنس في تخطيط القالب

توجه الى widget-header اضغط على إضافة أداة ستفتح نافذة جديدة قم بالبحث عن أداة رأس الصفحة كما في المثال التالي

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

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

شاهد فيديو
تتمة النافبار وتكويد الهيدر تصميم متجاوب مع الجوال ومناسب لعرض اعلانات ادسنس