📁 آخر الأخبار

قالب بلوجر واجهة استضافه "هوست برو"



 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Download Button with Timer
⚠️ تنبيه: الرابط مباشر - الملف آمن تماماً وسريع جداً ⚠️
جارٍ تجهيز الرابط المباشر، يرجى الانتظار 15 ثانية...
اللهم صلي وسلم وبارك على نبينا محمد 🌺