تصميم عصري متجاوب 📱

التأسيس وبناء قالب بلوجر

سنتعلم كيفية بناء قالب بلوجر فارغ تماماً مع إضافة المكتبات اللازمة لضمان عمل الأيقونات وزر الجوال بنجاح.

الخطوة الأولى

تنظيف القالب (القالب الخام)

امسح جميع الأكواد السابقة في محرر HTML وضع هذا القالب الأساسي.

ما هو تنظيف القالب؟

هو عملية إزالة كافة الأكواد الافتراضية لقوالب بلوجر (CSS و XML) لاستبدالها بهيكل فارغ تماماً. هذا يمنع تعارض الأكواد ويجعل القالب سريعاً جداً وخالياً من الأخطاء البرمجية.

أهمية وطريقة التركيب

  • الأهمية: يمنحك السيطرة الكاملة على التصميم ويسرع أرشفة الموقع في محركات البحث.
  • طريقة التركيب: اذهب إلى "المظهر" > "تعديل HTML" > حدد الكل (Ctrl+A) > امسح الكل > الصق الكود أدناه.
Blogger XMLقالب نظيف بالمكتبات
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' 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><![CDATA[

    ]]></b:skin>
  </head>
  
  <body>
    <b:section id='main' class='main' showaddelement='yes'/>
  </body>
</html>
الخطوة الثانية

أكواد الميتا الأساسية (Meta Tags)

بعد تنظيف القالب، يجب تعريف المتصفح بكيفية عرض المحتوى والتعامل مع اللغة وتجاوب الشاشة.

ما هي أكواد Meta؟

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

لماذا هذه الأكواد بالتحديد؟

  • Charset UTF-8: يضمن ظهور الحروف العربية بوضوح ودون رموز غريبة.
  • Viewport: أهم كود للتجاوب؛ بدونه سيظهر موقعك كنسخة سطح مكتب مصغرة جداً على الجوال.
  • X-UA-Compatible: يضمن أفضل أداء وعرض للموقع على متصفحات Internet Explorer القديمة و Edge.
HTML Headأكواد Meta الأساسية
<!-- ضع هذه الأكواد مباشرة أسفل وسم <head> -->
<meta charset='utf-8'/>
<meta content='IE=edge' http-equiv='X-UA-Compatible'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
الخطوة الثالثة

تنسيقات CSS الأساسية (Global CSS)

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

لماذا نستخدم :root؟

نستخدمها لتعريف "متغيرات الألوان"، بحيث لو أردت تغيير لون القالب بالكامل مستقبلاً، ستقوم بتغيير كود اللون في مكان واحد فقط بدلاً من البحث عنه في آلاف الأسطر.

شرح الأكواد الأساسية:

  • Box-Sizing: يضمن أن عرض العناصر يتضمن الحواف والهوامش الداخلية بشكل صحيح.
  • Scroll Behavior: يجعل التنقل بين أقسام الصفحة سلساً وناعماً.
  • Font Family: تحديد خط "Tajawal" كخط افتراضي لكامل جسم الصفحة.
CSSتنسيقات الجذور والجسم
/* ضع هذه الأكواد داخل وسم b:skin */

:root {
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --text-dark: #0f172a;
  --text-gray: #64748b;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Tajawal', sans-serif;
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
الخطوة الرالبعة

المكتبات الضرورية (Libraries)

قبل البدء، نحتاج لاستدعاء "المحركات" التي ستشغل الأيقونات والخطوط وزر الجوال.

ما هي المكتبات (Libraries)؟

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

لماذا نضيف هذه المكتبات؟

  • Google Fonts: لنحصل على خط "Tajawal" الذي يعطي طابعاً احترافياً للنصوص العربية.
  • Font Awesome: مكتبة ضخمة تتيح لنا إضافة أيقونات التواصل الاجتماعي وأيقونة القائمة الجانبية بسهولة.
  • طريقة الإضافة: يتم وضع الروابط دائماً بين وسمي <head> و </head>.
HTML Headالمكتبات المطلوبة
<!-- ضع هذه الروابط داخل وسم <head> في قالب بلوجر -->

<!-- أيقونات Font Awesome -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css'/>

<!-- خطوط جوجل العربية -->
<link href='https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap' rel='stylesheet'/>
الخطوة الخامسة

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

تعلم بناء شريط تنقل "عائم" قابل للتحكم من التنسيق.

متاح الآن
تم النسخ بنجاح! 🛠️

ليست هناك تعليقات:

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)