دليل تركيب وتخصيص قالب واجهة "هوست برو" الاحترافية على بلوجر

في هذا المقال، سنستعرض تفاصيل الكود الخاص بواجهة شركة الاستضافة "هوست برو" التي قمنا بتصميمها، وسنشرح لك كيف يمكنك تركيبها على مدونة بلوجر الخاصة بك لتظهر بشكل احترافي وجذاب.

أولاً: مميزات الواجهة التقنية

تم بناء هذه الواجهة باستخدام أحدث تقنيات الويب لضمان أفضل تجربة مستخدم:

Tailwind CSS: استخدمنا هذا الإطار لتوفير تصميم عصري وسريع التحميل دون الحاجة لملفات CSS ضخمة.
تصميم متجاوب بالكامل: الواجهة تتكيف تلقائياً مع شاشات الهواتف الذكية، الجهاز اللوحي، والحاسوب.
محاكي بحث النطاقات: كود JavaScript ذكي يقوم بمحاكاة عملية البحث عن الدومينات لإعطاء طابع تفاعلي للموقع.
نموذج الدفع المنبثق (Modal): نظام إتمام شراء مدمج يظهر في نفس الصفحة لزيادة معدل التحويل (Conversion Rate).
خط Cairo: تم دمج خطوط جوجل العربية لضمان مظهر نصوص مريح للعين واحترافي.

ثانياً: تفاصيل هيكلة الكود

يتكون الكود من أربعة أجزاء رئيسية:

الرأس (Header & Nav): يحتوي على الشعار وروابط الانتقال السريع.
البحث (Domain Section): يعتمد على input و select مع دالة checkDomain البرمجية.
الخطط (Pricing): بطاقات عرض الأسعار مبنية باستخدام Flexbox و Grid لتنسيق احترافي.
النظام البرمجي (Script): يتحكم في فتح وإغلاق النوافذ المنبثقة وعمليات التحقق من البيانات.

ثالثاً: خطوات التركيب على بلوجر

إذا كنت ترغب في تحويل مدونتك بالكامل إلى هذه الواجهة، اتبع الخطوات التالية:

1. النسخ الاحتياطي

قبل البدء، اذهب إلى المظهر > تعديل HTML وقم بأخذ نسخة احتياطية من قالبك الحالي.

2. تنظيف القالب

استخدم كود "قالب التنظيف" لمسح كافة الإضافات القديمة لضمان عدم حدوث تداخل في الأكواد.

3. إضافة الكود الجديد

قم بنسخ الكود الكامل لملف hosting_interface.html.
في محرر HTML الخاص ببلوجر، امسح كل شيء والصق الكود.
اضغط على حفظ.

رابعاً: كيفية تخصيص الكود لمشروعك

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

تغيير الشعار: ابحث عن وسوم <span>هوست برو</span> واستبدلها باسم شركتك، أو ضع وسم <img> بدلاً منها.
تعديل الأسعار: ابحث عن رمز العملة $ والأسعار مثل 2.99 وقم بتغييرها بما يناسب خططك.
روابط التواصل: في قسم "تذييل الصفحة" (Footer)، قم بوضع روابط صفحاتك على فيسبوك وتويتر بدلاً من علامة #.
البريد المستلم: يمكنك ربط نموذج الاتصال بـ Formspree أو أي خدمة بريدية لاستقبال طلبات الشراء مباشرة على إيميلك.