قالب متجر الخدمات والمنتجات الرقمية لبلوجر
لو بتقدّم خدمات رقمية (تصميم، برمجة، تسويق، ملفات جاهزة) وعايز متجر كامل على بلوجر بشكل احترافي ومن غير تكلفة استضافة — القالب ده متعمل مخصوص ليك: كل خدمة = مقال، والسعر بيظهر تلقائي على الكارت، والعميل بيطلب من غير ما يسجّل أي حاجة، والطلب بيروحلك على واتساب واقف جاهز.
- 20 قسم كلهم تحت السيطرة من «التنسيق»
- متجر كامل: كروت + سلة + نافذة طلب
- الطلب يوصلك على واتساب برسالة جاهزة
- سيو كامل + بيانات منظمة (Schema)
- وضع ليلي + تصميم متجاوب 100%
- بدون أي إضافات أو اشتراكات
 |
| امتلك متجر خدمات ومنتجات رقمية على بلوجر مجاناً الآن! (احترافي فوق الوصف ومتوافق مع السيو 100%🎁). |
القالب ده بيعمل إيه بالظبط؟
القالب بيحوّل مدونة بلوجر العادية لمتجر إلكتروني حقيقي للخدمات والمنتجات الرقمية:
- كل خدمة = مقال/تدوينة: عنوانها = اسم الخدمة، ومحتواها = الوصف، وأول صورة فيها = صورة الخدمة وصورة المشاركة.
- الصفحة الرئيسية بتعرض 20 خدمة في شبكة احترافية، وتحتها زر «شوف خدمات أكتر» بيحمّل الباقي في نفس الصفحة.
- كل كارت خدمة فيه: صورة + تسمية القسم + العنوان + وصف مختصر + السعر (بالعملة اللي تحددها) + زر «اطلب دلوقتي» + زر إضافة للسلة.
- الطلب على واتساب: بيفتح نافذة بسيطة (الاسم / الكمية / ملاحظات) وبعدها بتروحلك رسالة منظّمة فيها الخدمة والسعر على واتساب — أو تنسخ الرسالة بنقرة واحدة.
- سلة طلبات: العميل يضيف أكتر من خدمة، ويشوف الإجمالي، ويبعت الطلب كله مرة واحدة.
- صفحة الخدمة (المنتج) بتعرض الخدمة + السعر + طريقة الطلب + «خدمات ليها علاقة»، مع بيانات منظمة لمحركات البحث.
- كل حاجة قابلة للتعديل من «التنسيق» بدون لمس أي كود: الترتيب + الإظهار/الإخفاء + النصوص + الصور.
أهم 12 ميزة في القالب
تحكم كامل من التنسيق
القالب مقسّم 20 قسم، كل قسم فيه أداة مستقلة: رتّب بالسحب، اخفي، أو غيّر المحتوى بنفسك من غير كود.
أسعار مرنة
5 طرق لتحديد السعر: من لوحة التحكم بالاسم، أو كود جوه المقال، أو وسم price-250، أو من نص المقال، أو السعر الافتراضي.
طلب مباشر على واتساب
نافذة طلب + سلة + نسخ الرسالة، والطلب يوصلك منسّق فيه الخدمة والسعر والكمية والإجمالي.
سيو كامل
عنوان ديناميكي، Meta Description، Canonical، Robots، Open Graph وTwitter، وh1 واحد لكل صفحة — بدون أي إضافة.
بيانات منظمة Schema
OnlineStore + WebSite + SearchAction للموقع، وProduct + BreadcrumbList لكل خدمة — جاهزة تظهر في نتائج بحث جوجل.
صورة مشاركة تلقائية
أول صورة في المقال بتتحوّل تلقائيًا لصورة مشاركة على واتساب/فيسبوك/تويتر، أو تحدّد صورة ثابتة من لوحة التحكم.
وضع ليلي
زر تبديل فوري بين الوضع النهاري والليلي، ومعاه حفظ اختيار الزائر — والتصميم متظبّط في الوضعين.
متجاوب 100%
مختبر على الموبايل (390px) والتابلت (768px) والديسكتوب — مفيش تمرير أفقي خالص، ومعاه شريط سفلي سريع في صفحة الخدمة.
سريع وخفيف
بدون jQuery ولا مكتبات خارجية، صور بـ lazy-loading، وحركات ظهور خفيفة — أداء عالي ونتيجة سريعة.
ألوان وشكل قابلين للتخصيص
من «المظهر ← تخصيص» تقدر تغيّر الألوان الأساسية وعرض الصفحة والمسافات واستدارة الكروت من غير كود.
صفحات قانونية جاهزة
شريط روابط + 7 صفحات قانونية بنصوص عربية جاهزة: الخصوصية، الشروط، الاسترجاع، التسليم، من نحن، اتصل بنا، إخلاء المسؤولية.
يعمل حتى بدون أدوات
كل قسم فيه «محتوى احتياطي» جوه القالب: لو الأدوات مش متزرّعة الموقع بيظهر كامل تلقائيًا ومش بيبان فاضي.
تحميل القالب
ملف XML واحد للرفع على بلوجر + ملفات شرح جاهزة — بدون أي إضافات أو برامج.
| الملف | الوظيفة |
|---|---|
digitalstore-pro.xml | القالب نفسه — ده الملف اللي ترفعه على بلوجر (المظهر ← تعديل HTML ← الصق ← حفظ). |
اقرأني-مهم.txt | تعليمات الرفع المختصرة + سجل التغييرات لكل إصدار. |
الصفحات-القانونية-عربي.txt | نصوص 7 صفحات قانونية بالعربي جاهزة للنسخ واللصق (خصوصية / شروط / استرجاع / تسليم / من نحن / اتصل بنا / إخلاء مسؤولية). |
وسوم-الأسعار.txt | كل وسوم الأسعار الجاهزة (price-50 لحد price-5000) + طريقة تحديد الأسعار بالاسم. |
digitalstore-pro.xml في Notepad وتحفظه —
ده بيضيف BOM وبلوجر بيرفضه وبيقول Content is not allowed in prolog.
لو محتاج تفتحه استخدم VS Code أو Notepad++، أو الأسهل: ارفعه من غير ما تفتحه.
طريقة تركيب القالب على بلوجر (خطوة بخطوة)
- افتح بلوجر ← المظهر (Theme) ← من قائمة النقاط الثلاث (⋮) اختار تعديل HTML.
- اضغط جوه مربع الكود وأعمل Ctrl + A لتحديد كل الكود القديم، وبعدين Ctrl + V للصق كود القالب الجديد.
- اضغط حفظ (💾). لو ظهر أي خطأ راجع الملاحظة اللي تحت.
- روح الإعدادات ← المقالات ← الحد الأقصى للصفحة الرئيسية = 20 (عشان الرئيسية تعرض 20 خدمة)، وبعدين حفظ.
- روح الإعدادات ← أساسي وفعّل علامات وصف البحث (Meta tags) واكتب وصف قصير للمتجر، وفعّل ملف robots.txt مخصص لو أداة سيو قالتلك إنه ناقص.
- افتح التنسيق (Layout) ← هتلاقي 20 قسم بأسماء عربية (① الشريط الإعلاني … ⑳ لوحة تحكم المتجر). من هنا تظبط كل حاجة.
- افتح أداة ⑳ ⚙️ لوحة تحكم المتجر ← تعديل ← غيّر: اسم المتجر، رقم الواتساب، العملة، السعر الافتراضي، ولينكات السوشيال ← حفظ.
- افتح ⑯ ⚖️ الصفحات القانونية وحط روابط صفحاتك القانونية (النصوص جاهزة في ملف
الصفحات-القانونية-عربي.txt). - انشر خدماتك (كل خدمة = مقال جديد)، وخلّي أول صورة في كل مقال هي الصورة الرئيسية للخدمة.
- افتح الصفحة الرئيسية واعمل Ctrl + F5 — كده المتجر شغال ✅
<html — لازم تلاقي lang='ar' ومن غير class='v2'.
خريطة الأقسام: 20 قسم كلهم في «التنسيق»
كل قسم بيظهر في «التنسيق» باسمه ورقمه، وتقدر تسحبه وترتّبه، أو تخفيه من غير ما تمسحه:
| # | القسم | بيعمل إيه | النوع |
|---|---|---|---|
| ① | الشريط الإعلاني العلوي | شريط خصومات/عروض فوق خالص | أداة HTML |
| ② | الشعار / عنوان المتجر | اسم المتجر أو اللوجو في الهيدر | أداة العنوان |
| ③ | القائمة الرئيسية | لينكات الأقسام + زر البحث + الوضع الليلي | أداة HTML |
| ④ | القسم الرئيسي (Hero) | أول حاجة الزائر يشوفها + شارتَي «تسليم فوري» و«دفع آمن» — الصفحة الرئيسية فقط | أداة HTML |
| ⑤ | شريط المزايا والضمانات | 4 مزايا (تسليم على السريع / دفع آمن / دعم على طول / جودة مضمونة) — الرئيسية فقط | أداة HTML |
| ⑥ | خطوات الطلب | «بتطلب إزاي؟ 3 خطوات وبس» — الرئيسية فقط | أداة HTML |
| ⑦ | عنوان شبكة الخدمات | عنوان الشبكة + الوصف + زر «شوف الكل» — الرئيسية فقط | أداة HTML |
| ⑧ | شبكة الخدمات الرئيسية | 20 خدمة + زر «شوف خدمات أكتر» + الترقيم | أداة Blog (تلقائي) |
| ⑨➕ | مساحة حرة تحت الخدمات | تحط فيها أي أداة تحبها (بانر، إحصائيات، آراء…) | حرة |
| ⑩ | الدعوة للطلب (CTA) | «فريقنا جاهز ينفذلك الخدمة» + أزرار واتساب/فيسبوك — الرئيسية فقط | أداة HTML |
| ⑪➕ | مساحة حرة فوق الفوتر | أي أداة تحبها قبل الفوتر | حرة |
| ⑫ | الفوتر — عن المتجر | نبذة + أيقونات التواصل (واتساب/فيسبوك/انستقرام/تيليجرام/يوتيوب/تويتر) | أداة HTML |
| ⑬ | الفوتر — روابط سريعة | لينكات مهمة (الرئيسية، الخدمات، اتصل بنا…) | أداة HTML |
| ⑭ | الفوتر — التصنيفات | روابط أقسام المتجر | أداة HTML |
| ⑮ | الفوتر — كلمنا | الإيميل + العنوان + مواعيد العمل | أداة HTML |
| ⑯ | ⚖️ الصفحات القانونية | شريط روابط الصفحات القانونية (7 صفحات) | أداة HTML |
| ⑰ | الفوتر — حقوق النشر | سطر الحقوق: اسم المتجر + السنة الحالية تلقائيًا | أداة HTML |
| ⑱➕ | مساحة حرة تحت الفوتر | كود إعلانات/تحليلات أو أي أداة | حرة |
| ⑲ | الأزرار العائمة | واتساب + فيسبوك (شمال) + زر الصعود للأعلى (يمين) | أداة HTML |
| ⑳ | ⚙️ لوحة تحكم المتجر | كل إعدادات المتجر (مخفية عن الزائر تمامًا) | أداة HTML |
/search/label/تصميم بيفتح صفحة القسم.
وفي صفحات الأقسام بتظهر الخدمات لوحدها (بدون هيرو ولا مزايا ولا خطوات)، نفس الكلام في صفحة الخدمة والصفحات الثابتة —
الأقسام التسويقية بتظهر في الصفحة الرئيسية فقط.
لوحة تحكم المتجر ⑳ — أكبر خانة تتحكم فيها من مكان واحد
من التنسيق ← ⑳ ⚙️ لوحة تحكم المتجر ← تعديل هتلاقي الكود ده. غيّر القيم اللي جوه علامات التنصيص بس،
وسيب أسماء data-… زي ما هي بالظبط:
<div id='dpStoreConfig' data-store-name='متجر الخدمات الرقمية' data-tagline='تصميم • برمجة • تسويق • ملفات جاهزة' data-logo='' data-og-image='' data-currency='$' data-default-price='99' data-phone='966500000000' data-phone-label='' data-facebook='https://www.facebook.com/your-page' data-instagram='' data-telegram='' data-youtube='' data-twitter='' data-email='support@example.com' data-address='القاهرة - مصر' data-hours='من السبت للخميس، 10 ص - 10 م' data-order-mode='modal' data-wa-message='السلام عليكم، عايز أعرف تفاصيل الخدمات الرقمية عندكم' data-thank-you='جهّزنا طلبك! كمّل الإرسال على واتساب وهنبدأ فوراً.' data-prices='' data-order-label='' data-loadmore-label='' data-home-label='' data-search-ph='' data-empty-label='' data-cart-title='' data-cart-empty='' data-related-title=''></div>
| الإعداد | وظيفته | مثال |
|---|---|---|
data-store-name | اسم المتجر (بيظهر في الحقوق والهيدر لو مش حاطط لوجو) | متجر الصباغ للخدمات |
data-tagline | الوصف المختصر تحت الاسم | تصميم • برمجة • تسويق |
data-logo | رابط صورة اللوجو (بدل الاسم النصي) | https://...logo.png |
data-currency | علامة العملة اللي تظهر جان كل رقم | $ أو ر.س |
data-default-price | السعر الافتراضي لأي خدمة من غير سعر | 99 |
data-phone | رقم الواتساب بالكود الدولي من غير + (أهم خانة!) | 201234567890 |
data-phone-label | النص اللي جانب رقم الواتساب | اطلب على واتساب |
data-wa-message | أول رسالة تتكتب تلقائي في واتساب | السلام عليكم… |
data-thank-you | رسالة الشكر بعد إرسال الطلب | جهّزنا طلبك! |
data-order-mode | طريقة الطلب: modal (نافذة) أو direct (واتساب مباشر) | modal |
data-prices | تحديد أسعار بالاسم بدون وسوم | تصميم لوجو=350 | إدارة حملات=800 |
data-og-image | صورة مشاركة ثابتة للموقع كله (لو فاضية = أول صورة من كل مقال) | https://...share.jpg |
data-facebook / data-instagram / data-telegram / data-youtube / data-twitter | لينكات التواصل — أي خانة فاضية أيقونتها بتختفي لوحدها | https://x.com/account |
data-email / data-address / data-hours | بيانات «كلمنا» في الفوتر | support@site.com |
data-order-label | نص زر الطلب في الكروت (فاضي = «اطلب دلوقتي») | اطلب الخدمة |
data-loadmore-label | نص زر «شوف خدمات أكتر» | شوف خدمات أكتر |
data-related-title | عنوان قسم الخدمات المشابهة في صفحة الخدمة | خدمات ليها علاقة |
data-cart-title / data-cart-empty | عنوان نافذة السلة ونص السلة الفاضية | سلة الطلبات |
data-search-ph / data-empty-label / data-home-label | نصوص خانة البحث / «مفيش خدمات» / كلمة «الرئيسية» | دوّر على خدمة… |
إزاي تضيف خدمة/منتج جديد؟
- مقال جديد: العنوان = اسم الخدمة، والمحتوى = وصف الخدمة (اكتب براحتك وبأي تنسيق).
- الصورة: حط صورة واحدة على الأقل جوه المقال — القالب بياخد أول صورة تلقائيًا كصورة للكارت وكصورة مشاركة.
- السعر: أسهل طريقة → في التسميات (Labels) اكتب
price-500(ملاحظة: وسم منفصل، مش مع التصنيف). - التصنيف: ضيف تسمية القسم كمان (زي
تصميمأوبرمجة) — دي اللي بتظهر كشريحة على الكارت واللي بتتبني عليها صفحات الأقسام. - انشر — الخدمة هتظهر في الشبكة فورًا مع السعر وزر «اطلب دلوقتي» (اعمل Ctrl+F5 لو مش ظاهرة).
الأسعار: كل الطرق وكل الأكواد
الطريقة 1: وسم السعر (الأسهل والأشهر)
في خانة التسميات (Labels) بتاعة المقال اكتب وسم بالشكل ده (كلمة price + شرطة + الرقم، بدون مسافات):
price-500
وصيغ تانية شغّالة بنفس النتيجة:
price-250 price:250 price 250 price_250 price=250 سعر-500 السعر-500 سعرها-500
الطريقة 2: كود جوه المقال
حط الكود ده في أي مكان جوه المقال (بيظبط سعر صفحة الخدمة، والكارت لو الوسم مش موجود):
<span class="dp-price-box" data-dp-price="500">500</span>
الطريقة 3: من لوحة التحكم بالاسم (بدون وسوم)
data-prices='عمل الباك لينك=500 | تصميم لوجو=350 | إدارة حملات إعلانية=800'
الفاصل بين كل خدمة والتانية | وبين الاسم والسعر =، والمطابقة بتشتغل بجزء من اسم الخدمة
وبتتجاهل الشرطات وحالة الحروف.
الطريقة 4 و 5: من نص المقال / السعر الافتراضي
- لو كتبت في نص المقال «السعر: 250» القالب بيلقطه لوحده.
- لو مفيش أي سعر خالص → بيظهر السعر الافتراضي من
data-default-price.
ترتيب الأولويات (مهم)
| # | المصدر | بيغلب اللي بعده |
|---|---|---|
| 1 | قائمة الأسعار بالاسم data-prices من لوحة التحكم | ✅ الأقوى |
| 2 | الكود جوه المقال data-dp-price | |
| 3 | الوسم price-500 | |
| 4 | أي ذكر للسعر في نص المقال | |
| 5 | السعر الافتراضي data-default-price | ✅ الأضعف |
price-… لكل خدمة،
واستخدم data-prices بس لما تحب تغيّر أسعار كتير بسرعة من مكان واحد.
زر الطلب على واتساب والسلة
لما الزائر يضغط «اطلب دلوقتي» بتفتح نافذة بسيطة: الاسم (اختياري) + الكمية + ملاحظات، وبعد ما يأكد بتتحوّل الرسالة على واتساب بشكل منظّم:
• الخدمة: تصميم لوجو احترافي • السعر: 350 $ • الكمية: 2 • الإجمالي: 700 $ • رابط الخدمة: https://your-blog.blogspot.com/2026/10/logo.html • ملاحظات: محتاج الشعار بمقاسات كاملة • الاسم: أحمد
- زر السلة: العميل يجمع أكتر من خدمة ويشوف الإجمالي، ويبعت الطلب كله مرة واحدة.
- نسخ الرسالة: لو الزائر حابب يبعت الطلب بنفسه، فيه زر «انسخ رسالة الطلب».
- السعر حسب الطلب: أي خدمة من غير سعر بتظهر «حسب الطلب» والرسالة بتقول «محتاج عرض سعر».
السيو والبيانات المنظمة — إيه اللي جاهز في القالب؟
| العنصر | الحالة في القالب |
|---|---|
عنوان الصفحة <title> | ديناميكي: اسم القسم/الوسم أو نتائج البحث أو اسم المتجر + «خدمات ومنتجات رقمية» |
| Meta Description | وصف الصفحة تلقائيًا، ولو مش موجود بيرجع لوصف المتجر العام |
| Canonical | موجود في كل الصفحات ومنع تكرار المحتوى |
| Robots | index, follow للصفحات المهمة وnoindex, follow للأرشيف/البحث/404 |
| Open Graph + Twitter | عنوان + وصف + صورة + نوع المحتوى، وog:type=product في صفحة الخدمة |
| صورة المشاركة | أول صورة في المقال تلقائيًا بمقاس 1200×630، أو صورة ثابتة من data-og-image |
| Schema (الموقع) | OnlineStore + WebSite + SearchAction — يظهر اسم المتجر وصندوق البحث في جوجل |
| Schema (الخدمة) | Product بالاسم والصورة والسعر والعملة + BreadcrumbList لمسار التنقل |
| قائمة الخدمات | ItemList بتتبني تلقائيًا لصفحات الشبكة |
| هيكل العناوين | h1 واحد بس في كل صفحة، وترتيب h2 ثم h3 سليم في كل الأقسام |
| الصور | كل صورة ليها alt تلقائي من عنوان الخدمة + loading="lazy" للسرعة |
| المشاركة الاجتماعية | الروابط بتظهر ككروت جاهزة على واتساب/فيسبوك/تويتر/تيليجرام حتى بدون جافاسكربت |
الأقسام بتظهر فين؟ (الرئيسية / القسم / الخدمة / الصفحات)
| القسم | الرئيسية | صفحة قسم/وسم | صفحة خدمة (مقال) | صفحة ثابتة |
|---|---|---|---|---|
| الهيرو ④ | ✅ | ❌ | ❌ | ❌ |
| المزايا ⑤ | ✅ | ❌ | ❌ | ❌ |
| خطوات الطلب ⑥ | ✅ | ❌ | ❌ | ❌ |
| عنوان الشبكة ⑦ | ✅ | ❌ | ❌ | ❌ |
| الدعوة للطلب ⑩ | ✅ | ❌ | ❌ | ❌ |
| شبكة الخدمات ⑧ | ✅ (20) | ✅ (خدمات القسم) | ❌ | ❌ |
| الهيدر ② ③ + الفوتر | ✅ | ✅ | ✅ | ✅ |
يعني الزائر ما إن يضغط أي قسم أو يفتح خدمة، بيلاقي الخدمات والمحتوى على طول بدون ما يمرّ على أقسام تسويقية مكرّرة — وده أحسن للتجربة وللسيو (مفيش محتوى مكرر في كل صفحة).
تغيير الألوان والخطوط والمسافات (من غير كود)
من المظهر ← تخصيص (Customize) هتلاقي المتغيّرات دي جاهزة للتعديل بالسحب أو الاختيار:
| المتغيّر | التحكم في | القيمة الافتراضية |
|---|---|---|
brandColor | اللون الأساسي (النيلي) | #4f46e5 |
brandColor2 | اللون الثانوي (السماوي) | #06b6d4 |
accentColor | أزرار الطلب (الأخضر) | #10b981 |
whatsColor / fbColor | ألوان واتساب وفيسبوك | #25d366 / #1877f2 |
dangerColor | اللون التحذيري/الخصم | #f43f5e |
bgColor / bgColor2 / bgColor3 | خلفيات الموقع والكروت والأقسام | #f5f7fd / #ffffff / #eaf0fb |
textColor / mutedColor / borderColor | لون النص الأساسي والثانوي والحدود | #101a35 / #5d6a88 / #e1e7f4 |
containerWidth | عرض الصفحة الأقصى | 1200px |
sectionGap | المسافة بين الأقسام | 60px |
radiusSize / radiusSm | استدارة الكروت والعناصر الصغيرة | 18px / 12px |
headerHeight | ارتفاع الهيدر | 74px |
الخط المستخدم Cairo موحّد في كل الموقع (عناوين وأزرار وكروت)، والوضع الليلي بيتبدّل من زر القمر/الشمس في الهيدر.
الصفحات القانونية الجاهزة
القسم ⑯ بيربط 7 صفحات قانونية، وملف الصفحات-القانونية-عربي.txt فيه نص كل صفحة جاهز للنسخ:
- سياسة الخصوصية
- الشروط والأحكام
- سياسة الاستبدال والاسترجاع
- سياسة التسليم
- من نحن
- اتصل بنا
- إخلاء المسؤولية
اعمل كل صفحة من صفحات ← صفحة جديدة، والصق النص، وبعدين حدّث اللينكات من أداة ⑯ (أو اخفي القسم لو لسه مش جاهز — الإخفاء من غير حذف).
زر «اطلب الآن» على مقالاتك في الصفحة الرئيسية — سكربت مستقل تمامًا عن القالب
لو حابب يبقى في كل مقال زرار «اطلب الآن» بتاعه، وفي نفس الوقت الزرار ده يودّي لرابط أنت اللي تحدده (صفحة دفع، واتساب، فورم طلب، أو أي رابط تاني) — من غير ما تلمس كود القالب ولا إعداداته — الكود اللي تحت معمول مخصوص للحالة دي. بيتلصق جوه المقال نفسه، وبيزرع الزرار لوحده على كارت المقال وهو ظاهر في الصفحة الرئيسية، وبيوجّه الزائر للرابط اللي تكتبه أنت.
<!-- ⬇️ سكربت مستقل: زر "اطلب الآن" على المقال في الصفحة الرئيسية — يروح لرابط تحدده أنت -->
<script>
(function () {
/* ================== الإعدادات (غيّر دول بس) ================== */
var POST_URL = 'ضع-رابط-المقال-هنا'; /* رابط المقال ده (انسخه من المتصفح) */
var POST_TITLE = ''; /* (اختياري) جزء من عنوان المقال */
var ORDER_URL = 'ضع-رابط-الطلب-هنا'; /* الرابط اللي زر "اطلب الآن" يروح له */
var LABEL = 'اطلب الآن'; /* نص الزر */
var WHERE = 'home'; /* home = الرئيسية بس | post = صفحة المقال بس | both = الاتنين | all = كل الصفحات */
var HIDE_OLD = true; /* true = نخفي زر الطلب القديم في نفس الكارت */
var STYLE = 'display:block;width:100%;box-sizing:border-box;margin:12px 0 0;padding:12px 18px;border-radius:12px;background:linear-gradient(135deg,#10b981,#06b6d4);color:#04140f;font:800 15px/1.7 Cairo,Tahoma,Arial,sans-serif;text-align:center;text-decoration:none;box-shadow:0 8px 20px -10px rgba(16,185,129,.9);cursor:pointer';
/* ============================================================ */
var me = document.currentScript;
var path = location.pathname.replace(/index\.html?$/i, '').replace(/\/+$/, '');
var isHome = (path === '');
var isPost = /\d{4}\/\d{2}\//.test(location.pathname);
var place = (WHERE === 'all') || (isHome && (WHERE === 'home' || WHERE === 'both')) || (isPost && (WHERE === 'post' || WHERE === 'both'));
if (!place) { return; }
var btn = document.createElement('a');
btn.href = ORDER_URL;
btn.target = '_blank';
btn.rel = 'noopener';
btn.textContent = LABEL;
btn.setAttribute('data-order-now', '1');
btn.setAttribute('style', STYLE);
function wantPath(href) {
var p = String(href || '').replace(/^https?:\/\/[^\/]+/i, '').replace(/[?#].*$/, '').replace(/\/+$/, '');
var w = POST_URL.replace(/^https?:\/\/[^\/]+/i, '').replace(/[?#].*$/, '').replace(/\/+$/, '');
return p !== '' && p === w;
}
function findCard() {
var links = document.querySelectorAll('a[href]');
for (var i = 0; i < links.length; i++) {
var ok = wantPath(links[i].getAttribute('href'));
if (!ok && POST_TITLE) { ok = (links[i].textContent || '').indexOf(POST_TITLE) !== -1; }
if (!ok) { continue; }
var el = links[i];
for (var n = 0; n < 6 && el.parentNode; n++) {
el = el.parentNode;
if (el.tagName === 'ARTICLE' || el.tagName === 'LI' || el.tagName === 'HEADER') { return el; }
}
return links[i].parentNode ? (links[i].parentNode.parentNode || links[i].parentNode) : null;
}
return null;
}
function hideOld(card) {
var els = card.querySelectorAll('a,button');
for (var i = 0; i < els.length; i++) {
var el = els[i];
if (el === btn || el.getAttribute('data-order-now') === '1') { continue; }
var t = (el.textContent || '').replace(/\s+/g, ' ').trim();
if (t.length > 0 && t.length <= 30 && t.indexOf('اطلب') !== -1) { el.style.display = 'none'; }
}
}
function putInCard() {
var card = findCard();
if (!card) { if (me && me.parentNode && !btn.parentNode) { me.parentNode.insertBefore(btn, me); } return; }
var holder = card.lastElementChild;
if (!holder || holder.tagName !== 'DIV') { holder = card; }
holder.appendChild(btn);
if (HIDE_OLD) { hideOld(card); }
}
if (isPost) {
/* جوه صفحة المقال: الزر يظهر في مكان السكربت نفسه جوه المقال */
if (me && me.parentNode) { me.parentNode.insertBefore(btn, me); }
return;
}
/* في الرئيسية/الأقسام: بعد ما الصفحة تخلص ننقله جوه كارت المقال */
function boot() {
putInCard();
if (HIDE_OLD) { setTimeout(function () { var c = findCard(); if (c) { hideOld(c); } }, 400); }
}
if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', boot); } else { boot(); }
})();
</script>
إزاي تستخدمه؟ 4 خطوات بس
- اضغط زر «نسخ الكود» اللي فوق — الكود كله بيتنسخ بضغطة واحدة.
- افتح المقال اللي عايز يبقى فيه الزرار ← تعديل ← من أعلى المحرر اختار «عرض HTML».
- انزل لآخر محتوى المقال والصق الكود، وبعدها غيّر قيمتين بس:
POST_URL= رابط المقال نفسه، وORDER_URL= الرابط اللي الزرار يودّي له. - انشر المقال ← افتح الصفحة الرئيسية ← اضغط
Ctrl + F5← هتلاقي الزرار ظهر على كارت المقال.
الإعدادات اللي تقدر تغيّرها
| الإعداد | وظيفته | القيمة المقترحة |
|---|---|---|
| POST_URL | رابط المقال نفسه — منه السكربت بيتعرّف على كارت المقال في الصفحة الرئيسية. | انسخه من شريط المتصفح وهو مفتوح |
| ORDER_URL | الرابط اللي زر «اطلب الآن» يودّي له. | رابط واتساب / صفحة دفع / فورم |
| POST_TITLE | خطة بديلة: جزء من عنوان المقال لو الرابط مش متطابق. | فاضي (اختياري) |
| LABEL | نص الزرار. | اطلب الآن |
| WHERE | أماكن ظهور الزرار: home الرئيسية فقط · post صفحة المقال فقط · both الاتنين · all كل الصفحات. | home |
| HIDE_OLD | يخفي زر «اطلب دلوقتي» القديم بتاع القالب في نفس الكارت عشان مايبقاش فيه زرارين. | true |
| STYLE | شكل الزرار (لون / حجم / استدارة / خط). | الأخضر ← السماوي الحالي |
ملاحظات مهمة قبل ما تنشر
- الكود لازم يتلصق وأنت في وضع «عرض HTML»؛ لو رجعت لوضع «إنشاء» بعد اللصق، بلوجر ممكن يشيل وسم السكربت.
POST_URLهو أهم قيمة: لو مش مطابق لرابط المقال بالظبط (بالـ https ومن غير زيادات)، الزرار مش هيظهر في الرئيسية.- الزرار بيظهر جوه كارت المقال تحت السعر والأزرار ومحاذي لعنوان المقال بالظبط، وبيختفي تلقائيًا لو الصفحة مش الرئيسية (مع
WHERE = home). - عايز الزرار يظهر كمان جوه صفحة المقال نفسها؟ خلّي
WHERE = both. - عايز تسيب زر القالب شغال مع الزرار الجديد (زرارين في الكارت)؟ خلّي
HIDE_OLD = false. - عايز الزرار يبقى فوق السعر بدل تحته؟ غيّر سطر
holder.appendChild(btn);إلىholder.insertBefore(btn, holder.firstChild);. - الكود مالوش أي علاقة بالقالب: مش بيستخدم أي كلاس أو ID منه، ولا بيعدّل على أي حاجة موجودة.
الخلاصة: كود صغير بيتلصق في المقال مرة واحدة، وبعدها بيديك زر طلب باسمك ورابطك على كارت المقال في الصفحة الرئيسية — من غير أي تعديل في قالب المدونة.
أسئلة شائعة وحلول أعطال
التنسيق بيبان فاضي أو الأقسام مش ظاهرة فيه؟
اعمل تحديث للصفحة (Ctrl+F5)، وبعدين المظهر ← تعديل HTML ← اضغط حفظ من غير أي تعديل — بلوجر بيعيد قراءة القالب ويزرع الأدوات.
ظهور الخطأ: Content is not allowed in prolog؟
معناه إن الملف اتغيّر ترميزه. نزّل الملف تاني من الرابط، ومتفتحوش في Notepad، وارفع الملف الأصلي زي ما هو (أو باستخدام VS Code / Notepad++).
زر واتساب مش بيفتح أو الرقم غلط؟
اكتب الرقم في data-phone بالكود الدولي بدون علامة + وبدون مسافات (مثال: 201234567890).
الأسعار مش بتظهر صح في الصفحة الرئيسية؟
سعر الكارت في الرئيسية بيجي من وسم price-… أو من data-prices. الكود اللي جوه المقال بيأثر على صفحة الخدمة. وبعد التعديل اعمل Ctrl+F5 (الأسعار بتتحدّث من تغذية بلوجر وبتاخد دقيقة).
مش عايز أيقونة (انستقرام/تيليجرام/يوتيوب/تويتر) تظهر؟
سيب الخانة بتاعتها فاضية في لوحة التحكم ⑳ — الأيقونة بتختفي لوحدها. ونفس الكلام للواتساب والفيسبوك في الأزرار العائمة.
عايز أضيف أي قسم/أداة تانية؟
عندك 3 مساحات حرة: ⑨➕ تحت الخدمات، ⑪➕ فوق الفوتر، ⑱➕ تحت الفوتر. ومن التنسيق تقدر كمان تسحب أي أداة جديدة جوه أي قسم.
عايز أشيل قسم كامل (زي الشريط الإعلاني)؟
من التنسيق ← القسم ← إظهار/إخفاء (Eye) أخفيه مؤقتًا، أو من ⋮ ← حذف لو عايز تشيله تمامًا — القالب بيتعامل مع القسم المخفي من غير مشاكل.
إزاي أتأكد إن القالب اتحمّل صح؟
افتح أي صفحة ← كليك يمين ← عرض مصدر الصفحة ← دوّر على <html: لازم تلاقي lang='ar' ومن غير class='v2'. ولو عايز، افتح أدوات المطور ← Console — مفيش أي أخطاء جافاسكربت.
لا تنسى مشاهدة الشرح على القناة والاشتراك
لو عايز متجر خدمات رقمية على بلوجر بشكل احترافي ومن غير أي تكلفة، قالب Service Providers بيديك كل حاجة جاهزة: شبكة خدمات بسعر على كل كارت، طلب مباشر على واتساب، سلة، سيو كامل مع بيانات منظمة، وضع ليلي، وتجاوب كامل مع الموبايل — وكل حاجة قابلة للتعديل من «التنسيق» بدون ما تلمس سطر كود واحد.
