📁 آخر الأخبار
0

Techno Riad Techno Riad

إضافة نافذة الاشتراك الاحترافية لبلوجر Webcccc Subscribe PRO مجاناً



هل تريد زيادة عدد متابعي مدونتك على Blogger وتشجيع الزوار على الاشتراك ومتابعة أحدث المقالات؟ نقدم لك إضافة WebCCCC Subscribe PRO، وهي نافذة اشتراك احترافية تظهر تلقائياً أمام الزائر بعد دخوله إلى المدونة، بتصميم عصري وأنيق ومتجاوب مع جميع الأجهزة.

تم تطوير هذه الإضافة بواسطة WebCCCC باستخدام HTML وCSS وJavaScript، وتتميز بسهولة التركيب والتخصيص دون الحاجة إلى PHP أو قواعد بيانات.

ما هي إضافة WebCCCC Subscribe PRO؟

هي نافذة منبثقة تظهر في وسط شاشة الزائر، وتحتوي على عنوان جذاب ووصف قصير وزر للاشتراك في المدونة. يمكن استخدامها لتوجيه الزوار إلى صفحة متابعة Blogger أو صفحة الاشتراك الخاصة بموقعك.

مميزات الإضافة

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

طريقة تركيب إضافة الاشتراك على Blogger

  1. افتح لوحة تحكم Blogger.
  2. اختر المدونة التي تريد إضافة النافذة إليها.
  3. انتقل إلى قسم التنسيق Layout.
  4. اضغط على إضافة أداة Add a Gadget.
  5. اختر أداة HTML/JavaScript.
  6. اترك خانة العنوان فارغة.
  7. انسخ الكود الموجود في الأسفل والصقه في خانة المحتوى.
  8. اضغط على حفظ.
  9. افتح المدونة في نافذة جديدة لاختبار الإضافة.

كود إضافة WebCCCC Subscribe PRO

انسخ الكود كاملاً، ثم ضعه داخل أداة HTML/JavaScript في مدونتك:

<style>
#webcccc-subscribe,
#webcccc-subscribe * {
  box-sizing: border-box;
}

#webcccc-subscribe {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999999;
  align-items: center;
  justify-content: center;
  padding: 15px;
  font-family: Arial, sans-serif;
  direction: rtl;
}

#webcccc-subscribe.active {
  display: flex;
}

#webcccc-subscribe .ws-overlay {
  position: absolute;
  inset: 0;
  background: rgba(2,6,23,.72);
  backdrop-filter: blur(4px);
}

#webcccc-subscribe .ws-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 410px;
  background: #fff;
  color: #1e293b;
  border-radius: 20px;
  padding: 30px 24px;
  text-align: center;
  box-shadow: 0 20px 70px rgba(0,0,0,.3);
  animation: ws-appear .4s ease;
}

@keyframes ws-appear {
  from {
    opacity: 0;
    transform: translateY(30px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#webcccc-subscribe .ws-close {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #f1f5f9;
  color: #334155;
  font-size: 22px;
  cursor: pointer;
}

#webcccc-subscribe .ws-icon {
  width: 75px;
  height: 75px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: #e0f2fe;
  color: #0284c7;
  font-size: 36px;
}

#webcccc-subscribe h2 {
  font-size: 24px;
  margin: 0 0 12px;
  color: #0f172a;
}

#webcccc-subscribe .ws-description {
  color: #64748b;
  font-size: 14px;
  line-height: 1.9;
  margin: 0 0 22px;
}

#webcccc-subscribe .ws-button {
  display: block;
  width: 100%;
  padding: 14px;
  background: #0284c7;
  color: white;
  border: 0;
  border-radius: 10px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  transition: .2s;
}

#webcccc-subscribe .ws-button:hover {
  background: #0369a1;
  transform: translateY(-2px);
}

#webcccc-subscribe .ws-note {
  color: #94a3b8;
  font-size: 11px;
  margin-top: 16px;
}

@media(max-width:480px) {
  #webcccc-subscribe .ws-card {
    padding: 28px 18px;
  }

  #webcccc-subscribe h2 {
    font-size: 21px;
  }
}
</style>

<div id="webcccc-subscribe">
  <div class="ws-overlay"></div>

  <div class="ws-card">
    <button class="ws-close" aria-label="إغلاق">×</button>

    <div class="ws-icon">✉</div>

    <h2>لا تفوّت جديدنا!</h2>

    <p class="ws-description">
      اشترك في مدونتنا لتصلك أحدث المقالات والشروحات
      التقنية والإضافات الجديدة، وكن أول من يكتشف كل جديد.
    </p>

    <a class="ws-button"
       href="https://www.blogger.com/follow.g?blogID=ضع_معرف_المدونة_هنا"
       target="_blank" rel="noopener">
      اشترك في المدونة الآن
    </a>

    <div class="ws-note">
      شكراً لزيارتك ❤️ WebCCCC
    </div>
  </div>
</div>

