تصميم قوالب بلوجر احترافية. نقدم في المدونة شروحات واضحة للأكواد وأهم إضافات بلوجر

كيفية تصميم قالب بلوجر احترافي خطوة بخطوة: دليل الأساسيات

تكويد قالب بلوجر كوداتي ستارتر HTML إلى XML
تصميم وتكويد قالب بلوجر متجاوب خطوة بخطوة - دليل الشامل

شرح شامل عن كيفية تصميم قالب بلوجر احترافي من الصفر. قالب كوداتي ستارتر صمم لانجاز اعمالك بسرعة فائقة؛ فهو يتميز بهيكلة نظيفة تجعل من السهل التعديل على الالوان، والخطوط، وتخصيص الواجهات لتناسب اي نيتش (تخصص) بخطوات بسيطة. ولاننا ندرك ان التكنولوجيا تتطور يوميا، فان هذا القالب هو مشروع دائم التطوير والتحديث لمواكبة احدث معايير الويب ومتطلبات محركات البحث.

اعتمدنا في بناء الهيكل الشبكي (Grid System) على اطار العمل Bootstrap 5، مما يمنحنا تقسيما دقيقا واستجابة فورية مع كافة مقاسات الشاشات دون تعقيدات. وبدلا من اثقال القالب بالمكتبات الجاهزة، سنستخدم اكواد CSS نقية ومرنة لاضافة اللمسات البصرية وترتيب العناصر باسلوب عصري، مع الالتزام الصارم بالبنية الدلالية السليمة لتوفير اقصى سرعة وتوافق مع محركات البحث.

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

خطوة تمهيدية هامة: قبل البدء في التطبيق العملي وبناء هيكل القالب المتقدم، إذا كنت ترغب في إتقان البنية التحتية للأكواد النظيفة، ننصحك بالاطلاع أولاً على مقالنا المخصص حول أساسيات لغات البرمجة لتكويد بلوجر: شرح هيكلة HTML5 وتنسيق CSS.

اذا كنت مستعدا لانشاء مدونة ناجحة بقالب سريع ومتجاوب، فدعنا نبدا مباشرة في الخطوة الاولى: تهيئة المدونة وتركيب الاكواد الاساسية لبناء الهيكل.

تركيب قالب تنظيف بلوجر وتجهيز بيئة العمل الأساسية

تركيب قالب تنظيف بلوجر

تعتبر خطوة تنظيف المدونة خطوة اساسية قبل ان ننتقل لمرحلة تصميم قالب بلوجر. القوالب الافتراضية او القديمة تترك خلفها ملفات تنسيق (CSS) وادوات (Widgets) مخفية تسبب بطء تحميل الموقع وتعارضا برمجيا مع الاكواد الجديدة. باستخدام

قالب تنظيف بلوجر، نقوم بمسح هذه التراكمات وتوفير مساحة عمل جديدة، مما يضمن توافق القالب مع معايير السيو SEO وسرعة الارشفة في محركات البحث.

للوصول الى هذه البيئة النظيفة، توجه الى لوحة تحكم مدونتك، انقر على قسم المظهر، ثم اختر تعديل HTML. قم بتظليل كافة الاكواد المتواجدة داخل المحرر واحذفها بالكامل، ثم استبدلها بالكود الاساسي التالي الذي يمثل نواة قالب كوداتي ستارتر:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='2' b:responsive='true' b:templateVersion='1.3.3' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
  <title><data:blog.pageTitle/></title>

  <b:skin version='1.3.3'><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Codaty Starter
Version:  1.0.0
Designer: Mohammad Alali
URL:      https://www.codatydev.com
License:  CodatyDev License
-----------------------------------------------
*/

  /* سيتم وضع تنسيقات CSS الخاصة بنا هنا لاحقاً */
  ]]></b:skin>
</head>
<body>
  <b:section id='main-section' maxwidgets='' showaddelement='yes'/>
</body>
</html>

اضافة وسم التجاوب واكواد راس الصفحة الاساسية (Head Content)

السطر الاول هو المسؤول المباشر عن تجاوب القالب (Responsiveness)، حيث يوجه المتصفح لضبط عرض الصفحة ليتطابق تماما مع ابعاد شاشة الزائر بنسبة تكبير اولية 100%. كما يعد وجوده شرطا برمجيا الزاميا لضمان عمل نظام الشبكة (Grid System) وكلاسات التجاوب الخاصة باطار عمل Bootstrap 5 بشكل سليم على الهواتف المحمولة. اما السطر الثاني، فهو وسم برمجي اساسي خاص بمنصة بلوجر، وظيفته استدعاء الروابط المرجعية (Canonical URLs) وخلاصات الموقع (RSS) واكواد الميتا الافتراضية، وهو ضروري جدا لتهيئة القالب لمحركات البحث (SEO).

<meta content='width=device-width, initial-scale=1' name='viewport'/>
<b:include data='blog' name='all-head-content'/>

تضمين اطار بوتستراب والمكتبات البرمجية | تصميم قالب بلوجر متجاوب

