<!--انسخ الكود من هنا وضعه في صفحة جديدة في بلوجر في وضع (عرض HTML)--> <style> @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700;900&display=swap'); .extra-wrapper { font-family: 'Tajawal', sans-serif; direction: rtl; text-align: right; color: #334155; background: #f8fafc; padding: 30px; border-radius: 16px; line-height: 1.8; } .extra-header { text-align: center; margin-bottom: 40px; border-bottom: 2px dashed #cbd5e1; padding-bottom: 20px; } .extra-header h1 { font-size: 32px; font-weight: 900; color: #0f172a; margin: 0 0 10px; } .extra-header p { font-size: 18px; color: #64748b; } /* تنسيق الأقسام */ .tool-section { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 25px; margin-bottom: 30px; transition: transform 0.2s; } .tool-section:hover { transform: translateY(-3px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05); } .tool-title { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #f1f5f9; } .tool-icon { width: 45px; height: 45px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; } .tool-info h2 { margin: 0; font-size: 20px; color: #0f172a; } .tool-info span { font-size: 13px; color: #64748b; } /* ألوان الأيقونات */ .icon-weather { background: linear-gradient(135deg, #3b82f6, #6366f1); } .icon-redirect { background: linear-gradient(135deg, #10b981, #059669); } .icon-pwa { background: linear-gradient(135deg, #f59e0b, #d97706); } .icon-toc { background: linear-gradient(135deg, #ef4444, #dc2626); } .step-list { list-style: none; padding: 0; margin: 0; } .step-list li { position: relative; padding-right: 25px; margin-bottom: 12px; } .step-list li::before { content: ''; position: absolute; right: 0; top: 4px; color: #10b981; font-weight: bold; } .code-snippet { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-family: monospace; font-weight: bold; color: #c026d3; direction: ltr; display: inline-block; } .highlight-box { background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px; padding: 15px; font-size: 14px; color: #92400e; margin-top: 15px; } </style> <div class="extra-wrapper"> <div class="extra-header"> <h1>الأدوات والمميزات الإضافية 🛠️</h1> <p><br /></p><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjZQrhLUBNMSsVikTzr9ylwsFyuluQ4jWefrll1xJMxJRvGBIXvZMLWH3M4hUU8q8Bgyk0glAZjIKjV8M2l-Dsj_YEXYBwaUGPe6IIr-uCi84pGXhiSoHzb2xeE4gi0JLxvci4BDqyglAgSubWBYEW5OCnMGU8SiyRxmCiRZJDVuWEjB5jzWpYXW9MvHww" 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/AVvXsEjZQrhLUBNMSsVikTzr9ylwsFyuluQ4jWefrll1xJMxJRvGBIXvZMLWH3M4hUU8q8Bgyk0glAZjIKjV8M2l-Dsj_YEXYBwaUGPe6IIr-uCi84pGXhiSoHzb2xeE4gi0JLxvci4BDqyglAgSubWBYEW5OCnMGU8SiyRxmCiRZJDVuWEjB5jzWpYXW9MvHww=s16000-rw" /></a></div><br />إضافات حصرية تجعل موقعك متكاملاً دون الحاجة لأدوات خارجية.<p></p></div><div class="tool-section"><div class="tool-title"> <div class="tool-info"> <h2>أداة الطقس الحية</h2> <span>تعرض درجة الحرارة وتوقعات الطقس للزائر تلقائياً</span> </div> </div> <p>تظهر أيقونة الطقس بجانب زر البحث في الهيدر. عند الضغط عليها، تفتح نافذة منبثقة بتفاصيل الطقس لموقع الزائر.</p> <ul class="step-list"> <li>اذهب إلى <b>التخطيط</b>.</li> <li>ابحث عن أداة <b>"تفعيل ميزة الطقس"</b> (في الأسفل بقسم "لوحة تحكم القالب").</li> <li>تأكد من تفعيل الأداة (اضغط "تعديل" ثم فعّل خيار "إظهار الأداة").</li> <li>الأداة تعمل تلقائياً ولا تحتاج لأي ضبط آخر.</li> </ul> </div> <!--2. Redirect Page--> <div class="tool-section"> <div class="tool-title"> <div class="tool-icon icon-redirect">⏳</div> <div class="tool-info"> <h2>صفحة تحويل الروابط (Redirect)</h2> <span>لزيادة بقاء الزائر وزيادة أرباح الإعلانات</span> </div> </div> <p>يقوم القالب بتحويل جميع الروابط الخارجية داخل المقالات إلى صفحة انتظار مع عداد تنازلي.</p> <h3>خطوات التفعيل:</h3> <ol style="padding-right: 20px;"> <li>أنشئ صفحة جديدة بعنوان <b>Redirect</b> (أو "تحويل").</li> <li>تأكد أن رابط الصفحة هو: <span class="code-snippet">/p/redirect.html</span> (مهم جداً).</li> <li>اترك محتوى الصفحة فارغاً، القالب سيملؤها تلقائياً.</li> <li>اذهب إلى <b>التخطيط</b> &gt; أداة <b>"إعدادات صفحة تحويل الروابط"</b>.</li> <li>يمكنك تغيير مدة الانتظار من خلال تعديل الرقم في <span class="code-snippet">data-time="15"</span>.</li> </ol> <div class="highlight-box"> 💡 <b>نصيحة:</b> يمكنك وضع إعلانات AdSense داخل هذه الصفحة لزيادة الأرباح، حيث سيبقى الزائر فيها لمدة 15 ثانية. </div> </div> <!--3. PWA--> <div class="tool-section"> <div class="tool-title"> <div class="tool-icon icon-pwa">📱</div> <div class="tool-info"> <h2>تطبيق الويب (PWA)</h2> <span>تحويل الموقع لتطبيق هاتف قابل للتثبيت</span> </div> </div> <p>يدعم القالب ميزة PWA، مما يعني أن الزوار سيشاهدون زر "تثبيت التطبيق" في القائمة الجانبية أو كإشعار.</p> <ul class="step-list"> <li>التفعيل تلقائي بالكامل.</li> <li>فقط تأكد من رفع <b>أيقونة التفضيلات (Favicon)</b> بمقاس 512x512 بكسل من إعدادات التخطيط لضمان ظهور أيقونة التطبيق بشكل صحيح على هواتف الزوار.</li> </ul> </div> <!--4. Table of Contents--> <div class="tool-section"> <div class="tool-title"> <div class="tool-icon icon-toc">📑</div> <div class="tool-info"> <h2>جدول المحتويات التلقائي</h2> <span>فهرس للمقال لتحسين تجربة المستخدم و SEO</span> </div> </div> <p>يقوم القالب بإنشاء جدول محتويات تلقائياً في بداية كل مقال إذا وجد عناوين فرعية.</p> <ul class="step-list"> <li>يظهر الجدول فقط إذا كان المقال يحتوي على عنوانين (H2 أو H3) أو أكثر.</li> <li>يمكنك تفعيل/إيقاف هذه الميزة من التخطيط &gt; أداة <b>"تفعيل جدول المحتويات التلقائي"</b>.</li> </ul> </div> </div>