منصة تعليمية متخصصة

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

نحول أفكارك البرمجية إلى واقع ملموس، من واجهات HTML إلى قوالب XML ذكية ومتجاوبة.

blogger_template.xml
1
2
3
4

.landing-page {

5

display: flex;

6

}

سرعة وأداء

قوالب متوافقة 100%

أرشفة ذكية Blogger Head Standard 2026

إتقان هندسة السيو
لقوالب بلوجر بمعايير احترافية

انتقل بمدونتك إلى معايير الاحتراف العالمية. دليل تقني يدمج بين سرعة الأرشفة، قوة الظهور، وتجربة المستخدم المثالية باستخدام أحدث بروتوكولات البحث.

أرشفة ذكية

أكواد Meta Tags متوافقة تماماً مع خوارزميات Google Search Console لتسريع الزحف.

انتشار اجتماعي

بروتوكول Open Graph يضمن ظهور مقالاتك بشكل جذاب على فيسبوك وتويتر وواتساب.

ذكاء اصطناعي

توليد كلمات دلالية ووصف ميتا ديناميكي لكل صفحة على حدة دون تكرار المحتوى.

فلسفة الأرشفة والظهور الرقمي

في عالم البحث الحديث، لم يعد يكفي كتابة محتوى جيد. الجانب التقني (Technical SEO) هو ما يحدد لغة التخاطب بين موقعك وبين "عناكب البحث". نظام Blogger Head Standard ليس مجرد مجموعة من الأوسمة، بل هو خوارزمية مبسطة تخبر جوجل: "هنا محتوى منظم، مفهرس، وجاهز للعرض".

تجنب المحتوى المكرر

يقوم النظام بفرز الصفحات؛ فلا يعامل صفحة "القسم" مثل صفحة "المقال"، مما يمنع جوجل من معاقبتك بسبب تكرار الأوصاف.

تحسين النقر (CTR)

من خلال ضبط العناوين والوصف، تظهر نتيجتك في محرك البحث بشكل مغرٍ للنقر، مما يرفع ترتيبك تلقائياً.

لماذا يجب عليك تغيير منطق قالبك؟

تعتمد قوالب بلوجر الافتراضية على بنية قديمة لا تميز بين أنواع الصفحات المختلفة. نظامنا البرمجي يقوم بـ تحليل نوع الصفحة قبل تحميل الوسوم، مما يضمن أن كل مقال يمتلك هويته الفريدة أمام محركات البحث.

  • إدارة الـ Canonical: توجيه محركات البحث للرابط الأصلي ومنع مشاكل الروابط المتعددة.
  • تحسين الـ Snippet: التحكم في كيفية ظهور الوصف تحت عنوان موقعك في نتائج البحث.
98%
تحسن في سرعة الأرشفة

دليل التنفيذ التقني

انسخ هذه الأجزاء وضعها داخل منطقة <head> في تعديل HTML للقالب.

01

أساسيات التكوين والترميز

ضروري جداً

ضبط ترميز اللغة وتوافقية المتعرضات لضمان أداء ثابت على كافة الأجهزة.

هذا الجزء يضمن أن مدونتك تفتح بشكل صحيح على الهواتف الذكية وتتوافق مع المتصفحات القديمة والحديثة (مثل Chrome و Safari).

CONFIG BASE
<meta charset='utf-8'/>
<meta content='IE=edge' http-equiv='X-UA-Compatible'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
02

هندسة العناوين الذكية

هام جداً

هذا الكود يقلب موازين القوى بجعل عنوان المقال يسبق اسم المدونة، وهو المطلب الأول لخبراء السيو.

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

TITLE ARCHITECTURE
<title>
  <b:if cond='data:blog.pageType == "index"'>
    <data:blog.pageTitle/>
  <b:else/>
    <b:if cond='data:blog.pageType != "error_page"'>
      <data:blog.pageName/> | <data:blog.title/>
    <b:else/>
      عذراً، الصفحة غير موجودة | <data:blog.title/>
    </b:if>
  </b:if>
</title>
03

الأوصاف والكلمات المفتاحية الذكية

توليد تلقائي للوصف بناءً على نوع الصفحة لتجنب مشاكل "الوصف المكرر" في Google Search Console.

DYNAMIC META TAGS
<b:if cond='data:blog.searchLabel'>
  <meta expr:content='"عرض كل التدوينات تحت قسم " + data:blog.pageName' name='description'/>
<b:else/>
  <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' name='description'/>
  </b:if>
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <meta content='كلمات, رئيسية, للمدونة' name='keywords'/>
<b:else/>
  <meta expr:content='data:blog.pageName + ", " + data:blog.title' name='keywords'/>