لتسريع عملية التطوير وضمان الحصول على تصميم قالب بلوجر متجاوب يعمل على شاشات الكمبيوتر والهواتف الذكية، نعتمد على استدعاء مكتبات خارجية موثوقة بدلا من كتابة الاف السطور البرمجية يدويا. اطار العمل بوتستراب Bootstrap 5 في نسخته القياسية الاساسية يقدم لنا نظام شبكي (Grid System) متطور يقسم الواجهة الى اعمدة مرنة تتكيف مع حجم الشاشة تلقائيا. الاعتماد على النسخة الاساسية للمكتبة يمنح المطور حريته الكاملة في توجيه العناصر وبناء التنسيقات خطوة بخطوة دون تدخل برمجي مسبق يفرض اتجاهات معينة، مما يحمي شيفرة القالب من مشاكل تداخل الخصائص مستقبلا. كما نستعين بمكتبة فونت اوسوم FontAwesome التي تستبدل الصور الثقيلة بايقونات متجهة (Vector Icons) خفيفة الوزن، مما يساهم في رفع سرعة الموقع وتحسين تجربة المستخدم.

انسخ اكواد التنسيق التالية التي تتضمن النسخة القياسية والاساسية من بوتستراب ومكتبة الايقونات. يجب وضع هذا الكود في منطقة الترويسة Head، وتحديدا فوق وسم <b:skin> مباشرة، لمنع قوالب بلوجر من احداث اي خلل في قراءة مسارات التصميم:

<!-- Bootstrap 5 Base CSS -->
<link crossorigin='anonymous' href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css' rel='stylesheet'/>
<!-- FontAwesome -->
<link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css' rel='stylesheet'/>

التصميم الجذاب وحده لا يكفي؛ فالموقع يحتاج الى التفاعلية لخدمة الزائر، مثل فتح القوائم الجانبية او تشغيل القوائم المنسدلة Dropdowns على الهواتف. لتحقيق ذلك، نستدعي ملفات جافا سكربت الخاصة باطار بوتستراب، مدعومة بمكتبة جي كويري التي تسهل التحكم في عناصر الصفحة (DOM) وتوفر استجابة فورية لنقرات المستخدم.

لتحقيق اعلى درجات تحسين محركات البحث وتجنب حظر عرض الصفحة، انسخ الكود التالي وضعه في اسفل القالب تماما، فوق وسم الاغلاق </body> مباشرة، ليتم تحميل هذه الملفات التفاعلية بعد اكتمال ظهور المحتوى النصي للزائر:

<!-- jQuery -->
<script crossorigin='anonymous' src='https://code.jquery.com/jquery-4.0.0.min.js'></script>
<!-- Bootstrap 5 JS -->
<script crossorigin='anonymous' src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js'></script>

تكويد القائمة العلوية وتصميم نافبار متجاوب

تصميم قائمة علوية نافبار بلوجر

تعتبر القائمة العلوية النافبار بمثابة خريطة الطريق لاي موقع الكتروني، وبنائها بشكل صحيح ومدروس يعتبر ركيزة اساسية في عملية تصميم قالب بلوجر. لا تقتصر اهمية شريط التنقل على تحسين تجربة المستخدم (UX) عبر تسهيل وصول الزوار الى الاقسام المختلفة ، بل لها دورا اساسيا في دعم محركات البحث. عناكب بحث جوجل تعتمد بشكل كبير على الروابط الداخلية الموجودة في القائمة العلوية لفهم هيكل المدونة، وتصنيف المحتوى، وسرعة ارشفة الصفحات الجديدة.

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

قم بنسخ كود النافبار التالي، والذي يحتوي على الهيكل الدلالي للقائمة باسماء اقسام عامة تناسب كافة التخصصات، وضعه مباشرة اسفل وسم فتح الجسد <body> وفوق منطقة التخطيط الرئيسية التي انشاناها مسبقا:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <button aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-bs-target="#navbarNav" data-bs-toggle="collapse" type="button">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a aria-current="page" class="nav-link active" expr:href="data:blog.homepageUrl">الرئيسية</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" expr:href='data:blog.homepageUrl + "search/label/أخبار?max-results=6"'>أخبار</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" expr:href='data:blog.homepageUrl + "search/label/مقالات?max-results=6"'>مقالات</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" expr:href='data:blog.homepageUrl + "search/label/منوعات?max-results=6"'>منوعات</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" expr:href='data:blog.homepageUrl + "p/contact.html"'>اتصل بنا</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

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

يتكون كود النافبار السابق من مجموعة فئات (Classes) مترابطة تعمل معا لتشكيل التصميم النهائي. فئة navbar-expand-lg هي المسؤولة عن ابقاء القائمة ممتدة افقيا على الشاشات الكبيرة، وطيها واخفائها خلف زر التبديل عند التصفح من الشاشات الصغيرة. بينما تعمل فئة container على توسيط محتوى القائمة ومنع التصاقه بحواف المتصفح، مما يمنح التصميم مظهرا انيقا ومريحا للعين.