<script>
(function () {
  var popup = document.getElementById('webcccc-subscribe');
  if (!popup || popup.dataset.initialized) return;

  popup.dataset.initialized = 'true';

  var close = popup.querySelector('.ws-close');
  var overlay = popup.querySelector('.ws-overlay');

  var storageKey = 'webcccc_subscribe_closed';
  var delay = 8000;

  try {
    if (localStorage.getItem(storageKey) === 'yes') return;
  } catch (e) {}

  function hidePopup() {
    popup.classList.remove('active');

    try {
      localStorage.setItem(storageKey, 'yes');
    } catch (e) {}
  }

  close.addEventListener('click', hidePopup);
  overlay.addEventListener('click', hidePopup);

  window.setTimeout(function () {
    popup.classList.add('active');
  }, delay);
})();
</script>

شرح تعديل جميع أسماء الإضافة وروابطها

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

1. تغيير اسم النافذة

ابحث عن:

<h2>لا تفوّت جديدنا!</h2>

يمكنك استبداله مثلاً بـ:

<h2>اشترك في Technoriad Official</h2>

2. تغيير وصف الاشتراك

ابحث عن النص الموجود داخل:

class="ws-description"

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

3. تغيير رابط الاشتراك

ابحث عن الرابط التالي:

https://www.blogger.com/follow.g?blogID=ضع_معرف_المدونة_هنا

استبدل الجزء ضع_معرف_المدونة_هنا بالمعرف الرقمي الحقيقي لمدونتك.

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

4. تغيير نص زر الاشتراك

اشترك في المدونة الآن

يمكنك تغييره إلى «تابعنا الآن» أو «انضم إلى متابعينا» أو أي نص آخر.

5. تغيير اسم الموقع في أسفل النافذة

شكراً لزيارتك ❤️ WebCCCC

استبدل WebCCCC باسم مدونتك أو علامتك التجارية.

6. تغيير لون زر الاشتراك

ابحث عن:

background: #0284c7;

هذا هو لون الزر الأساسي. يمكنك تغييره إلى اللون الذي يناسب تصميم مدونتك.

7. تغيير وقت ظهور النافذة

ابحث عن السطر:

var delay = 8000;
  • 3000: تظهر بعد 3 ثوانٍ.
  • 5000: تظهر بعد 5 ثوانٍ.
  • 8000: تظهر بعد 8 ثوانٍ.
  • 15000: تظهر بعد 15 ثانية.

كيف تحصل على معرف مدونة Blogger Blog ID؟

  1. افتح لوحة تحكم Blogger.
  2. اختر مدونتك.
  3. انظر إلى رابط الصفحة في شريط العنوان بالمتصفح.
  4. ستجد رقماً طويلاً ضمن الرابط، وهذا هو معرف المدونة.
  5. انسخ الرقم وضعه مكان النص المخصص له في رابط الاشتراك.

هل يمكن استخدام الإضافة على الهاتف؟

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

ماذا يحدث عندما يغلق الزائر النافذة؟

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

الأسئلة الشائعة

هل تحتاج الإضافة إلى قاعدة بيانات؟

لا، تعمل الإضافة باستخدام HTML وCSS وJavaScript فقط.

هل يمكن تغيير رابط الاشتراك؟

نعم، يمكنك وضع رابط مدونتك أو أي صفحة اشتراك تريدها.

هل تظهر النافذة عند كل زيارة؟

لا، بعد إغلاقها يتم حفظ ذلك في المتصفح، ولا تظهر مجدداً إلا إذا تم مسح بيانات الموقع أو تغيير مفتاح التخزين في الكود.

هل يمكن تعديل النصوص والألوان؟

نعم، جميع النصوص والألوان والروابط قابلة للتعديل من الكود.

الخلاصة

تعتبر إضافة WebCCCC Subscribe PRO وسيلة عملية لتشجيع زوار مدونات بلوجر على متابعة المحتوى الجديد. بفضل تصميمها الاحترافي وخيارات التخصيص، يمكنك جعلها متوافقة مع هوية مدونتك خلال دقائق.

البرمجة والتطوير

WebCCCC

إضافات بلوجر - إضافات ووردبريس - سكربتات PHP

زيارة الموقع الرسمي

© جميع الحقوق محفوظة لـ WebCCCC

```
Techno Riad
Techno Riad

مقالات قد تهمك

تعليقات
إرسال تعليق

💬 أهلاً بك في Techno Riad Official!

يسعدنا مشاركتك رأيك واستفساراتك حول هذا المقال. اكتب تعليقك أو سؤالك، وسنعمل على الرد عليك في أقرب وقت ممكن.

📌 يرجى احترام آراء الآخرين، والابتعاد عن الروابط المزعجة والتعليقات غير اللائقة.

❤️ شكراً لزيارتك وثقتك بنا، ولا تنسَ زيارة مدونتنا باستمرار لاكتشاف المزيد من الشروحات والمقالات التقنية.

**Techno Riad Official – عالم التكنولوجيا بين يديك.**