</b:if>
04

السيو الاجتماعي (Open Graph)

اجعل روابطك تبدو غنية واحترافية عند مشاركتها على فيسبوك، تويتر وواتساب.

لضمان ظهور "صورة مصغرة" احترافية عند مشاركة رابط مدونتك على وسائل التواصل.

SOCIAL GRAPHS
<b:if cond='data:blog.pageType == "item"'>
  <meta content='article' property='og:type'/>
<b:else/>
  <meta content='website' property='og:type'/>
</b:if>

<b:if cond='data:blog.pageType == "index"'>
  <meta expr:content='data:blog.pageTitle' property='og:title'/>
<b:else/>
  <meta expr:content='data:blog.pageName' property='og:title'/>
</b:if>

<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='ar_AR' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
05

نظام الوصف الديناميكي

هام جداً

يولّد وصفاً فريداً لصفحات الأقسام ويستخدم الوصف اليدوي للمقالات، مما يمنع مشكلة "المحتوى المكرر" في نتائج البحث.

Description system
<b:if cond='data:blog.searchLabel'>
  <meta expr:content='"تصفح كافة المقالات المتعلقة بـ " + data:blog.pageName + " في مدونة " + data:blog.title' name='description'/>
  <meta expr:content='"تصفح كافة المقالات المتعلقة بـ " + data:blog.pageName + " في مدونة " + data:blog.title' property='og:description'/>
<b:else/>
  <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' property='og:description'/>
    <meta expr:content='data:blog.metaDescription' name='description'/>
  </b:if>
</b:if>
06

أرشفة الصور الذكية

محرك معالجة الصور

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

CONFIG BASE
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta expr:content='data:blog.postImageUrl' property='og:image:secure_url'/>
<meta expr:content='data:blog.pageName' property='og:image:alt'/>
<b:if cond='!data:blog.postImageUrl'>
  <b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
    <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image:secure_url'/>
  <b:else/>
    <meta content='ضع رابط الصورة هنا' property='og:image'/>
  </b:if>
</b:if>
<meta content='image/jpeg' property='og:image:type'/>
07

تكامل تويتر المتقدم X/Twitter،

يقوم بتهيئة المقالات لتظهر كبطاقات غنية (Cards) على منصة X/Twitter، مع ضبط حجم المعاينة والمحتوى النصي المقتبس آلياً.

X/Twitter،
<meta expr:content='data:blog.url' name='twitter:url'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<b:if cond='data:blog.pageType == "index"'>
  <meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<b:else/>
  <meta expr:content='data:blog.pageName' name='twitter:title'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
  <meta content='summary_large_image' name='twitter:card'/>
  <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:else/>
  <meta content='summary' name='twitter:card'/>
  <b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
  </b:if>
</b:if>
<b:if cond='data:blog.metaDescription'>
  <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
08

روابط RSS/Atom والأرشفة

RSS/Atom

يوفر مسارات التغذية القياسية لعناكب البحث وبرامج قراءة الأخبار، مما يسرع من عملية اكتشاف المقالات الجديدة فور نشرها.

RSS/Atom
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"https://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == "item"'>
  <b:if cond='data:blog.postImageThumbnailUrl'>
    <link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
  </b:if>
</b:if>
اكواد جاهزة وتحسينات سيو شاملة 2026

ابدأ رحلة التصدر اليوم

كيفية إعداد ملف Robots.txt لمدونة بلوجر (مع أداة توليد فورية)

أداة توليد ملف Robots.txt المجانية
تم نسخ الكود بنجاح
اقرا المزيد »

نظام عرض المنتج ⚙️

متجر المنتجات الذكي ✨

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

مفهوم النظام

تصميم صفحة هبوط بلوجر لعرض منتجات

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

التحكم بالمنتجات من لوحة الإدارة

تصميم متجر بلوجر

سنقوم بتجهيز قالب برمجياً يقرأ البيانات من ادوات بلوجر، وسيتولى القالب تنسيقها تلقائياً لتظهر بشكل احترافي.

كود تصميم متجر منتجات احترافي لمدونات بلوجر

سيتم عرض المنتج المرفوع تلقائياً مع زر الطلب المباشر.


معاينة الواجهة

بطاقة المنتج العريضة (Split Design)

هذا هو الشكل الذي سيظهر لزوار مدونتك، تصميم عصري يركز على الصورة أولاً ثم التفاصيل.

صورة المنتج

آيفون 15 برو ماكس - 256 جيجا

أقوى معالج في هاتف ذكي على الإطلاق، مع كاميرا بدقة 48 ميجابكسل وتصميم مذهل من التيتانيوم القوي والخفيف.