لقد استخدمنا وسوم القوائم القياسية (ul و li) لبناء هيكل الروابط باسماء عامة ومرنة. الاهمية التقنية القصوى هنا تكمن في اضافة المتغير الاستعلامي (?max-results=6) في نهاية مسار كل قسم. وظيفة هذا المتغير هي اخبار منصة بلوجر ان يجب عرض 6 مشاركات فقط كحد اقصى في كل صفحة عند تصفح الزائر للقسم. هذا التحديد الدقيق يحمي قالب بلوجر من مشاكل البطء الناتجة عن تحميل عشرات الصور والمقالات دفعة واحدة، ويضمن اداء فائقا في اختبارات السرعة، اضافة الى الحفاظ على تناسق التصميم وتسهيل عملية التصفح والانتقال بين الصفحات (Pagination) بشكل احترافي ومنظم.

تكويد الهيدر وتصميم مساحة اعلانية

تكويد قسم الهيدر الأساسي لقالب بلوجر كوداتي ستارتر.

يعتبر الجزء العلوي من الموقع (Header) الواجهة البصرية الاولى التي تقع عليها عين الزائر، وتصميمه بذكاء هو خطوة فارقة في تصميم قالب بلوجر. تصميم الهيدر الناجح يوازن بين ترسيخ الهوية البصرية للمدونة عبر عرض العنوان والوصف بوضوح وبين استغلال المساحة المتاحة لتحقيق اعلى عائد مادي ممكن. لذلك، سنقوم بتصميم هيدر متجاوب ينقسم الى جزاين: الاول مخصص لهوية الموقع، والثاني يضم مساحة اعلانية قياسية (مثل اعلانات 728x90) تعد الافضل من حيث نسبة النقر الى الظهور (CTR)، مما يعزز من ارباحك المستقبلية دون ازعاج القارئ او تشتيته.

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

<header class="p-4 p-md-5 bg-body-secondary mb-4">
  <div class="container">
    <div class="row align-items-center">
     <!-- قسم الهوية: عنوان ووصف المدونة -->
      <div class='col-md-4 text-center text-md-end mb-3 mb-md-0'>
        
        <b:if cond='data:view.isHomepage'>
          <h1 class='h2 fw-bold mb-2'>
            <a class='text-dark text-decoration-none' expr:href='data:blog.homepageUrl'><data:blog.title/></a>
          </h1>
        <b:else/>
          <span class='h2 fw-bold mb-2 d-block'>
            <a class='text-dark text-decoration-none' expr:href='data:blog.homepageUrl'><data:blog.title/></a>
          </span>
        </b:if>

        <!-- وصف المدونة -->
        <p class='text-muted mb-0'><data:view.description/></p>
      </div>

      <!-- قسم المساحة الإعلانية -->
      <div class="col-md-8">
        <b:section id='header-ads' class='header-ads-section' maxwidgets='1' showaddelement='yes'>
          <!-- ستظهر أداة الإعلانات هنا من لوحة التخطيط -->
        </b:section>
      </div>
    </div>
  </div>
</header>

شرح هيكل الهيدر وربط الاعلانات بلوحة التخطيط

اعتمدنا في الكود السابق على فئات التخطيط المرنة (Flexbox) المدمجة في بوتستراب (row و align-items-center) لضمان محاذاة عنوان المدونة مع الاعلان على نفس الخط الافقي، بغض النظر عن حجم الشاشة. استخدمنا الفئة col-md-4 لحجز ثلث المساحة لاسم الموقع، والفئة col-md-8 لحجز الثلثين المتبقيين للاعلان. هذا التقسيم يضمن الا يتداخل الاعلان مع العنوان على الهواتف المحمولة، حيث ستتكفل هذه الفئات بترتيب العناصر عموديا (فوق بعضها) عند التصفح من الشاشات الصغيرة لتجنب اي تشوه في واجهة المستخدم.

لضمان الحصول على قالب بلوجر احترافي وديناميكي، لم نقم بكتابة اسم المدونة يدويا، بل استخدمنا وسوم بيانات منصة بلوجر الاساسية (<data:blog.title/> و <data:view.description/>). هذه الوسوم تقوم بجلب العنوان والوصف تلقائيا من اعدادات مدونتك، مما يعني انك اذا غيرت اسم موقعك لاحقا، سيتغير في القالب فورا دون الحاجة لتعديل الاكواد. علاوة على ذلك، قمنا بادراج وسم القسم (<b:section>) في منطقة الاعلان؛ وظيفته هي انشاء منطقة استيعاب فارغة تظهر لك في قسم التخطيط داخل لوحة تحكم بلوجر. هذا الربط الذكي سيتيح لك مستقبلا اضافة كود جوجل ادسنس او اي بنر اعلاني بسهولة تامة عبر اداة (HTML/JavaScript) دون المساس بالشيفرة البرمجية للقالب.

اضافة قسم المواضيع المميزة اسفل الهيدر

لتعزيز احترافية الواجهة، سنضيف قسما خاصا للمواضيع المميزة يظهر حصريا في الصفحة الرئيسية اسفل الهيدر مباشرة. يعتمد هذا القسم على نظام شبكة بوتستراب (Grid) لتقسيم الشاشة الى بطاقتين متجاورتين، مع الحفاظ على تناسق الصور في الشاشات المتوسطة. لتسهيل الامر على اصحاب المدونات، قمنا بتصميم قسم المواضيع المميزة بحيث يكون الهيكل الخارجي للبطاقة ثابتا في القالب، بينما يتم التحكم في محتوى البطاقة (الصورة، العنوان، والمقتطف) ديناميكيا من لوحة "التخطيط" دون الحاجة لتعديل الاكواد البرمجية الاساسية لاحقا.

