كنت قد شرحت في مواضيع سابقة عن طريقة تحويل قالب بلوجر عادي الى قالب بلوجر
لبيع المنتجات و شرحنا في موضوعين سابقين طريقة تحويله
تركيب جدول عرض المنتجات و أسعارها بداخل المواضيع
تركيب كرت عروض ترويجية في قوالب بلوجر بشكل منبثق
تُعد إضافة كرت عروض ترويجية منبثق في قوالب بلوجر من أفضل الإضافات التي تساعد
أصحاب المدونات على جذب انتباه الزوار وعرض المحتوى أو الخدمات بطريقة احترافية
وعصرية. تعتمد هذه الإضافة على إظهار نافذة منبثقة (Popup) تحتوي على بطاقة
ترويجية يمكن تخصيصها لعرض أحدث المقالات، أو المنتجات، أو الخدمات، أو العروض
الخاصة، أو روابط صفحات مهمة داخل المدونة، مما يساهم في تحسين تجربة المستخدم
وزيادة معدل التفاعل.
توفر إضافة Popup Blogger العديد من خيارات التخصيص، حيث يمكن تعديل الألوان،
والخلفيات، والخطوط، والصور، والأيقونات، بالإضافة إلى تغيير نصوص الأزرار
وروابطها بما يتناسب مع تصميم قالب بلوجر. كما أنها تعمل بشكل متجاوب مع جميع
الأجهزة، سواء كانت هواتف ذكية أو أجهزة لوحية أو حواسيب، لضمان ظهور البطاقة
المنبثقة بصورة أنيقة على مختلف أحجام الشاشات.
تكمن أهمية هذه الإضافة في قدرتها على زيادة عدد النقرات (CTR) وتحسين وصول
الزائر إلى الصفحات المهمة داخل المدونة، مثل صفحات التحميل، أو المقالات
المميزة، أو صفحات التواصل، أو الاشتراك في النشرة البريدية. كما يمكن
استخدامها للإعلان عن التخفيضات، أو نشر التحديثات الجديدة، أو الترويج للمحتوى
الحصري، مما يساعد على رفع معدل بقاء الزائر داخل الموقع وتقليل نسبة الارتداد،
وهو ما ينعكس إيجابًا على أداء المدونة في نتائج محركات البحث.
ومن أهم مميزات إضافة كرت العروض الترويجية المنبثق أنها سهلة التركيب ولا
تحتاج إلى خبرة برمجية كبيرة، مع إمكانية التحكم في توقيت ظهور النافذة وعدد
مرات عرضها، حتى لا تسبب إزعاجًا للزوار. كما أنها تضيف لمسة احترافية إلى
قوالب بلوجر وتمنح الموقع مظهرًا أكثر حداثة وتنظيمًا.
إذا كنت تبحث عن وسيلة فعالة لزيادة التفاعل مع محتوى مدونتك وتحسين تجربة
المستخدم وتعزيز ظهور موقعك في نتائج البحث، فإن إضافة كرت العروض الترويجية
المنبثق لبلوجر تُعد خيارًا مثاليًا يجمع بين سهولة الاستخدام، والتصميم
الجذاب، والأداء العالي، مما يجعلها من الإضافات الأساسية التي ينصح بها لكل
أصحاب مدونات بلوجر.
معاينة اضافة كرت عروض ترويجية
طريقة تركيب كرت عروض ترويجية لقالب بلوجر
قم بالذهاب الى التنسيق و أختار أداة جديدة ثم اختار HTML/JavaScript و أضف الكود
و ثم قم بالحفظ
بدون أن تسميها
<b:if cond='data:blog.pageType != "static_page"'><style>#popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:none;justify-content:center;align-items:center;z-index:9999;animation:fadeIn .5s}#popup-card{background:#fff;border-radius:20px;padding:30px;max-width:400px;width:90%;text-align:center;position:relative;box-shadow:0 15px 40px rgba(0,0,0,.3);animation:slideUp .5s}#popup-card img{width:100%;max-height:200px;object-fit:cover;border-radius:12px;margin-bottom:15px}#popup-card h2{font-size:22px;color:#333;margin:10px 0}.offer-text{font-size:16px;color:#e74c3c;font-weight:bold;background:#fff3f3;padding:10px;border-radius:8px;margin:15px 0}#countdown{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:15px;direction:ltr;margin:20px 0}.time-box{background:#2c3e50;color:#fff;border-radius:10px;min-width:65px;padding:10px;text-align:center}.time-box span:first-child{display:block;font-size:28px;font-weight:bold}.label{display:block;font-size:12px;margin-top:5px;opacity:.8}.close-btn{position:absolute;top:10px;right:15px;font-size:28px;cursor:pointer;color:#aaa}.close-btn:hover{color:#333}.action-btn{width:100%;padding:12px;border:none;border-radius:30px;background:#e74c3c;color:#fff;font-size:18px;font-weight:bold;cursor:pointer;transition:.3s}.action-btn:hover{background:#c0392b;transform:scale(1.03)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}@media(max-width:480px){#popup-card{padding:20px}.time-box{min-width:55px;padding:8px}.time-box span:first-child{font-size:22px}}</style><div id="popup-overlay"><div id="popup-card"><span class="close-btn" onclick="closePopup()">×</span><img src="https://via.placeholder.com/400x200/3498db/ffffff?text=Product+Image"><h2>🔥 عرض حصري - منتج الأسبوع</h2><div class="offer-text">🎯 خصم 50% لفترة محدودة!</div><!-- العداد --><div id="countdown"><div class="time-box"><span id="days">10</span><span class="label">أيام</span></div><div class="time-box"><span id="hours">00</span><span class="label">ساعات</span></div><div class="time-box"><span id="minutes">00</span><span class="label">دقائق</span></div><div class="time-box"><span id="seconds">00</span><span class="label">ثواني</span></div></div><button class="action-btn" onclick="window.location.href='#'">اطلب الآن 🛒</button><p style="font-size:13px;color:#888;margin-top:15px;">* العرض ساري حتى انتهاء الوقت</p></div></div><script>const endDate = "2026-07-04";const targetDate = new Date(endDate + "T23:59:59").getTime();function updateCountdown(){const now = new Date().getTime();const distance = targetDate - now;if (distance <= 0){document.getElementById("days").textContent = "00";document.getElementById("hours").textContent = "00";document.getElementById("minutes").textContent = "00";document.getElementById("seconds").textContent = "00";return;}const days = Math.floor(distance / (1000 * 60 * 60 * 24));const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));const seconds = Math.floor((distance % (1000 * 60)) / 1000);document.getElementById("days").textContent = String(days).padStart(2,"0");document.getElementById("hours").textContent = String(hours).padStart(2,"0");document.getElementById("minutes").textContent = String(minutes).padStart(2,"0");document.getElementById("seconds").textContent = String(seconds).padStart(2,"0");}updateCountdown();setInterval(updateCountdown,1000);setTimeout(function (){document.getElementById("popup-overlay").style.display = "flex";},3000);function closePopup(){document.getElementById("popup-overlay").style.display = "none";}document.getElementById("popup-overlay").addEventListener("click",function (e){if (e.target === this){this.style.display = "none";}});document.getElementById("popup-overlay").addEventListener("touchmove",function (e){e.preventDefault();},{passive: false});</script></b:if>
التعديلات اللتي من الممكن أن تقوم بها
صورة المنتجاستبدل هذا الرابط:<img src="https://via.placeholder.com/400x200/3498db/ffffff?text=Product+Image">برابط صورة منتجك، مثل:<img src="https://example.com/product.jpg">رابط زر الشراءاستبدل:onclick="window.location.href='#'"برابط المنتج، مثل:onclick="window.location.href='https://example.com/product'"لتغير عداد التوقيت الصيغة الصحيحة هي أن يكون اليوم والشهر مكوّنين من رقمين.اكتبها هكذا:const endDate = "2026-07-04";وليس:const endDate = "2026-7-4";أمثلة صحيحة:const endDate = "2026-01-09";const endDate = "2026-07-04";const endDate = "2026-12-31";
ثم قم بالحفظ و شاهد المعاينة
شكرًا لوقتكم واهتمامكم بقراءة موضوع تركيب كرت عروض ترويجية منبثق في قوالب بلوجر . إذا صادفتكم أي مشكلة أثناء استخدام الكود أو كان لديكم أي استفسار، فلا تترددوا في طرحه ضمن التعليقات أو التواصل معنا عبر صفحة الاتصال بنا . ولا تنسوا الانضمام إلى متابعي مدونة هلا تك ليصلكم كل ما هو جديد.