4999
طلب عبر واتساب
مهم جداً قبل البدء
⚠️ إجراء أمان: قبل إجراء أي تعديل على أكواد القالب (HTML)، يرجى الذهاب إلى المظهر > تخصيص > الاحتفاظ بنسخة احتياطية. هذا يضمن لك استعادة مدونتك في ثوانٍ إذا حدث أي خطأ أثناء اللصق.
تعديل القالب

كيفية إضافة كود الهيكل (XML/HTML)

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

  • الدخول لمحرر الأكواد: توجه إلى لوحة تحكم بلوجر > المظهر > تعديل HTML.
  • تحديد المكان المناسب: ابحث عن الوسم </header> أو المكان الذي تريد عرض المنتج فيه (غالباً يكون فوق وسم <div class='main-wrapper'>).
  • لصق الكود: قم بنسخ الكود أدناه ولصقه في المكان المختار، ثم اضغط على زر حفظ.
HTMLPost Template
<!-- بداية منطقة المنتج الواحد - نظام التنسيق -->
<section class='lp-product-area' id='lp-product-area'>
  <b:section id='landing-product' maxwidgets='3' showaddelement='yes'>
    
    <!-- أداة الصورة: المسؤولة عن شكل المنتج ووصفه -->
    <b:widget id='Image500' locked='false' title='بيانات المنتج الرئيسية' type='Image'>
      <b:includable id='main'>
        <div class='single-product-display'>
          <div class='product-visual'>
             <img expr:src='data:sourceUrl' expr:alt='data:title'/>
          </div>
          <div class='product-details'>
             <h1><data:title/></h1>
             <p class='product-description'><data:caption/></p>
             <div class='price-tag'>0.00</div>
             <a class='whatsapp-btn' href='#'>اطلب الآن عبر واتساب</a>
          </div>
        </div>
      </b:includable>
    </b:widget>

    <!-- أداة النص: المسؤولة عن السعر -->
    <b:widget id='Text501' locked='false' title='سعر المنتج' type='Text'>
      <b:includable id='main'>
        <div class='raw-price-value' style='display:none'><data:content/></div>
      </b:includable>
    </b:widget>

    <!-- أداة النص: المسؤولة عن رقم الواتساب -->
    <b:widget id='Text502' locked='false' title='رقم الواتساب' type='Text'>
      <b:includable id='main'>
        <div class='raw-phone-value' style='display:none'><data:content/></div>
      </b:includable>
    </b:widget>

  </b:section>
</section>
<!-- نهاية منطقة المنتج الواحد -->
إضافة كود التنسيق (CSS)

قم بالبحث عن وسم </b:skin> في قالبك، وضع الكود التالي فوقه مباشرة لضمان ظهور البطاقة بشكل احترافي:

CSSProduct Card Styling
/* =========================================
تنسيق بطاقة المنتج
   ========================================= */
 section.lp-product-area {
            padding: 80px 20px;
            background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .single-product-display {
            display: grid;
            grid-template-columns: 1fr 1.1fr;
            background: #ffffff;
            border-radius: 32px;
            overflow: hidden;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            margin: 0 auto;
            max-width: 1050px;
            position: relative;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            border: 1px solid rgba(255, 255, 255, 0.8);
        }

        .single-product-display:hover {
            transform: translateY(-5px);
            box-shadow: 0 30px 50px rgba(0, 0, 0, 0.15);
        }

        .product-visual {
            position: relative;
            background: #fdfdfd;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 30px;
            background-image: radial-gradient(circle at center, #ffffff 0%, #f1f5f9 100%);
            overflow: hidden;
        }

        .product-visual::before {
            content: '';
            position: absolute;
            width: 150%;
            height: 150%;
            background: #3b82f6;
            opacity: 0.03;
            border-radius: 45%;
            top: -25%;
            left: -25%;
            animation: rotate 20s linear infinite;
        }

        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .product-visual img {
            max-width: 100%;
            width: 100%;
            height: auto;
            aspect-ratio: 1/1;
            object-fit: contain;
            filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.12));
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            border-radius: 20px;
            z-index: 2;
        }

        .single-product-display:hover .product-visual img {
            transform: scale(1.05) rotate(-2deg);
        }

        .product-details {
            padding: 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            background: #ffffff;
        }

        .product-details h1 {
            font-size: 2.5rem;
            margin: 0 0 15px 0;
            color: #0f172a;
            line-height: 1.2;
            font-weight: 800;
            letter-spacing: -0.5px;
        }

        p.product-description {
            font-size: 1.15rem;
            color: #64748b;
            margin-bottom: 35px;
            line-height: 1.7;
            font-weight: 400;
        }

        .price-tag {
            font-size: 2.5rem;
            font-weight: 900;
            color: #3b82f6;
            margin-bottom: 35px;
            display: flex;
            align-items: baseline;
            gap: 8px;
        }

        .price-tag::after {
            content: 'ر.س';
            font-size: 1rem;
            font-weight: 600;
            color: #64748b;
        }

        .whatsapp-btn {
            background: #25d366;
            color: #fff;
            text-decoration: none;
            padding: 18px 30px;
            border-radius: 16px;
            font-weight: 700;
            text-align: center;
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            box-shadow: 0 10px 20px rgba(37, 211, 102, 0.2);
            border: none;
            cursor: pointer;
        }

        .whatsapp-btn:hover {
            background: #1eb959;
            transform: scale(1.02);
            box-shadow: 0 15px 30px rgba(37, 211, 102, 0.3);
        }

        .whatsapp-btn svg {
            width: 24px;
            height: 24px;
            fill: currentColor;
        }

        /* شارة اختيارية (Badge) */
        .product-badge {
            position: absolute;
            top: 25px;
            right: 25px;
            background: #0f172a;
            color: white;
            padding: 6px 16px;
            border-radius: 50px;
            font-size: 0.85rem;
            font-weight: 700;
            z-index: 10;
        }

        /* التجاوب مع الشاشات الصغيرة */
        @media (max-width: 992px) {
            .single-product-display {
                grid-template-columns: 1fr;
                max-width: 500px;
                margin: 20px auto;
            }
            
            .product-details {
                padding: 30px;
                text-align: center;
            }

            .product-details h1 {
                font-size: 1.8rem;
            }

            .price-tag {
                justify-content: center;
            }

            .product-visual {
                padding: 40px;
            }
        }

        @media (max-width: 480px) {
            section.lp-product-area {
                padding: 40px 15px;
            }
            .product-details {
                padding: 25px 20px;
            }
        }