قم بنسخ الكود التالي وضعه مباشرة اسفل اغلاق وسم الهيدر </header> لتجهيز اماكن البطاقات:

<!-- قسم المواضيع المميزة في الصفحة الرئيسية -->
<b:if cond='data:view.isHomepage'>
  <div class='container my-5'>
    <div class='row mb-2'> 
      
      <!-- مساحة البطاقة الأولى -->
      <div class='col-md-6'>
        <div class='card rounded-4 overflow-auto shadow mb-3'>
          <div class='row g-0'>
            <b:section class='featured-widget' id='featured-1' maxwidgets='1' showaddelement='yes'></b:section>
          </div>
        </div>
      </div>
      
      <!-- مساحة البطاقة الثانية -->
      <div class='col-md-6'>
        <div class='card rounded-4 overflow-auto shadow mb-3'>
          <div class='row g-0'>
            <b:section class='featured-widget' id='featured-2' maxwidgets='1' showaddelement='yes'></b:section>
          </div>
        </div>
      </div> 
      
    </div>
  </div>
</b:if>

طريقة اضافة معلومات المقال والمشاركة المميزة من لوحة التخطيط في قالب كوداتي ستارتر

طريقة إضافة كود المشاركة المميزة من لوحة تخطيط بلوجر في قالب كوداتي ستارتر
طريقة اضافة معلومات المقال من لوحة التخطيط في قالب كوداتي ستارتر

الان، لاضافة محتوى البطاقات وتعديل الروابط، توجه الى لوحة تحكم بلوجر ثم التخطيط. ستلاحظ ظهور اداتين جديدتين باسم (featured-1 و featured-2). انقر على "اضافة اداة" في كل منهما واختر اداة HTML/JavaScript، ثم الصق الكود المساعد التالي داخلها مع تعديل الرابط، النص، ومسار الصورة بما يناسب مقالك:

<div class='col-lg-5 col-md-12'>
  <img alt='...' class='w-100 h-100 object-fit-cover' height='265' src='https://placehold.co/800x450/009688/fff?text=Codaty+Starter+Mix+2'/>
</div>
<div class='col-lg-7 col-md-12'>
  <div class='card-body p-4'>
    <h2 class='card-title h5'>تقرير عالمي يبرز أهمية السرعة في تصدر نتائج محركات البحث</h2>
    <p class='card-text'>يقع العديد من المبتدئين في فخ حشو الأكواد واستدعاء ملفات تصميم متعددة دون حاجة فعلية لها.</p>
    <a class='btn btn-sm btn-outline-dark fw-bold' href='رابط_مقالك_هنا'>اقرأ المزيد</a>
  </div>
</div>

تحسين تداخل حاويات بلوجر مع شبكة البوتستراب

عند اضافة اداة جديدة من لوحة التخطيط، يقوم محرك بلوجر افتراضيا بتغليف الكود الخاص بنا داخل حاويات اضافية (مثل .widget و .widget-content). هذه الحاويات الاجبارية تقطع الاتصال المباشر بين فئة .row الخارجية وبين الاعمدة الداخلية .col-md-5، مما يعطل نظام شبكة البوتستراب ويمنع البطاقات من الاصطفاف بجانب بعضها بشكل صحيح.

لحل هذه المشكلة وجعل الحاويات المخفية التي تنشئها بلوجر على اخذ خاصية (Flexbox) والتصرف كصف متجاوب، سنقوم باضافة تنسيق CSS بسيط. ابحث في محرر القالب عن الوسم ]]></b:skin>، وقم بنسخ الكود التالي ووضعه فوقه مباشرة:

/* تحسين تداخل حاويات بلوجر مع شبكة البوتستراب في المواضيع المميزة */
.featured-widget, 
.featured-widget .widget, 
.featured-widget .widget-content {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    padding: 0;
}

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

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

تُعد منطقة عرض المقالات القلب النابض لأي مدونة، وهي العنصر الأكثر أهمية الذي تزحف إليه عناكب محركات البحث لفهم تخصص الموقع ومحتواه. في عملية تصميم قالب بلوجر، يجب أن نضمن عرض المقالات بطريقة منظمة وجذابة تدفع الزائر للبقاء أطول فترة ممكنة وتقلل من معدل الارتداد. لتجنب مشكلة بطء تحميل الصفحة الرئيسية الناتجة عن عرض محتوى المقالات بالكامل، نعتمد على استراتيجية التلخيص التلقائي أو إضافة خاصية "اقرأ المزيد". هذه الآلية تقتطع جزءاً من النص التمهيدي وتعرضه بجوار صورة مصغرة، مما يقلل من حجم (DOM) ويزيد من سرعة استجابة الموقع بشكل جذري.

