<!--انسخ الكود وضعه في صفحة جديدة باسم: دليل الوسائط واللغات--> <style> @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700;900&display=swap'); .media-doc-wrapper { font-family: 'Tajawal', sans-serif; direction: rtl; text-align: right; color: #334155; background: #fff; padding: 30px; border-radius: 16px; border: 1px solid #e2e8f0; } .media-header { text-align: center; margin-bottom: 40px; background: #f8fafc; padding: 30px; border-radius: 12px; border-bottom: 4px solid #f43f5e; } .media-header h1 { margin: 0 0 10px; color: #1e293b; font-weight: 900; } /* الكروت */ .info-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; margin-bottom: 25px; display: flex; gap: 20px; align-items: flex-start; } .card-icon { font-size: 24px; background: #fff1f2; color: #f43f5e; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; } .card-content h3 { margin: 0 0 10px 0; color: #0f172a; } .card-content p { margin: 0; font-size: 14px; color: #64748b; line-height: 1.6; } .size-badge { display: inline-block; background: #e2e8f0; color: #334155; padding: 4px 10px; border-radius: 6px; font-weight: bold; font-family: monospace; margin-top: 10px; } .lang-demo { display: flex; gap: 10px; margin-top: 15px; } .lang-btn { padding: 5px 15px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 13px; font-weight: bold; color: #64748b; } .lang-btn.active { background: #3b82f6; color: #fff; border-color: #3b82f6; } .update-alert { background: #fffbeb; border: 1px solid #fcd34d; padding: 15px; border-radius: 8px; color: #92400e; font-size: 14px; margin-top: 10px; } </style> <div class="media-doc-wrapper"> <div class="media-header"> <h1>دليل الوسائط، والتحديثات 📷</h1> <p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEhYskxvdWiIolD25mQUflSRWVDenpfBoWqpQbYq81Ox8kd5qzq3nepEoUU2DqlY3ZDghQlX-Qh9GKmdkAgCtPNEZgcWvOB8Jzf7QYK_iW1SBUz8c-Po1IcEYm01LDWGORWshblezfqHM7gj-IZP8wNRr4yrj2N7hpuv3HAOhaiTIowMl_-HV1RVPWilomY" 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/AVvXsEhYskxvdWiIolD25mQUflSRWVDenpfBoWqpQbYq81Ox8kd5qzq3nepEoUU2DqlY3ZDghQlX-Qh9GKmdkAgCtPNEZgcWvOB8Jzf7QYK_iW1SBUz8c-Po1IcEYm01LDWGORWshblezfqHM7gj-IZP8wNRr4yrj2N7hpuv3HAOhaiTIowMl_-HV1RVPWilomY=s16000-rw" /></a></div><br /><p></p><p>كل ما تحتاج معرفته لضمان ظهور موقعك بأفضل شكل وأداء.</p></div><div class="info-card"> <div class="card-content"> <h3>1. مقاسات الصور المثالية</h3> <p>القالب يستخدم نظام "قص ذكي" للصور، ولكن للحصول على أفضل دقة وعدم ظهور الصور بشكل "مضبب" أو مقصوص بشكل خاطئ، يفضل الالتزام بالمقاسات التالية:</p> <div style="display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-top: 10px;"> <div> <span style="display: block; font-weight: bold;">الصورة البارزة للمقال (Featured):</span> <span class="size-badge">1280 × 720 (16:9)</span> <p style="font-size: 12px; margin-top: 5px;">هذا المقاس يضمن ظهورها بشكل مثالي في السلايدر والفيسبوك.</p> </div> <div> <span style="display: block; font-weight: bold;">صورة اللوجو (Logo):</span> <span class="size-badge">العرض: 200px | الارتفاع: 60px</span> <p style="font-size: 12px; margin-top: 5px;">يفضل أن تكون بصيغة PNG وخلفية شفافة.</p></div></div></div></div><div class="info-card"> <div class="card-content"> <h3>3. طريقة تحديث القالب (دون فقدان البيانات)</h3> <p>عند صدور نسخة جديدة من القالب، اتبع هذه الطريقة لضمان عدم ضياع إعداداتك وأدواتك:</p> <ol style="font-size: 14px; padding-right: 20px;"> <li><b>لا تستخدم كود التنظيف</b> عند التحديث.</li> <li>انسخ كود القالب الجديد (النسخة الحديثة).</li> <li>اذهب إلى <b>المظهر</b> &gt; <b>تعديل HTML</b>.</li> <li>حدد الكود القديم بالكامل واستبدله بالجديد، ثم اضغط <b>حفظ</b>.</li> </ol> <div class="update-alert"> ⚠️ <b>ملاحظة هامة:</b> عند التحديث بهذه الطريقة، ستبقى أدوات التخطيط (مثل القوائم والإعلانات ومحتوى الصفحة الرئيسية) كما هي ولن تُحذف. فقط الألوان قد تعود للافتراضي إذا لم تكن قد حفظتها. </div> </div> </div> </div>