<!--انسخ الكود من هنا وضعه في صفحة جديدة في بلوجر في وضع (عرض HTML)--> <style> /* تنسيقات صفحة الشرح */ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700;900&display=swap'); .doc-wrapper { font-family: 'Tajawal', sans-serif; direction: rtl; text-align: right; color: #334155; line-height: 1.8; background-color: #f8fafc; padding: 20px; border-radius: 12px; } .doc-header { text-align: center; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 2px dashed #cbd5e1; } .doc-header h1 { font-size: 32px; font-weight: 900; color: #1e293b; margin: 0 0 10px; } .step-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 25px; margin-bottom: 30px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); } .step-title { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; border-bottom: 1px solid #f1f5f9; padding-bottom: 15px; } .step-title h2 { margin: 0; font-size: 22px; color: #0f172a; } .code-snippet { background-color: #f1f5f9; color: #c026d3; font-family: monospace; padding: 2px 6px; border-radius: 4px; font-weight: bold; direction: ltr; display: inline-block; } .example-box { background-color: #fffbeb; border: 1px dashed #fcd34d; padding: 15px; border-radius: 8px; margin-top: 15px; } .example-title { font-weight: bold; color: #b45309; display: block; margin-bottom: 5px; } ul { padding-right: 20px; } li { margin-bottom: 10px; } </style> <div class="doc-wrapper"> <!--Header--> <div class="doc-header"> <h1>إعدادات الهيدر والقوائم</h1> <p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEh1Q2MGgVIvOwtiy0TifscO4cPMIWt4HTwSgzW8-CwUkCQya3yL8HZP3OFGBwSWnsWdXk-TTv8PqMmyTYclCNubM-NyUYmEGKtTyvAEl4fQ3DNdli0exCZQna-4A6P6elWxUh7OfiFbS-uuINtsuCWta4AVwc7d11WiU3OS6LDf7dcJQ2kPuEFevokVqMU" style="margin-left: 1em; margin-right: 1em;"><img alt="" data-original-height="720" data-original-width="1280" loading="lazy" src="https://blogger.googleusercontent.com/img/a/AVvXsEh1Q2MGgVIvOwtiy0TifscO4cPMIWt4HTwSgzW8-CwUkCQya3yL8HZP3OFGBwSWnsWdXk-TTv8PqMmyTYclCNubM-NyUYmEGKtTyvAEl4fQ3DNdli0exCZQna-4A6P6elWxUh7OfiFbS-uuINtsuCWta4AVwc7d11WiU3OS6LDf7dcJQ2kPuEFevokVqMU=s16000-rw" /></a></div><p></p><p>تعلم كيفية التحكم في شكل رأس الصفحة وإنشاء قوائم احترافية وميجا منيو.</p> </div> <!--Section 1: Header Styles--> <div class="step-card"> <div class="step-title"> <span style="font-size: 24px;">🎨</span> <h2>تغيير شكل الهيدر (Header Styles)</h2> </div> <p>القالب يدعم 3 أشكال مختلفة للهيدر تناسب جميع أنواع المواقع. للتبديل بينها:</p> <ol> <li>اذهب إلى <b>التخطيط (Layout)</b>.</li> <li>ابحث عن أداة باسم <b>"🎨 شكل الهيدر"</b> أو <b>"إعدادات الهيدر"</b> في الأعلى.</li> <li>اضغط "تعديل"، ستجد رابطاً باسم <span class="code-snippet">style</span>.</li> <li>في خانة <b>رابط الموقع (URL)</b> الخاصة بهذا العنصر، اكتب الرقم المناسب:</li> </ol> <div style="display: grid; gap: 15px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 20px;"> <div style="background: rgb(248, 250, 252); border-radius: 8px; border: 1px solid rgb(226, 232, 240); padding: 15px; text-align: center;"> <strong style="color: #3b82f6; display: block; font-size: 24px;">0</strong> <span style="color: #64748b;">الافتراضي (الموجي)</span> </div> <div style="background: rgb(255, 245, 245); border-radius: 8px; border: 1px solid rgb(254, 215, 170); padding: 15px; text-align: center;"> <strong style="color: #ef4444; display: block; font-size: 24px;">1</strong> <span style="color: #64748b;">الإخباري (أحمر/أبيض)</span> </div> <div style="background: rgb(240, 249, 255); border-radius: 8px; border: 1px solid rgb(186, 230, 253); padding: 15px; text-align: center;"> <strong style="color: #0ea5e9; display: block; font-size: 24px;">2</strong> <span style="color: #64748b;">التقني (أزرق/كحلي)</span> </div> </div> </div> <!--Section 2: Main Menu--> <div class="step-card"> <div class="step-title"> <span style="font-size: 24px;">📋</span> <h2>القائمة الرئيسية (Main Menu)</h2> </div> <p>يمكنك إضافة روابط عادية، قوائم منسدلة، أو قوائم ميجا متطورة من خلال أداة <b>"القائمة الرئيسية"</b> في التخطيط.</p> <h3 style="border-right: 4px solid rgb(59, 130, 246); color: #334155; margin: 25px 0px 15px; padding-right: 10px;">1. القائمة المنسدلة (Dropdown)</h3> <p>لجعل رابط فرعياً يظهر تحت رابط آخر، ضع رمز الشرطة السفلية <span class="code-snippet">_</span> قبل اسم الرابط.</p> <div class="example-box"> <span class="example-title">مثال تطبيقي (الترتيب في الأداة):</span> <ul> <li>الرئيسية</li> <li>أقسام الموقع (رابط رئيسي)</li> <li><span class="code-snippet">_</span>تطبيقات (سيظهر تحت "أقسام الموقع")</li> <li><span class="code-snippet">_</span>ألعاب (سيظهر تحت "أقسام الموقع")</li> </ul> </div> <h3 style="border-right: 4px solid rgb(16, 185, 129); color: #334155; margin: 25px 0px 15px; padding-right: 10px;">2. الميجا منيو (Mega Menu) 🔥</h3> <p>لعرض آخر المقالات من تصنيف معين داخل القائمة بشكل مصور وجذاب.</p> <ul> <li>أضف عنصراً جديداً للقائمة.</li> <li>في خانة <b>اسم الموقع</b>، اكتب: <span class="code-snippet">[mega] اسم التصنيف</span>.</li> <li>في خانة <b>رابط الموقع</b>، ضع رابط التصنيف (Label) أو اتركها #.</li> </ul> <div class="example-box" style="background-color: #f0fdf4; border-color: rgb(134, 239, 172);"> <span class="example-title" style="color: #15803d;">مثال:</span> إذا كان لديك تصنيف في المدونة باسم <b>"تكنولوجيا"</b> وتريد عرضه كميجا منيو:<br /> الاسم: <span class="code-snippet">[mega] تكنولوجيا</span><br /> <small style="color: #ef4444;">* ملاحظة: يجب أن يكون الاسم مطابقاً تماماً لاسم التسمية في مقالاتك.</small> </div> </div> <!--Section 3: News Ticker--> <div class="step-card"> <div class="step-title"> <span style="font-size: 24px;">📢</span> <h2>شريط الأخبار (News Ticker)</h2> </div> <p>للتحكم في شريط الأخبار المتحرك، اذهب لأداة <b>"⚙️ إعدادات شريط الأخبار"</b> في التخطيط.</p> <table style="border-collapse: collapse; margin-top: 15px; width: 100%;"> <tbody><tr style="background: rgb(241, 245, 249);"> <th style="border: 1px solid rgb(203, 213, 225); padding: 10px;">الاسم (Name)</th> <th style="border: 1px solid rgb(203, 213, 225); padding: 10px;">الرابط (URL)</th> <th style="border: 1px solid rgb(203, 213, 225); padding: 10px;">الوظيفة</th> </tr> <tr> <td style="border: 1px solid rgb(226, 232, 240); padding: 10px;">style</td> <td style="border: 1px solid rgb(226, 232, 240); padding: 10px;">1 إلى 5</td> <td style="border: 1px solid rgb(226, 232, 240); padding: 10px;">تغيير شكل الشريط (1 كلاسيكي، 2 تقني، 4 زجاجي...)</td> </tr> <tr> <td style="border: 1px solid rgb(226, 232, 240); padding: 10px;">title</td> <td style="border: 1px solid rgb(226, 232, 240); padding: 10px;">نص (مثل: عاجل)</td> <td style="border: 1px solid rgb(226, 232, 240); padding: 10px;">تغيير الكلمة التي تظهر في بداية الشريط.</td> </tr> <tr> <td style="border: 1px solid rgb(226, 232, 240); padding: 10px;">count</td> <td style="border: 1px solid rgb(226, 232, 240); padding: 10px;">رقم (مثل: 5)</td> <td style="border: 1px solid rgb(226, 232, 240); padding: 10px;">عدد الأخبار التي سيتم جلبها.</td> </tr> </tbody></table> </div> <div style="margin-top: 40px; text-align: center;"> <a href="#" style="background: rgb(30, 41, 59); border-radius: 50px; color: white; font-weight: bold; padding: 12px 30px; text-decoration: none;">الانتقال للدرس التالي: بناء الصفحة الرئيسية 👈</a> </div> </div>