في هذه المرحلة، سنقوم ببناء الهيكل الشبكي (Grid) الذي سيحتضن المقالات، وسنطبق شروط الفصل الذكية <b:if cond='data:view.isPost'> لعزل طريقة عرض ملخص الصفحة الرئيسية عن الهيكل الداخلي لصفحة المقال. قم بنسخ الكود البرمجي التالي وضعه مباشرة تحت كود الهيدر (Header):

<div class="container my-5">
  <div class="row">
    <!-- منطقة عرض المشاركات الرئيسية -->
    <div class="col-lg-8 mb-4 mb-lg-0">
      <main class="main-content" role="main">
        <b:section class='main-blog-section' id='main-blog' maxwidgets='1' showaddelement='no'>
          <b:widget id='Blog1' locked='true' title='رسائل المدونة' type='Blog' version='2'>

            <b:includable id='main' var='top'>
              <!-- شرط: تطبيق التخطيط الشبكي للصفحة الرئيسية والأقسام فقط -->
              <b:if cond='data:view.isMultipleItems'>
                <div class='row row-cols-1 row-cols-md-2 row-cols-lg-2 g-4 mb-5'>
                  <b:loop values='data:posts' var='post'>
                    <b:include data='post' name='post'/>
                  </b:loop>
                </div>
              <!-- شرط: عرض المقال بدون شبكة ليأخذ مساحة col-lg-8 كاملة -->
              <b:else/>
                <b:loop values='data:posts' var='post'>
                  <b:include data='post' name='post'/>
                </b:loop>
              </b:if>
              
              <b:include name='nextprev'/>
            </b:includable>

            <b:includable id='post' var='post'>
              
              <!-- 1. شرط عرض ملخص المقالات في الصفحة الرئيسية -->
              <b:if cond='data:view.isMultipleItems'>
                <div class='col mb-4'>
                  <article class='card h-100 border-0 shadow-sm' role='main'>
                    <div class='card-body'>
                      
                      <b:if cond='data:post.featuredImage'>
                        <a expr:href='data:post.url'>
                          <img class='img-fluid rounded mb-3' expr:alt='data:post.title' expr:src='data:post.featuredImage' style='height: 220px; object-fit: cover; width: 100%;'/>
                        </a>
                      </b:if>

                      <h2 class='post-title h4 mb-2'>
                        <a class='text-dark text-decoration-none' expr:href='data:post.url'><data:post.title/></a>
                      </h2>

                      <div class='post-meta text-muted small mb-2'>
                        <b:if cond='data:showAuthor'>
                          <span class='post-author me-3'><i class='fa-solid fa-user me-1'/> <data:post.author.name/></span>
                        </b:if>
                        <b:if cond='data:showTimestamp'>
                          <span class='post-date me-3'><i class='fa-regular fa-calendar me-1'/> <data:post.timestamp/></span>
                        </b:if>
                      </div>

                      <b:with value='data:post.snippets.long ?: data:post.snippets.short' var='snippetContent'>
                        <p class='text-muted'>
                          <b:if cond='data:snippetContent'>
                            <b:eval expr='snippet(data:snippetContent, {length: 120})'/>
                          <b:else/>
                            تصفح التفاصيل الكاملة لهذا المقال...
                          </b:if>
                        </p>
                      </b:with>
                      
                      <div class='mt-3'>
                        <a class='btn btn-sm btn-outline-dark fw-bold' expr:href='data:post.url'>اقرأ المزيد</a>
                      </div>

                    </div>
                  </article>
                </div>
              </b:if><!-- نهاية شرط الصفحة الرئيسية -->

              <!-- 2. شرط الهيكل الدلالي لعرض المقال الكامل أو الصفحة الثابتة -->
              <b:if cond='data:view.isSingleItem'>
                <article class="post-article bg-white p-4 p-md-5 mb-5 border rounded">
                  
                  <!-- رأس المقال أو الصفحة -->
                  <header class="post-header mb-4 border-bottom pb-3">
                    <h1 class="post-title fw-bold text-dark mb-3"><data:post.title/></h1>
                    
                    <!-- معلومات النشر تظهر في المقالات فقط وتحجب عن الصفحات الثابتة -->
                    <b:if cond='data:view.isPost'>
                      <div class="post-meta d-flex flex-wrap align-items-center text-muted small gap-3">
                        <span class="meta-item author">
                          <i class="fa-solid fa-user-pen text-primary ms-1"></i>
                          <data:post.author.name/>
                        </span>
                        <span class="meta-item date">
                          <i class="fa-regular fa-calendar text-primary ms-1"></i>
                          <data:post.date/>
                        </span>
                        
                        <b:if cond='data:post.labels'>
                          <span class="meta-item labels">
                            <i class="fa-solid fa-tags text-primary ms-1"></i>
                            <b:loop values='data:post.labels' var='label'>
                              <a expr:href='data:label.url' class="text-decoration-none text-muted meta-link" rel="tag">
                                <data:label.name/>
                              </a>
                              <b:if cond='not data:label.isLast'>، </b:if>
                            </b:loop>
                          </span>
                        </b:if>
                      </div>
                    </b:if>
                  </header>

                  <!-- حاوية المحتوى الفعلي (ترث تنسيقات CSS للمقالات والصفحات معاً) -->
                  <section class="post-body lh-lg text-secondary" style="font-size: 16px;">
                    <data:post.body/>
                  </section>

                  <!-- تذييل المقال (الأقسام) يظهر في المقالات فقط -->
                  <b:if cond='data:view.isPost'>
                    <b:if cond='data:showLabels'>
                      <b:if cond='data:post.labels'>
                        <footer class='post-footer small mt-4 pt-3 border-top'>
                          <span class='text-muted me-2'><i class='fa-solid fa-tags me-1'/> الأقسام:</span>
                          <b:loop values='data:post.labels' var='label'>
                            <a class='badge bg-light text-dark text-decoration-none me-1 border' expr:href='data:label.url.canonical + &quot;?max-results=6&quot;'><data:label.name/></a>
                          </b:loop>
                        </footer>
                      </b:if>
                    </b:if>
                  </b:if>

                  <!-- منطقة التعليقات -->
                  <div class='comments-area mt-5 pt-4 border-top' id='comments'>
                    <div class='fw-bold mb-4'>التعليقات</div>
                    <b:if cond='data:post.allowComments'>
                      <iframe allowtransparency='true' class='blogger-iframe-classes' expr:src='data:post.commentFormIframeSrc' frameborder='0' height='275' id='comment-editor' scrolling='no' width='100%'/>
                    </b:if>
                  </div>

                </article>
              </b:if><!-- نهاية شرط الصفحة الفردية/الثابتة -->

            </b:includable>

            <b:includable id='nextprev'>
              <div class='blog-pager d-flex justify-content-between my-4 w-100 px-3'>
                <b:if cond='data:newerPageUrl'>
                  <a class='btn btn-outline-dark btn-sm fw-bold' expr:href='data:newerPageUrl'><i class='fa-solid fa-arrow-right me-1'/> أحدث</a>
                <b:else/>
                  <span/>
                </b:if>
                <b:if cond='data:olderPageUrl'>
                  <a class='btn btn-outline-dark btn-sm fw-bold' expr:href='data:olderPageUrl'>أقدم <i class='fa-solid fa-arrow-left ms-1'/></a>
                <b:else/>
                  <span/>
                </b:if>
              </div>
            </b:includable>

          </b:widget>
        </b:section>
      </main>
    </div>

    <!-- مساحة القائمة الجانبية -->
    <div class="col-lg-4 sidebar-area" id="sidebar-wrapper">
      <!-- سيتم إضافة كود السايدبار هنا -->
    </div>
  </div><!-- نهاية الصف -->
