أنشئ متجرك على منصة Blogger

ضبط إعدادات أساسية: اللغة، الرمز المفضّل (favicon)، والنطاق الخاص، وHTTPS

1) تغيير لغة المدونة إلى العربية

• من لوحة تحكم Blogger: اذهب إلى الإعدادات → اللغة والتنسيق.
• في خيار اللغة اختر: Arabic – العربية ثم اضغط حفظ.
• هذا يغيّر عناصر واجهة بلوجر للمستخدمين (القوائم، الأزرار، التنبيهات) للغة العربية.

2) إضافة الرمز المفضّل (Favicon) الذي يظهر بجانب عناوين التبويبات

• قم بتجهيز صورة مربعة (يفضّل مقاس 32×32 أو 48×48 بكسل) وحجمها أقل من 100 كيلوبايت.
• من لوحة تحكم Blogger: اذهب إلى الإعدادات.
• مرّر للأسفل حتى تصل إلى قسم الرمز المفضّل.
• اضغط على تحميل رمز مفضّل مخصّص.
• اختر ملف الصورة من جهازك، ويُفضّل أن تكون بصيغة .png
• احفظ التغييرات.
• بعد الحفظ، قم بتحديث الموقع في المتصفح، وقد يظهر الرمز الجديد خلال بضع دقائق (بسبب ذاكرة التخزين المؤقت).

3) ربط نطاق خاص (Domain) مع Blogger

يمكنك ربط نطاق خاص (مثل www.mystore.com) بدلًا من العنوان الافتراضي لمدونة Blogspot. هذه الخطوة تجعل متجرك يبدو أكثر احترافية.

الخطوة 1: شراء النطاق

• ادخل إلى موقع Namecheap لشراء دومين جديد.
• اختر اسماً مناسباً لمتجرك (مثلاً mystore).
• يمكنك اختيار الامتداد .store لأنه رخيص للسنة الأولى، أو .com إذا كنت تريد نطاقاً أكثر احترافية وطويلاً المدى.

🔗 شراء أو البحث عن نطاق في Namecheap

الخطوة 2: إنشاء حساب في Cloudflare

• اذهب إلى Cloudflare.com وأنشئ حساباً مجانياً.
• بعد تسجيل الدخول، اضف موقعك الجديد (مثلاً mystore.com).
• Cloudflare سيقوم بفحص سجلات DNS الحالية تلقائيًا.
• بعدها سيعطيك خادمي DNS جديدين (Nameservers).
• انسخ خادمي DNS اللذين يعرضهما لك Cloudflare، مثل:
  • abby.ns.cloudflare.com
  • ivan.ns.cloudflare.com

الخطوة 3: ربط Cloudflare مع Namecheap

• اذهب إلى حسابك في Namecheap → Domain List.
• اضغط على Manage بجانب اسم النطاق.
• في قسم Nameservers اختر: Custom DNS.
• ضع خادمي DNS من Cloudflare (اللذين نسختهما سابقاً).
• احفظ التغييرات.
• انتظر حوالي 10 إلى 30 دقيقة حتى يتم تفعيل DNS الجديد.

الخطوة 4: إضافة النطاق في إعدادات Blogger

• ادخل إلى لوحة تحكم Blogger → الإعدادات → النطاق الخاص.
• في الخانة اكتب اسم نطاقك بهذه الصيغة:
  www.yourdomain.com
• اضغط على حفظ.
• سيظهر لك تنبيه مثل:
  ‏لم نتمكّن من التحقّق من ملكيتك لهذا النطاق…
• تحت هذه الرسالة ستجد كودين من نوع CNAME مثل المثال التالي:

 (الاسم: www) → (الوجهة: ghs.google.com) (الاسم: yhan6ccxgcwg) → (الوجهة: gv-cdtwcesdp6safy.dv.googlehosted.com) 

الخطوة 5: إضافة سجلات CNAME في Cloudflare

• ارجع إلى لوحة Cloudflare، وافتح قسم DNS.
• اضغط على Add Record لإضافة سجل جديد.
• أنشئ السجلين التاليين:

• تأكد من أن السجلات مفعّلة بحالة DNS Only وليس Proxied.
• بعد الحفظ، عد إلى Blogger واضغط حفظ مجددًا في النطاق الخاص.
• سيتم التحقق من الملكية خلال دقائق، ثم ستنجح العملية.

الخطوة 6: تفعيل HTTPS

