# دليل التخصيص المتقدم - قالب بلوجر صفحة الهبوط ## 🎨 تخصيص الألوان والتصميم ### تغيير نظام الألوان الكامل في قسم ` `: ```html ``` #### تخصيص أحجام الخطوط: ```css .hero-title { font-size: clamp(2.5rem, 6vw, 5rem); /* عنوان أكبر */ } .hero-subtitle { font-size: clamp(1.25rem, 3.5vw, 2rem); /* عنوان فرعي أكبر */ } ``` ## 🖼️ تخصيص الصور والرسوم ### استبدال صور الكتب #### الطريقة 1: رفع صور مخصصة 1. ارفع صور الكتب إلى مكتبة الصور في بلوجر 2. انسخ رابط الصورة 3. استبدل في الكود: ```html خطوتك الأولى للتسويق بالعمولة استراتيجيات متقدمة للتسويق بالعمولة ``` #### الطريقة 2: استخدام خدمات الصور المجانية ```html ``` ### إضافة أيقونات مخصصة استبدل الإيموجي بأيقونات احترافية: ```html ``` ## 📝 تخصيص المحتوى والنصوص ### تخصيص العناوين والأوصاف #### العنوان الرئيسي: ```html

احصل على خصم 70% على الكتاب الثاني

``` #### الوصف الفرعي: ```html

الدليل الشامل للتسويق بالعمولة المتقدم - حصرياً للمحترفين

``` ### تخصيص المميزات أضف أو عدل المميزات حسب محتوى كتابك: ```html
💰

استراتيجيات الربح السريع

تقنيات مثبتة لتحقيق أرباح سريعة من التسويق بالعمولة خلال 30 يوم

``` ### تخصيص الشهادات أضف شهادات حقيقية من قرائك: ```html
⭐⭐⭐⭐⭐

"شهادة حقيقية من قارئ فعلي للكتاب الأول"

اسم القارئ الحقيقي

``` ## ⏰ تخصيص العدادات والمؤقتات ### تخصيص العداد التنازلي #### تغيير مدة العرض: ```javascript // في قسم JavaScript، غير هذه القيم const days = 10; // عدد الأيام const hours = 6; // عدد الساعات الإضافية const minutes = 0; // عدد الدقائق الإضافية const seconds = 0; // عدد الثواني الإضافية const endTime = now + (days * 24 * 60 * 60 * 1000) + (hours * 60 * 60 * 1000) + (minutes * 60 * 1000) + (seconds * 1000); ``` #### تخصيص تاريخ انتهاء محدد: ```javascript // انتهاء العرض في تاريخ محدد const endTime = new Date('2025-12-31 23:59:59').getTime(); ``` ### تخصيص عداد المقاعد ```javascript // تغيير العدد الإجمالي للمقاعد const totalSpots = 200; // بدلاً من 100 // تحديث العرض document.getElementById('remaining-spots').textContent = remainingSpots + ' / ' + totalSpots; ``` ## 🎯 تخصيص نموذج التسجيل ### إضافة حقول جديدة ```html
``` ### تخصيص رسائل التحقق ```javascript // في قسم JavaScript if (!data.name || data.name.length < 2) { alert('يرجى إدخال اسم صحيح (حرفين على الأقل)'); return; } if (!data.email || !data.email.includes('@')) { alert('يرجى إدخال بريد إلكتروني صحيح'); return; } if (!data.phone || data.phone.length < 10) { alert('يرجى إدخال رقم هاتف صحيح (10 أرقام على الأقل)'); return; } ``` ## 🔗 تخصيص الروابط والاتصال ### تغيير رابط API ```javascript // استبدل الرابط برابط API الخاص بك const apiUrl = 'https://your-domain.com/api/register'; const response = await fetch(apiUrl, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(data) }); ``` ### إضافة روابط وسائل التواصل ```html
واتساب تليجرام البريد الإلكتروني
``` ### إضافة CSS للروابط الاجتماعية ```css .social-links { display: flex; gap: 1rem; } .social-links a { color: #6b7280; text-decoration: none; font-size: 0.875rem; transition: color 0.3s ease; } .social-links a:hover { color: #3b82f6; } ``` ## 📊 إضافة تتبع وتحليلات ### Google Analytics أضف في قسم ``: ```html ``` ### تتبع التحويلات ```javascript // عند نجاح التسجيل if (response.ok) { // تتبع التحويل في Google Analytics gtag('event', 'conversion', { 'send_to': 'GA_MEASUREMENT_ID/CONVERSION_ID', 'value': 1.0, 'currency': 'SAR' }); // تتبع في Facebook Pixel fbq('track', 'Lead'); } ``` ## 🎨 تأثيرات بصرية متقدمة ### إضافة انيميشن للعناصر ```css /* انيميشن ظهور تدريجي */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .feature-card { animation: fadeInUp 0.6s ease-out; } /* انيميشن للأزرار */ @keyframes buttonPulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .submit-btn:hover { animation: buttonPulse 0.3s ease-in-out; } ``` ### تأثيرات الخلفية ```css /* خلفية متحركة */ .landing-page { background: linear-gradient(-45deg, #f0f4ff, #e0e7ff, #dbeafe, #bfdbfe); background-size: 400% 400%; animation: gradientShift 15s ease infinite; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } ``` ## 📱 تحسينات للهواتف المحمولة ### تحسين التصميم للشاشات الصغيرة ```css @media (max-width: 480px) { .hero-title { font-size: 2rem; line-height: 1.1; } .book-covers { flex-direction: column; gap: 1rem; } .plus-sign { transform: rotate(90deg); font-size: 1.5rem; } .timer-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } .features-grid { grid-template-columns: 1fr; gap: 1rem; } } ``` ### تحسين اللمس للهواتف ```css /* أزرار أكبر للمس */ .submit-btn { min-height: 48px; font-size: 1.125rem; } .form-input { min-height: 44px; font-size: 16px; /* منع التكبير في iOS */ } /* مساحة أكبر للنقر */ .timer-item { padding: 1rem; min-height: 80px; } ``` ## 🔧 نصائح الأداء والتحسين ### تحسين سرعة التحميل ```html وصف الصورة ``` ### تحسين CSS ```css /* استخدام CSS Grid بدلاً من Flexbox للتخطيطات المعقدة */ .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } /* تحسين الانيميشن */ .feature-card { will-change: transform; transition: transform 0.3s ease; } ``` هذا الدليل يوفر لك جميع الأدوات اللازمة لتخصيص القالب حسب احتياجاتك وهويتك البصرية!