</div><!-- نهاية الحاوية -->

التفكيك البرمجي للأداة وترتيب العناصر لمحركات البحث

في الكود أعلاه، استخدمنا الفئة container لتغليف المحتوى وتوسيطه، ثم أنشأنا صفاً row داخله. قمنا بتقسيم هذا الصف بالاعتماد على نظام شبكة بوتستراب: حجزنا لمنطقة المشاركات 8 أعمدة (col-lg-8) لتكون المساحة الأكبر، وتركنا 4 أعمدة (col-lg-4) كمسودة لبرمجة القائمة الجانبية. هذه الفئات تضمن عرض المقالات والسايدبار جنباً إلى جنب على الكمبيوتر، وترتيبها عمودياً على شاشات الهواتف الذكية، مما يمنحنا تصميم قالب متجاوب دون كتابة سطر CSS إضافي.

أما على الصعيد البرمجي، فقد قمنا بخطوة متقدمة تُعرف بـ "التفكيك البرمجي" لأداة رسائل المدونة (Blog1). بدلاً من الاعتماد على الأكواد الافتراضية المغلقة لبلوجر، قمنا بتجهيز المكونات يدوياً داخل وسوم b:includable. هذا أعطانا قدرة على التحكم الكامل، حيث قمنا ببناء هيكل HTML5 دلالي (Semantic HTML) عبر استبدال وسوم <div> بعناصر أكثر تحديداً مثل <article> و <header> و <section>.

ولمعالجة خاصية "اقرأ المزيد" بطريقة تُعتبر خطوة قوية من إعدادات سيو المدونة، استغنينا عن الطريقة الافتراضية القديمة التي تولد رابط اقرأ المزيد عن طريق إضافة جافاسكريبت. بدلاً من ذلك، استخدمنا المتغير الذكي b:with مدمجاً مع دالة snippet() الرسمية، لاقتطاع 120 حرفاً من النص النظيف برمجياً وعرضه داخل وسم الفقرة الدلالي <p>. وفي حال كان المقال قصيراً جداً، وفرنا رسالة بديلة تلقائية (تصفح التفاصيل الكاملة...). هذه الآلية تضمن للموقع إنشاء روابط نظيفة 100% (Clean URLs)، وتقليل حجم كود الصفحة (DOM Size)، مما يضمن سرعة تحميل قالب كوداتي ستارتر وتجربة مستخدم احترافية.

تصميم صفحة المقال في بلوجر: تنسيق الصور والعناوين لتجربة مستخدم متوافقة مع ادسنس