• من Blogger اذهب إلى الإعدادات → HTTPS.
• فعّل الخيارين:
  • مدى توفر HTTPS = متوفر ✅
  • إعادة التوجيه باستخدام HTTPS = مفعّل ✅
• انتظر قليلاً ليصدر Blogger شهادة SSL تلقائياً لموقعك.

إعدادات الأرشفة والفهرسة في Blogger

بعد تجهيز المدونة ونطاقها من المهم جداً ضبط إعدادات الأرشفة في بلوجر حتى تظهر صفحات منتجاتك في نتائج بحث Google بشكل صحيح.

الخطوة 1: تفعيل إعدادات الزحف والفهرسة

• من لوحة تحكم Blogger، ادخل إلى الإعدادات → الزحف والفهرسة.
• قم بتفعيل الخيار تمكين ملف robots.txt مخصص.

الخطوة 2: إعداد ملف robots.txt

يُساعد ملف robots.txt محركات البحث مثل Google وBing على معرفة الصفحات التي يُسمح لها بأرشفتها داخل موقعك. اتبع الخطوات التالية بدقة لضبط الملف بشكل صحيح:

1. اذهب إلى الإعدادات → الزحف والفهرسة → ملف robots.txt مخصص.
2. فعّل الخيار ملف robots.txt مخصص.
3. انسخ الكود التالي بالكامل وضعه داخل المربع:

User-agent: *
 Disallow: /search
 Allow: /
 Sitemap: https://example.blogspot.com/sitemap.xml
 Sitemap: https://example.blogspot.com/sitemap-pages.xml
 Sitemap: https://example.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500

بعد الحفظ، سيبدأ Google تلقائياً بقراءة هذا الملف وتنظيم عملية الزحف والفهرسة لموقعك بشكل أكثر دقة.

شرح الكود:

• User-agent: * → يعني أن هذه القواعد تنطبق على جميع محركات البحث.
• Disallow: /search → يمنع فهرسة صفحات نتائج البحث داخل المدونة لأنها مكررة وغير مفيدة.
• Allow: / → يسمح بفهرسة جميع صفحات الموقع ومنتجاتك.
• Sitemap: → يخبر Google بروابط خرائط الموقع ليجد جميع الصفحات بسهولة.

الخطوة 3: إرسال موقعك إلى Google

هذه الخطوة هي الأهم في عملية الأرشفة، لأنها تُخبر جوجل رسميًا بوجود موقعك حتى يبدأ في فهرسة الصفحات والمنتجات تدريجيًا.

• ادخل إلى Google Search Console.
• اضغط على إضافة موقع جديد (Add Property).
• اختر الخيار الثاني URL prefix ثم أدخل رابط موقعك الكامل:
  https://yourdomain.com
• إذا كنت تستخدم نفس حساب Google المسجل في Blogger، سيتم التحقق من الملكية تلقائيًا بدون الحاجة لإضافة أي وسم HTML.
• بعد تأكيد الملكية، من القائمة اليسرى اختر: خرائط المواقع (Sitemaps).
• في الحقل المخصص، أضف الروابط التالية واحدًا تلو الآخر (ثم اضغط إرسال بعد كل رابط):
  • sitemap.xml
  • sitemap-pages.xml
  • atom.xml?redirect=false&start-index=1&max-results=500
• انتظر قليلاً، ثم ستظهر الحالة: ✅ تم الإرسال بنجاح.
• يمكنك أيضًا إرسال أي صفحة جديدة يدويًا:
  من أعلى Search Console اختر فحص عنوان URL، أدخل رابط الصفحة أو المنتج ثم اضغط على طلب الفهرسة.

كيفية إضافة منتج جديد

في هذه الخطوة سنتعلم كيفية إنشاء صفحة منتج احترافية كاملة مع نموذج طلب مدمج.

خطوة 1: إنشاء صفحة المنتج الأولية

• من لوحة تحكم Blogger، اذهب إلى قسم الصفحات.
• اضغط على إضافة صفحة جديدة.
• في مربع العنوان، ضع اسم المنتج بالفرنسية أو الإنجليزية (مثال: samsung galaxy s25)، لأن هذا الحقل يُستخدم كـ Slug ويظهر في رابط صفحة المنتج.
• اضغط على نشر لحفظ الصفحة.

خطوة 2: الحصول على نموذج طلب Google Forms

نحتاج الآن لإنشاء نموذج Google Forms لاستقبال طلبيات العملاء.