التحكم بالبيانات

كيفية ملء البيانات من لوحة "التنسيق"

بعد حفظ القالب، اذهب إلى صفحة التنسيق، ستجد قسماً جديداً باسم "product-area" يحتوي على 3 أدوات:

1

تعديل أداة الصورة

افتح الأداة، ارفع صورتك الاحترافية، اكتب "اسم المنتج" في العنوان، واكتب "الوصف التسويقي" في خانة الشرح (Caption).

2

تعديل أداة السعر

افتح أداة النص المسماة "سعر المنتج"، واكتب الرقم فقط (مثلاً: 2500) دون أي عملات.

3

تعديل أداة الواتساب

افتح أداة النص الثالثة، واكتب رقمك بالصيغة الدولية (مثلاً: 9665000000) ليعمل رابط الشراء التلقائي.

javascript

سكربت الربط البرمجي (اللمسة الأخيرة)

ضع هذا السكربت قبل وسم </body> لدمج البيانات تلقائياً في التصميم:

text javascriptjavascript
<script>
window.addEventListener('load', function() {
    // جلب القيم من الأدوات المخفية
    const priceVal = document.querySelector('.raw-price-value')?.innerText.trim();
    const phoneVal = document.querySelector('.raw-phone-value')?.innerText.trim();
    const prodTitle = document.querySelector('.product-details h1')?.innerText;

    // حقن السعر في مكانه الصحيح
    if(priceVal) document.querySelector('.price-tag').innerText = priceVal;
    
    // بناء رابط الواتساب التلقائي
    if(phoneVal) {
        const text = encodeURIComponent(`مرحباً، أود طلب المنتج: ${prodTitle}`);
        document.querySelector('.whatsapp-btn').href = `https://wa.me/${phoneVal}?text=${text}`;
    }
});
</script>
الخطوة التالية

قسم آراء العملاء (Testimonials)

إضافة شهادات العملاء لزيادة الموثوقية في قالبك.

قريبا
تم النسخ! لا تنسَ أخذ نسخة احتياطية من القالب أولاً.
اقرا المزيد »

مرونة كاملة 🧩

تصميم قسم المميزات المطور

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

دليل الاستخدام

كيف ستدير مميزات موقعك؟

بدلاً من كتابة الأكواد المعقدة في كل مرة، قمنا بتصميم نظام يتيح لك إضافة كل "ميزة" كأداة منفصلة من لوحة تحكم بلوجر. يمكنك الآن اختيار الأيقونة التي تعجبك، كتابة العنوان الذي تفضله، وإضافة وصف تفصيلي بكل سهولة مع إمكانية ترتيبها بالسحب والإفلات.

قسم المميزات تصميم قالب بلوجر
متطلبات أساسية

استدعاء مكتبة Font Awesome