الهيكل الدلالي لتصميم صفحة المقال في بلوجر باستخدام وسوم HTML وتنسيق H2 في قالب كوداتي ستارتر
توضيح مرئي للهيكل الدلالي (Semantic HTML) وتنسيقات CSS المطبقة على العناوين والصور داخل صفحة المقال.

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

تنسيق صفحة المقال في بلوجر

لقد حرصنا في التخصيص الافتراضي ل قالب كوداتي ستارتر (Codaty Starter) على تقديم بنية متكاملة نظيفة ومدروسة، لتكون خطوة البداية لكل من يريد تصميم قالب بلوجر او صانع محتوى يبحث عن قالب بلوجر سريع، متجاوب، ومتوافق تماما مع سياسات جوجل ادسنس حيث عالجنا معظم المشاكل الشائعة مثل خروج الصور عن اطار الهواتف المحمولة او ظهور العناوين كعناصر عشوائية غير منسقة.

لتحقيق اقوى تحسين للسيو الداخلي (On-page SEO) وتوفير قراءة مريحة لزوار موقعك، قمنا بتنسيق كود CSS نظيف يستهدف الفئة .post-body. يعمل هذا التنسيق الافتراضي على جعل الصور متجاوبة مع كافة احجام الشاشات، ويظهر الروابط الداخلية بلون ازرق لزيادة معدل النقر (CTR). كما يمنح العنوان الرئيسي H2 تصميما تفاعليا يفصل فقرات المقال بوضوح، مع الحفاظ على التدرج الحجمي المتناسق لباقي العناوين من H3 الى H6. وبطبيعة الحال، لان "كوداتي ستارتر" (Codaty Starter) صمم ليكون نقطة بداية في بيئة تطوير مرنة، يمكن للمصمم دائما اجراء اي تعديلات اضافية على هذه الاكواد لتطابق هويته البصرية بكل سهولة.

انسخ هذا الكود وضعه فوق وسم </b:skin> لتكتمل أناقة صفحة المقال:

/* --- تنسيق محتوى المقال الداخلي: قالب كوداتي ستارتر --- */
.post-body {
  color: #475569;
  line-height: 1.8;
  font-size: 16px;
}

.post-body img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
}

.post-body a {
  color: #0d6efd;
  font-size: 1.05em;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.post-body a:hover {
  color: #0a58ca;
  text-decoration: underline;
}

.post-body h2 {
  font-weight: 700;
  color: #212529;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  background-color: #f8f9fa;
  padding: 0.8rem 1rem 0.8rem 0.8rem;
  border-right: 4px solid #0d6efd;
  border-radius: 0.25rem;
}

.post-body h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #334155;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.post-body h4 {
  font-size: 1.15rem;
  font-weight: 600;
  color: #475569;
  margin-top: 1.2rem;
  margin-bottom: 0.8rem;
}

.post-body h5 {
  font-size: 1.05rem;
  font-weight: 600;
  color: #475569;
}

.post-body h6 {
  font-size: 1rem;
  font-weight: bold;
  color: #64748b;
}

تكويد وتنسيق السايدبار

تعتبر القائمة الجانبية السايدبار في اي تصميم قالب بلوجر مخزنا استراتيجيا للروابط الداخلية، وادوات البحث، والمساحات الاعلانية الاضافية التي ترفع من القيمة الربحية للمدونة. السايدبار ليس مجرد عنصر ثانوي؛ بل هو اداة فعالة لرفع "تفاعل المستخدم" عبر توفير سهولة الوصول للمقالات الاكثر قراءة، وتصنيفات المدونة، وصندوق البحث، مما يقلل من معدل الخروج السريع ويجبر عناكب البحث على الزحف لعمق اكبر داخل هيكل موقعك عبر الروابط الداخلية المتعددة.

لقد جهزنا سابقا مساحة (col-lg-4) مخصصة لهذا الغرض. الان، سنقوم بملء هذه المساحة كمنطقة ديناميكية واحدة تسمح باضافة وسحب وافلات اي عدد من ادوات بلوجر من لوحة التخطيط بحرية تامة. انسخ الكود التالي وضعه داخل مساحة السايدبار التي انشاناها في الخطوة السابقة:

<!-- منطقة السايدبار الديناميكية -->
<b:section class='sidebar' id='sidebar' maxwidgets='10' showaddelement='yes'/>

احتراف تنسيق أدوات بلوجر (Sidebar Widgets) بـ CSS

لضمان بناء تصميم قالب بلوجر احترافي وسريع، يجب علينا استغلال الهيكل الافتراضي الذي تولده المنصة بدلاً من حشو القائمة الجانبية بأكواد HTML معقدة لكل إضافة. محرك بلوجر يمنح الأدوات كلاسات برمجية جاهزة (مثل .widget للإطار الكلي، و .title لعنوان الأداة). من خلال استهداف هذه المعرفات وتخصيصها بأكواد CSS نظيفة، سنتمكن من تحويل مظهر الإضافات إلى بطاقات (Cards) عصرية تتناغم تماماً مع واجهات الموقع. هذا الأسلوب الذكي في التكويد لا يعطي مدونتك مظهراً جذاباً فحسب، بل يساهم في تقليل حجم الأكواد وتحسين تجربة المستخدم (UI/UX).