1. من القائمة الجانبية في موقع تكوين صفحات المنتجات ، اضغط على نموذج الطلب للمنتجات.
2. ستفتح صفحة Google Drive تحتوي على ملف نموذج المتجر.
3. حدد الملف واضغط على إنشاء نسخة.
4. بعد إنشاء النسخة، اضغط على إظهار الملف.
5. ستجد النسخة في ملفاتي باسم “نسخة من نموذج المتجر”.
6. افتح النسخة واضغط على النشر في الأعلى.

خطوة 3: ربط النموذج بجداول البيانات

• داخل النموذج، اذهب إلى قسم الردود.
• اضغط على ربط بجداول البيانات.
• اختر إنشاء جدول بيانات جديد.
• في نفس قسم الردود، اضغط على النقاط الثلاث (⋮) بجانب أيقونة الجدول.
• اختر الحصول على إشعارات بالبريد الإلكتروني للردود الجديدة.

خطوة 4: نسخ رابط النموذج

• في أعلى صفحة النموذج، ستجد زر نسخ الرابط.
• اضغط عليه لنسخ رابط النموذج.
• احتفظ بهذا الرابط، سنحتاجه في الخطوة التالية.

خطوة 5: استخدام أداة تكوين صفحات المنتجات

الآن ننتقل إلى أداة تكوين صفحات المنتجات لإنشاء صفحة المنتج الكاملة.

أ. الإعدادات العامة

• رابط النموذج: الصق رابط Google Forms الذي نسخته.
• اضغط على زر التحويل لتحويل الرابط من viewform إلى formResponse.
• نص الشريط الإخباري: أضف نصاً ترويجياً (مثال: “توصيل مجاني للطلبات فوق 5000 دج”).
• أيقونة الشريط الإخباري: اختر أيقونة مناسبة.
• لون الخلفية ولون النص: خصص ألوان الشريط حسب هوية متجرك.

ب. إعدادات الميتا تاج (Meta Tags)

• عنوان الصفحة: ضع عنواناً وصفياً للمنتج.
• وصف الصفحة: أضف وصفاً مختصراً يظهر في محركات البحث.
• الكلمات المفتاحية: أضف كلمات مفتاحية ذات صلة بالمنتج.
• اسم المؤلف: ضع اسم متجرك.

ج. إعدادات المنتج

• عنوان المنتج: اسم المنتج الكامل.
• الفئة: التصنيف (مثال: إلكترونيات، ملابس، إلخ).
• السعر الحالي: السعر بعد التخفيض.
• السعر الأصلي: السعر قبل التخفيض. إذا لم يكن هناك تخفيض، ضع نفس السعر الحالي.
• الوصف القصير: وصف مختصر للمنتج.

خطوة 6: إضافة صور المنتج

لإضافة الصور، سنستخدم Blogger نفسه لرفع الصور ثم نستخرج روابطها.

1. ارجع إلى صفحة المنتج في Blogger.
2. اضغط على عرض HTML (وليس وضع الإنشاء).
3. أضف الصور عبر أيقونة الصورة.
4. بعد إضافة الصور، انسخ كامل كود HTML الناتج.
5. احذف الصور من المحرر (لن نحتاجها لأن Blogger خزنها بالفعل).

استخراج روابط الصور

• من القائمة الجانبية في أداة تكوين المنتجات، اضغط على أداة استخراج روابط الصور من النصوص.
• الصق كود HTML في المربع.
• اضغط على استخراج الصور.
• انسخ رابط أول صورة وضعه في الصورة الرئيسية.
• حدد باقي الصور واضغط على نسخ الرابط.
• اختر سطر تحت سطر لنسخ الروابط بشكل منفصل.
• الصق الروابط في الصور الإضافية للمعرض.

د. شارات المنتج

يمكنك إضافة شارات مثل “جديد” أو “تخفيض 30%” لتظهر فوق صورة المنتج.

هـ. قائمة الميزات

أضف ميزات المنتج، كل ميزة في سطر منفصل.

و. المواصفات التقنية

أضف المواصفات التقنية للمنتج إن وجدت.

خطوة 7: إعدادات متقدمة

أ. العروض الخاصة + الكمية

يمكنك إضافة عروض خاصة تظهر فوق نموذج الطلب، مع إمكانية:

• 🔢 تفعيل تحكم بالكمية لكل عرض مع حد أقصى.
• ✨ إضافة اختيار الألوان مع معاينة مرئية.
• 📏 إضافة اختيار المقاسات (حروف أو أرقام).
• 🎛️ تحكم كامل في تفعيل الكمية والألوان والمقاسات لكل عرض بشكل منفصل.