قبل البدء، الأيقونات المستخدمة في هذا الشرح تعتمد على مكتبة Font Awesome. إذا لم تكن مضافة في قالبك، فلن تظهر الأيقونات. تأكد من إضافة رابط المكتبة داخل وسم <head> في تعديل HTML الخاص بالقالب.

HTMLFont Awesome CDN
<!-- رابط Font Awesome (أضفه داخل head) -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css' rel='stylesheet'/>
ملاحظة: إذا كان قالبك يحتوي بالفعل على إصدار قديم من Font Awesome، قد تحتاج لتحديثه أو استخدام مسميات الأيقونات المتوافقة معه.
الخطوة الأولى

إضافة هيكل HTML الديناميكي (المطور)

ضع هذا الكود تحت قسم الهيرو. لقد قمنا بتطوير الهيكل ليشمل قسم خاص (Text) يحتوي على أيقونة وعنوان ووصف يمكن تعديلهم بالكامل من واجهة "التنسيق"، يليه حاوية features-grid التي تقبل إضافات متعددة.

Blogger XMLHTML & Widgets Structure
<!-- قسم المميزات المطور -->
<section class='features-section' id='features'>
  
  <!-- عنوان القسم (يُعدل من التنسيق عبر أداة نص) -->
  <b:section id='features-title-area' class='section-title-wrapper' maxwidgets='1' showaddelement='yes'>
    <b:widget id='Text99' locked='false' title='مميزاتنا' type='Text'>
      <b:includable id='main'>
        <div class='section-header'>
           <i class='fas fa-th-large sub-icon'></i>
           <b:if cond='data:title != ""'>
             <h2><data:title/></h2>
           </b:if>
           <div class='section-desc'>
             <data:content/>
           </div>
        </div>
      </b:includable>
    </b:widget>
  </b:section>

  <!-- شبكة المميزات -->
  <div class='features-grid'>
    <b:section id='advanced-features-section' class='features-list' showaddelement='yes'>
      <!-- إضافة المميزات كـ HTML/Javascript -->
    </b:section>
  </div>
</section>
الجديد هنا: يمكنك الآن الذهاب إلى "التنسيق" وتعديل أداة "عنوان قسم المميزات" لتغيير العنوان الرئيسي والوصف دون لمس الأكواد.
الخطوة الثانية

تنسيقات الـ CSS الفاخرة

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

CSS3Premium Cards Styling
/* تنسيقات قسم المميزات */
.features-section { 
padding: 80px 5%; 
background: #ffffff; 
}

.section-header { 
text-align: center; 
margin-bottom: 50px; 
}

.section-header .sub-icon {
  font-size: 1.5rem; color: var(--primary);
  background: #e0e7ff; padding: 12px;
  border-radius: 12px; 
  margin-bottom: 15px; 
  display: inline-block;
}

.section-header h2 { 
font-size: 2.5rem; 
color: var(--text-dark); 
font-weight: 800; 
margin: 10px 0; 
}
.section-desc { 
color: var(--text-gray); 
max-width: 600px; 
margin: 0 auto; 
font-size: 1.1rem; 
}

/* السطر السحري للتجاوب */
.features-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px; max-width: 1200px; margin: 0 auto;
}

/* توزيع الشبكة */
.features-grid .features-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}
/* تنسيق بطاقة الميزة (الودجت) */
.features-list .widget {
  background: #f8fafc;
  padding: 40px;
  border-radius: 30px;
  border: 1px solid #f1f5f9;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.features-list .widget:hover {
  background: #ffffff;
  transform: translateY(-12px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
}

/* تنسيق المحتوى داخل الودجت */
.feature-item { text-align: right; }
.feature-item i {
  width: 60px;
  height: 60px;
  background: var(--accent-gradient);
  color: #6366f0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  font-size: 1.5rem;
  margin-bottom: 25px;
  box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3);
}
.feature-item h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: var(--text-dark);
  font-weight: 700;
}
.feature-item p {
  font-size: 1rem;
  color: var(--text-gray);
  line-height: 1.8;
  margin: 0;
}

@media (max-width: 768px) {
  .section-header h2 { font-size: 1.8rem; }
  .features-list { grid-template-columns: 1fr; }
}
شرح تقني

كيف يعمل التجاوب (Responsiveness)؟

لقد استخدمنا تقنية CSS Grid مع السطر السحري التالي:

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
ماذا يعني هذا؟ هذا يخبر المتصفح بإنشاء أكبر عدد ممكن من الأعمدة بشرط ألا يقل عرض أي بطاقة عن 300px. إذا قلّت المساحة (كما في الجوال)، ستنزل البطاقات تلقائياً لتقع أسفل بعضها البعض دون الحاجة لكتابة أكواد @media معقدة لكل حجم شاشة.
الخطوة الثالثة