تكويد الفوتر واجهة التذييل لختام هيكل الموقع

تعتبر واجهة التذييل الفوتر المحطة الاخيرة التي يصل اليها الزائر في رحلة تصفحه، وتصميمها بعناية يضفي طابعا من الاحترافية والموثوقية على اي مشروع تصميم قالب بلوجر. لا يقتصر دور الفوتر على الجماليات، بل يعد مكانا استراتيجيا لاضافة حقوق الملكية الفكرية، وروابط الصفحات الثابتة (مثل سياسة الخصوصية، من نحن، واتصل بنا) التي تبحث عنها خوارزميات محركات البحث لتقييم مصداقية الموقع. وجود تذييل منظم وواضح يعزز من ثقة المستخدم ويثبت هوية المدونة كمدونة احترافية.

في هذه المرحلة الختامية من تصميم قالب كوداتي ستارتر الاساسي، سنقوم بتصميم فوتر بسيط وانيق يعتمد على الالوان الداكنة ليبرز بوضوح كفاصل بصري في اسفل الصفحة. قم بنسخ كود الفوتر التالي وضعه مباشرة تحت كود منطقة المشاركات والسايدبار (اي اسفل وسم الاغلاق لـ container الذي يجمعهما)، وتحديدا فوق ملفات الجافا سكربت التي قمنا باضافتها في نهاية القالب:

<footer class="bg-dark text-white py-4 mt-5">
  <div class="container">
    <div class="row align-items-center">
      
      <div class="col-md-6 text-center text-md-start mb-3 mb-md-0">
        <p class='mb-0'>جميع الحقوق محفوظة &amp;copy; <span><script type='text/javascript'>document.write(new Date().getFullYear());</script></span> <a class='text-white text-decoration-none fw-bold' expr:href='data:blog.homepageUrl'><data:blog.title/></a></p>
      </div>

      <div class="col-md-6 text-center text-md-start">
        <p class="mb-0 small text-white-50">
          تصميم وتطوير 
          <a class="text-white-50 text-decoration-none" href="https://www.codatydev.com" target="_blank" rel="noopener noreferrer">كوداتي ديف</a>
        </p>
      </div>

    </div>
  </div>
</footer>

شرح تنسيقات التذييل والختام البرمجي للقالب

لتصميم الفوتر اعتمدنا على فئات بوتستراب لتسريع العمل وضمان الحصول على قالب متجاوب بالكامل على كافة الشاشات. الفئة bg-dark تمنح الخلفية لونا داكنا مريحا للعين، بينما تقوم text-white بتحويل لون النصوص الى الابيض لضمان التباين العالي (Contrast) وسهولة القراءة، وهو عامل مهم في تجربة المستخدم (UX). كما استخدمنا الفئة mt-5 (Margin Top) لاضافة مسافة امان فاصلة بين محتوى المقالات وبداية الفوتر، مما يمنح التصميم مساحة للتنفس.

برمجيا، حافظنا على الطبيعة الديناميكية للقالب من خلال استدعاء وسم <data:blog.title/> مرة اخرى لطباعة اسم المدونة تلقائيا بجوار علامة حقوق النشر. بوضعك لهذا الكود، تكون قد انهيت تكويد قالب كوداتي ستارتر بنجاح. اصبحت واجهة الـ HTML الان مكتملة، نظيفة. كل ما عليك فعله الان هو الضغط على ايقونة "حفظ" في محرر بلوجر لترجمة هذه السطور الى واجهة مدونة جاهزة لاستقبال لمسات التنسيق الجمالية في الدروس القادمة.

ثقافة تقنية حول تصميم عناصر الويب:

لا يتوقف تصميم الازرار عند المظهر المرئي فحسب، بل هو ركيزة اساسية في تجربة المستخدم (UX) تسهم في توجيه سلوك القارئ (CTA) بسلاسة. اختيار الالوان المتناسقة وتاثيرات المرور (Hover) يرفع بشكل ملحوظ من معدلات التفاعل والاحترافية.

اقرأ أيضاً: كيفية إضافة أزرار تحميل ومعاينة احترافية لمدونتك او موقعك

يمثل شعار كوداتي ستارتر (Codaty Starter) الهوية البصرية الاساسية لقالبنا؛ حيث صمم ليعكس البساطة والاحترافية التي يسعى اليها المطورون. لا يقتصر دور هذا الرمز على كونه واجهة جمالية، بل هو توقيع تقني يرمز الى بيئة برمجية نظيفة، سريعة، ومحسنة لمدونات بلوجر الحديثة.

شعار قالب كوداتي ستارتر - Codaty Starter Logo
السلسلة مستمرة:

جاري العمل على تجهيز الجزء القادم في تطوير قالب كوداتي ستارتر تابعنا ليصلك إشعار فور نشره!

المناقشة البرمجية
0
إرسال تعليق
تأكد من الالتزام بقواعد النشر؛ كن بناءً في طرحك وساهم في إثراء المحتوى التقني.