ب. البيكسل والتتبع

أضف أكواد تتبع Facebook Pixel أو TikTok Pixel لمتابعة أداء إعلاناتك.

ج. أسعار الشحن

حدد أسعار الشحن لكل ولاية في الجزائر.

خطوة 8: توليد الكود

• بعد إكمال جميع الإعدادات، اضغط على حفظ التكوين في الأعلى.
• اضغط على توليد الكود.
• سيظهر الكود الكامل في الأسفل.
• اضغط على نسخ الكود.

خطوة 9: نشر صفحة المنتج

• ارجع إلى صفحة المنتج في Blogger.
• تأكد من أنك في وضع عرض HTML.
• احذف أي محتوى قديم والصق الكود الجديد.
• اضغط على تحديث أو نشر.

إنشاء الصفحة الرئيسية وإضافة المنتجات

الآن بعد أن أنشأنا صفحات المنتجات، نحتاج لإنشاء واجهة رئيسية تعرض جميع منتجاتنا بشكل منظم وجذاب.

الجزء الأول: إنشاء واجهة المتجر الرئيسية

خطوة 1: الدخول إلى مولد الواجهة

ادخل إلى مولد واجهة متجر بلوجر.

خطوة 2: المحتوى الرئيسي

• العنوان الرئيسي: ضع عنواناً جذاباً لمتجرك.
• الوصف: أضف وصفاً مختصراً عن متجرك.

خطوة 3: العلامة التجارية

• اسم المتجر: اكتب اسم متجرك.
• اللوجو: ارفع شعار متجرك.

خطوة 4: إدارة التصنيفات

أضف تصنيفات منتجاتك مع اختيار أيقونة لكل تصنيف (مثل: إلكترونيات، ملابس، منزل، إلخ).

خطوة 5: قوائم الروابط (Header)

أضف روابط مهمة في الهيدر مثل:

• من نحن
• اتصل بنا
• سياسة الخصوصية

خطوة 6: إعدادات الفوتر (Footer)

• اللوجو في الفوتر: ارفع نفس اللوجو أو لوجو مختلف.
• وصف المتجر: نبذة مختصرة عن متجرك.
• الروابط السريعة: أضف روابط مثل:
  • معلومات الشحن
  • شروط الاستخدام
  • سياسة الخصوصية

خطوة 7: وسائل التواصل الاجتماعي

أضف روابط حساباتك على:

• فيسبوك
• إنستقرام
• واتساب
• تيك توك

خطوة 8: رقم الهاتف

أضف رقم هاتف متجرك للتواصل.

خطوة 9: إعدادات الشريط الإخباري

خصص الشريط الإخباري الذي يظهر في أعلى الصفحة.

خطوة 10: إعدادات البيكسل

أضف أكواد تتبع Facebook Pixel وTikTok Pixel.

خطوة 11: معاينة وتصدير

• اضغط على معاينة المتجر للتأكد من التصميم.
• إذا كان كل شيء جيداً، اضغط على تصدير الملف.
• سيتم تحميل ملف باسم blogger.html.

الجزء الثاني: إضافة بيانات المنتجات

خطوة 1: الدخول إلى لوحة إدارة المنتجات

ادخل إلى لوحة إدارة منتجات المتجر.

يمكنك أيضاً الوصول إليها من القائمة الجانبية في صفحة تكوين المنتجات.

خطوة 2: إضافة التصنيفات

• اذهب إلى قسم التصنيفات.
• أضف نفس التصنيفات التي أضفتها في واجهة المتجر.

خطوة 3: تجاهل أسعار الشحن

قسم أسعار الشحن غير مطلوب لمتاجر Blogger. هذا القسم مخصص فقط للمتاجر المستضافة على cPanel.

خطوة 4: إضافة منتج جديد

• اذهب إلى قسم المنتجات.
• اضغط على إضافة منتج.

أ. المعلومات الأساسية

• اسم المنتج: الاسم الكامل.
• التصنيف: اختر التصنيف المناسب.
• السعر الحالي: السعر بعد التخفيض.
• السعر الأصلي: إذا لم يكن هناك تخفيض، ضع نفس السعر الحالي.
• المخزون: ضع 999 (المخزون غير فعّال في متاجر Blogger).
• ترتيب العرض: رقم الترتيب في المعرض.

ب. التفاصيل والوصف

• الكلمات المفتاحية: أضف كلمات مفتاحية للمنتج.
• الوصف التفصيلي: ضع مسافة صغيرة أو نقطة (الحقل مطلوب لكن غير مستخدم في Blogger).
• المميزات: اتركه فارغاً.
• المواصفات التقنية: اتركه فارغاً.