كيف تضيف ميزة من لوحة التحكم؟

اذهب إلى التنسيق (Layout) > ابحث عن قسم advanced-features-section > اضغط إضافة أداة > اختر HTML/JavaScript > ثم ضع الكود التالي في "المحتوى":

Widget Contentكود الميزة الواحدة
<div class="feature-item">
  <i class="fas fa-rocket"></i>
  <h3>سرعة خارقة</h3>
  <p>نضمن لك تحميل صفحات موقعك في أقل من ثانية بفضل تقنياتنا المتطورة.</p>
</div>
نصيحة: يمكنك تغيير الأيقونة بتغيير fa-rocket إلى أي اسم أيقونة من موقع Font Awesome (مثل: fa-shield-alt, fa-headset, fa-chart-line).
لوحة التحكم

🛠️ كيف تتحكم في القسم من لوحة تحكم بلوجر؟

بعد إضافة الأكواد السابقة، لن تحتاج للدخول إلى محرر HTML مرة أخرى. يمكنك إدارة كل شيء من قائمة "التنسيق" (Layout) كالتالي:

1. تعديل العنوان الرئيسي والوصف

ابحث عن أداة باسم "مميزاتنا" (أو الاسم الذي اخترته) من نوع "نص" (Text) في لوحة التنسيق:

  • العنوان (Title): اكتب هنا العنوان الذي يظهر في المنتصف (مثل: خدماتنا المتميزة).
  • المحتوى (Content): اكتب هنا الوصف التفصيلي الذي يظهر أسفل العنوان.
  • الأيقونة: تظهر الأيقونة تلقائياً حسب الكود، ويمكنك تغييرها برمجياً من المحرر إذا أردت تخصيصاً أكبر.

2. إضافة ميزة جديدة (Card)

داخل منطقة advanced-features-section، اضغط على "إضافة أداة" ثم اختر HTML/JavaScript:

  • العنوان: يمكنك تركه فارغاً أو كتابة اسم الميزة للتنظيم الداخلي فقط.
  • المحتوى: انسخ كود "الميزة الواحدة" (الذي يحتوي على الأيقونة والعنوان الصغير والوصف) والصقه هناك.

3. إعادة الترتيب (السحب والإفلات)

أجمل ما في هذا النظام هو المرونة؛ يمكنك سحب "ودجت" ميزة معينة ووضعها قبل أخرى، وسيتم تحديث الترتيب في الموقع فوراً دون أي تعديل في الكود.

💡 نصيحة للمحترفين: إذ أردت جعل الأيقونة الرئيسية (Icon) قابلة للتعديل أيضاً من التنسيق دون لمس الكود، يمكنك تغيير السطر الخاص بالأيقونة في الـ XML ليقرأ من "خلاصة" معينة، ولكن الطريقة الحالية هي الأضمن للمبتدئين لضمان ثبات التصميم.
ملحوظة: تأكد دائماً من الضغط على زر "حفظ" (أيقونة الديسكيت) أسفل يسار صفحة التنسيق لتطبيق التغييرات على مدونتك.
الخطوة الثالثة

نظام عرض المنتج

عرض المنتجات بتنسيق متجاوب مع أزرار طلب مباشرة.

متاح الأن
تم النسخ بنجاح! 🚀
اقرا المزيد »

التحكم الكامل ⚙️

ربط قسم الـ Hero بلوحة التحكم

سنجعل النصوص والصور قابلة للتغيير من قسم "التنسيق" دون الحاجة لفتح محرر الأكواد في كل مرة.

هل سئمت من الدخول إلى محرر الأكواد في كل مرة تريد فيها تغيير جملة تسويقية أو تحديث صورة منتجك في واجهة المدونة؟ في هذا الدرس، سننتقل بمدونتك من "القوالب الجامدة" إلى "الأنظمة الديناميكية". سنتعلم معاً كيف نستخدم قوة وسوم بلوجر البرمجية b:section لتحويل قسم الـ Hero إلى لوحة تحكم مصغرة تسمح لك بتعديل محتواك بضغطة زر من صفحة التنسيق.

إنشاء قسم الهيرو في بوجر
الفكرة البرمجية

تحويل التصميم إلى ودجت (Widgets)

بدلاً من كتابة الروابط والصور يدوياً، سنقوم بإنشاء "حاويات" (Sections) تستقبل الأدوات من لوحة تحكم بلوجر، مما يجعل القالب مرناً وسهل التعديل لأي مستخدم.

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

هيكل HTML الديناميكي

قم بالبحث عن وسام </nav> في قالبك، وضعه مباشرة تحت وسم </nav> أو في المكان المخصص لعرض الهيدر.