ج. الصور والمعاينة

• الصورة الرئيسية: الصق رابط الصورة الرئيسية.
• الصور الإضافية: الصق روابط الصور مفصولة بفواصل (استخدم أداة استخراج الروابط واختر خيار “مفصولة بالفواصل”).

د. رابط الزر وإعدادات متقدمة

• رابط الزر “عرض المنتج”: الصق رابط صفحة المنتج من Blogger.
• كود مدمج: اتركه فارغاً.
• رابط مخصص: الصق نفس رابط صفحة المنتج.
• شارة المنتج: اختر شارة إن أردت (جديد، تخفيض، إلخ).

هـ. خيارات العرض

• فعّل إظهار زر “عرض المنتج” فقط.
• أطفئ إظهار زر “إضافة للسلة” (غير مطلوب في Blogger).

خطوة 5: حفظ المنتج

• اضغط على حفظ المنتج.
• كرر العملية لإضافة جميع منتجاتك.

خطوة 6: تصدير ملف البيانات

• بعد إضافة جميع المنتجات، اضغط على تصدير في الأعلى.
• سيتم تحميل ملف باسم data.js.

الجزء الثالث: دمج الملفات

خطوة 1: الدخول إلى أداة الدمج

ادخل إلى أداة دمج ملفات متجر Blogger.

خطوة 2: رفع الملفات

• ارفع ملف blogger.html (الواجهة الرئيسية).
• الموقع سيحفظ هذا الملف لاستخدامه لاحقاً (تحتاج لرفعه مرة واحدة فقط).
• ارفع ملف data.js (بيانات المنتجات).

خطوة 3: دمج الملفات

• اضغط على دمج.
• سيتم تحميل ملف مدمج جاهز.
• أو اضغط على نسخ الكود مباشرة لنسخ الكود الناتج.

خطوة 4: نشر الصفحة الرئيسية في Blogger

• في Blogger، اذهب إلى قسم المنشورات (وليس الصفحات).
• إذا كانت هناك منشورات قديمة، احذفها.
• اضغط على إضافة منشور جديد.
• ضع عنوان المنشور (مثال: “home page”).
• اضغط على عرض HTML.
• الصق الكود المدمج.
• اضغط على نشر.

الخطوات التالية

• ✅ تأكد من أن جميع روابط المنتجات تعمل بشكل صحيح.
• ✅ اختبر نموذج الطلب للتأكد من وصول الطلبيات إلى بريدك الإلكتروني وGoogle Sheets.
• ✅ ابدأ بالترويج لمتجرك عبر وسائل التواصل الاجتماعي.
• ✅ أضف إعلانات مدفوعة على فيسبوك أو تيك توك لزيادة المبيعات.

نوصي باستخدام استضافة Cloudflare Pages لأنها:

• ✅ مجانية
• ✅ سريعة جدًا
• ✅ بدون قيود حجم صارمة
• ✅ مناسبة لملفات JavaScript الكبيرة

خطوات رفع ملف data.js على Cloudflare:

• أنشئ حسابًا مجانيًا في Cloudflare Pages.
• ادخل إلى قسم workers pages.
• أنشئ مشروع جديد.
• ارفع ملف data.js داخل المشروع.
• بعد النشر، ستحصل على رابط مباشر للملف مثل:

 https://your-project.pages.dev/data.js 

تعديل الكود داخل ملف blogger.html:

افتح ملف blogger.html باستخدام أي محرر نصوص، ثم ابحث عن السطر التالي (حوالي السطر 2765):

 <script src="data.js?v=1.0.1"></script> 

استبدل data.js?v=1.0.1 برابط الملف المرفوع على الاستضافة:

 <script src="https://your-project.pages.dev/data.js"></script> 

بعد ذلك:

• احفظ الملف.
• أعد رفع ملف blogger.html داخل صفحة المتجر في بلوجر.
• حدّث الصفحة.

• ادخل إلى لوحة إدارة منتجات المتجر.
• أضف أو عدّل المنتجات.
• قم بتصدير ملف data.js الجديد.
• ادخل إلى حسابك في Cloudflare Pages .
• استبدل ملف data.js القديم بالملف الجديد.
• اضغط Deploy / Publish.
• انتظر ثواني حتى يتم التحديث تلقائيًا.

 <script src="https://your-project.pages.dev/data.js?v=2.0.0"></script>