أداة النصوص (Title & Description): في قسم hero-text-section، اضغط على "إضافة أداة" واختر "رأس الصفحة" (Header). سيقوم هذا بجلب عنوان ووصف مدونتك تلقائياً.
أداة الأزرار (Buttons): في قسم hero-buttons-section، اضغط على "إضافة أداة" واختر "قائمة روابط" (Link List). اسم الرابط سيكون هو نص الزر، وعنوان URL سيكون وجهة الزر.
أداة الصورة (Hero Image): في قسم hero-image-section، اضغط على "إضافة أداة" واختر "صورة" (Image). يمكنك رفع صورة منتجك أو شعار موقعك لتظهر بجانب النصوص مع تأثير الحركة.
Blogger XMLتوضع داخل <body>
<!-- قسم الهيرو الديناميكي -->
<section class='hero-section' id='hero'>
  <div class='hero-container'>
 
    <div class='hero-content'>
      <!-- 1. حاوية النصوص -->
      <b:section class='hero-text-section' id='hero-text-section' maxwidgets='1' showaddelement='yes'>
      </b:section>

      <!-- 2. حاوية الأزرار -->
      <div class='hero-btns'>
        <b:section class='hero-buttons-section' id='hero-buttons-section' showaddelement='yes'>
        </b:section>
      </div>
    </div>

    <div class='hero-image'>
      <!-- 3. حاوية الصورة -->
      <b:section class='hero-image-section' id='hero-image-section' maxwidgets='1' showaddelement='yes'>
      </b:section>
    </div>

  </div>
</section>
الخطوة الثانية

تنسيقات CSS المتقدمة

انسخ هذه التنسيقات وضعها فوق وسم ]]></b:skin>. لقد صممنا هذه الأكواد لتعرف تلقائياً متى يتم إضافة رابط (ليتحول لزر) ومتى يتم إضافة صورة (ليتم توسيطها وتحريكها).

CSS3توضع في منطقة التنسيق
/* =========================================
   تنسيقات قسم الهيرو الشاملة
   ========================================= */

.hero-section {
  padding: 150px 0 100px;
  background: radial-gradient(circle at top right, #fdfcfb 0%, #e2d1c3 100%);
}

.hero-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  gap: 50px;
}

/* تنسيق النصوص (أداة الرأس) */
.hero-content { flex: 1; }
.hero-content .Header h1 {
  font-size: 3.5rem;
  color: #0f172a;
  font-weight: 800;
  margin-bottom: 20px;
}
.hero-content .Header .description {
  font-size: 1.2rem;
  color: #64748b;
  margin-bottom: 30px;
}

/* تنسيق الأزرار (أداة قائمة الروابط) */
.hero-btns ul { 
  list-style: none; 
  padding: 0; 
  display: flex; 
  gap: 15px; 
}
.hero-btns ul li a {
  display: inline-block;
  background: var(--primary);
  color: white !important;
  padding: 15px 35px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
  box-shadow: 0 10px 20px rgba(99, 102, 241, 0.2);
}
.hero-btns ul li a:hover { transform: translateY(-3px); background: var(--primary-dark); }

/* تنسيق الصورة (أداة الصورة) */
.hero-image { flex: 1; text-align: center; }
.hero-image img {
  max-width: 100%;
  height: auto;
  border-radius: 30px;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
  animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@media (max-width: 992px) {
  .hero-container { flex-direction: column; text-align: center; }
  .hero-image { order: -1; }
  .hero-btns ul { justify-content: center; }
}
الخطوة الثالثة

تنسيق وضع التخطيط (Layout)

لكي يظهر لك قسم التعديل بشكل منظم وواضح داخل "لوحة التحكم" ولا يتداخل مع العناصر الأخرى، أضف هذا الكود في بداية منطقة الـ CSS:

CSSخاص بلوحة التحكم
/* تحسين مظهر الأقسام في صفحة التنسيق */
body#layout #hero-text-section {
    margin-top: 110px;
    border: 2px dashed #6366f1;
    padding: 10px;
}
الخطوة الرابعة

تصميم قسم المميزات (Features)

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

متاح الأن
تم النسخ! جاهز للربط 🔗
اقرا المزيد »

تصميم نافبار متجاوب 📱

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

بناء شريط تنقل "عائم" مع قائمة جوال جانبية وروابط تواصل ديناميكية

الهيكل المطور

كود HTML (قالب بلوجر)

لقد أضفنا قسم nav-cta كمنطقة ودجت لتتحكم في روابط السوشيال ميديا من التنسيق.

طريقة تركيب الهيكل:
  1. توجه إلى المظهر ثم تعديل HTML.
  2. ابحث عن الوسم الشهير <body>.
  3. قم بلصق الكود أدناه مباشرة بعد وسم <body> أو في المكان المخصص للرأس (Header).
HTML5هيكل النافبار
<nav class='nav-container'>
  <div class='nav-inner'>
    <!-- زر الجوال -->
    <div class='menu-toggle' id='mobile-menu'>
      <i class='fas fa-bars'/>
    </div>

    <!-- القائمة الرئيسية -->
    <div class='nav-links' id='nav-links-container'>
      <b:section class='header-menu' id='header-menu' showaddelement='yes'>
         <b:widget id='LinkList10' locked='false' title='القائمة الرئيسية' type='LinkList'/>
      </b:section>
    </div>

    <!-- أيقونات التواصل والسلة (ديناميكية) -->
    <div class='nav-cta'>
      <b:section id='nav-icons' class='icons-area' showaddelement='yes'>
        <b:widget id='LinkList11' locked='false' title='روابط التواصل' type='LinkList'/>
      </b:section>
    </div>
  </div>
</nav>
التنسيق العائم

كود CSS المتجاوب

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

طريقة تركيب التنسيق:
  1. داخل محرر HTML الخاص بالقالب، ابحث عن وسم </b:skin> أو </style>.
  2. قم بلصق كود CSS التالي قبله مباشرة لضمان تطبيق التنسيقات على النافبار.
CSS Styleتنسيق النافبار
/* إعدادات النافبار العائم */
.nav-container {
  position: fixed;
  top: 15px;
  left: 5%;
  right: 5%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  z-index: 9999;
  padding: 5px 15px;
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-links ul {
  display: flex;
  list-style: none;
  gap: 25px;
  margin: 0;
  padding: 0;
}

.nav-links a {
  text-decoration: none;
  color: #1e293b;
  font-weight: 600;
  transition: 0.3s;
}

/* تنسيق أيقونات التواصل */
.nav-cta ul {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-cta a {
  background: var(--primary);
  color: white !important;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: 0.3s;
}

.nav-cta a:hover { transform: scale(1.1); }

.menu-toggle {
  display: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #1e293b;
}

/* الجوال */
@media (max-width: 768px) {
  .menu-toggle { display: block; }
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 250px;
    height: 100vh;
    background: white;
    flex-direction: column;
    padding: 80px 20px;
    transition: 0.4s ease;
    box-shadow: -10px 0 30px rgba(0,0,0,0.1);
  }
  .nav-links.active { right: 0; }
  .nav-links ul { flex-direction: column; gap: 20px; }
}
تفعيل النافبار

كود التفعيل زر الجوال في النافبار (JS)

ملاحظة هامة: ضعه قبل وسم </body> مباشرة لضمان تحميل العناصر قبل تنفيذ الكود.

JSجافاسكريبت
التنقل الداخلي

كيف تربط القائمة بأقسام الصفحة؟

لجعل الزائر ينتقل إلى قسم معين عند الضغط على رابط في النافبار (مثل الانتقال إلى "المميزات")، اتبع هذه الطريقة البسيطة:

  1. تأكد أن القسم الذي تريد الذهاب إليه يمتلك ID (معرف فريد). مثلاً قسم المميزات في الدروس القادمة سيكون id='features'.
  2. في لوحة تحكم بلوجر (قسم التنسيق)، عند إضافة رابط جديد في أداة القائمة الرئيسية:
    • في خانة اسم الموقع: اكتب "المميزات".
    • في خانة عنوان URL: اكتب رمز الهاشتاج متبوعاً بالمعرف #features.
  3. عند الضغط على الرابط، ستقوم الصفحة بالنزول تلقائياً إلى ذلك القسم بفضل كود CSS الذي أضفناه.
إدارة أيقونات التواصل

كيف تضيف أيقونات التواصل؟

لإضافة أيقونة (واتساب أو تيليجرام أو السلة) من لوحة التحكم:

  1. اذهب إلى التنسيق (Layout) > ابحث عن nav-icons.
  2. أضف رابطاً جديداً: في "اسم الموقع" ضع كود الأيقونة، وفي "العنوان" ضع رابطك.
  3. أمثلة لأسماء المواقع (الأيقونات):
    • للواتساب: <i class="fab fa-whatsapp"></i>
    • للتيليجرام: <i class="fab fa-telegram"></i>
    • للسلة: <i class="fas fa-shopping-bag"></i>
الخطوة التالية

إنشاء قسم الهيرو (Hero Section)

شرح برمجة قسم الواجهة الرئيسي (Hero) وربطه بأدوات بلوجر

متاح الأن
تم نسخ الكود بنجاح!
اقرا المزيد »