إضافة نظام التحقق الذكي وتوجيه الروابط لمدونات بلوجر

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

في الماضي، كان الحل التقليدي هو إنشاء "صفحة إعادة توجيه" (Redirect Page) منفصلة. ورغم فعاليتها، إلا أنها أصبحت طريقة قديمة، مملة، وتسبب إزعاجاً للزوار بسبب كثرة التنقل بين الصفحات.

معاينة للإضافة: تصميم كابتشا احترافي وزر تحميل نابض

اليوم، في التقني بلوجر نقدم لكم حلاً ثورياً يجمع بين الذكاء البرمجي والتصميم الجذاب: نظام التحقق الذكي (Smart Verify & Redirect). هذه الإضافة البرمجية تقوم بتحويل أي رابط خارجي في موقعك إلى رحلة ذكية داخل مدونتك، حيث يتم توجيه الزائر لقراءة مقال عشوائي آخر من أرشيفك، وهناك يظهر له نظام تحقق متطور (Captcha) وعداد تنازلي قبل الوصول للرابط النهائي.

لماذا تعتبر هذه الإضافة ضرورية لمدونتك؟

• مضاعفة المشاهدات: بدلاً من صفحة بيضاء للانتظار، سيقضي الزائر وقت الانتظار في قراءة مقال آخر مفيد، مما يحيي مقالاتك القديمة ويزيد عدد الصفحات في الجلسة الواحدة.
• زيادة أرباح أدسنس: بقاء الزائر لفترة أطول وتنقله بين صفحتين بدلاً من واحدة يعني فرصة أكبر لظهور الإعلانات والنقر عليها.
• تجربة مستخدم احترافية: تصميم الأداة يحاكي نظام Google Recaptcha مما يعطي شعوراً بالأمان، بالإضافة لزر تحميل بتأثير "النبض" (Pulse Effect) وأيقونة SVG تفاعلية تجذب الانتباه.
• أداء فائق السرعة: الكود مكتوب بلغة Vanilla Javascript النقية بدون أي مكتبات خارجية (مثل jQuery)، مما يضمن عدم تأثيره نهائياً على سرعة تحميل القالب.

خطوات التركيب الصحيحة

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

1. توجه إلى لوحة تحكم بلوجر ثم اختر المظهر (Theme).
2. اضغط على القائمة المنسدلة بجوار زر "تخصيص" واختار تعديل HTML.
3. انقر داخل صندوق الأكواد واضغط Ctrl+F للبحث عن وسم الإغلاق </body> (غالباً ما يكون في السطور الأخيرة من القالب).
4. قم بنسخ الأكواد الثلاثة التالية (HTML و CSS و JS) وضعها مجمعة فوق الوسم مباشرة.
5. اضغط على زر الحفظ.

الكود الكامل للإضافة (الإصدار المطور v7):

<template id="huda-top-template">
  <div class="huda-captcha-box" id="huda-captcha-box">
    <div class="huda-captcha-main">
      <div class="huda-checkbox" id="huda-check-trigger">
        <div class="huda-spinner"></div>
        <div class="huda-checkmark"></div>
      </div>
      <div class="huda-text-group">
        <div class="huda-captcha-label" id="huda-status-text">أنا لست برنامج روبوت</div>
        <div class="huda-status-area" id="huda-progress-ui">
           <span class="huda-timer-text">يرجى الانتظار.. <b id="huda-seconds" style="color:var(--huda-blue)">20</b> ث</span>
           <div class="huda-progress-bg">
             <div class="huda-progress-fill" id="huda-fill"></div>
           </div>
        </div>
      </div>
    </div>
    <div class="huda-brand-section">
      <svg class="huda-robot-icon" viewBox="0 0 24 24">
        <path d="M12,2A2,2 0 0,1 14,4C14,4.74 13.6,5.39 13,5.73V7H14A7,7 0 0,1 21,14H22A1,1 0 0,1 23,15V18A1,1 0 0,1 22,19H21V20A2,2 0 0,1 19,22H5A2,2 0 0,1 3,20V19H2A1,1 0 0,1 1,18V15A1,1 0 0,1 2,14H3A7,7 0 0,1 10,7H11V5.73C10.4,5.39 10,4.74 10,4A2,2 0 0,1 12,2M7.5,13A2.5,2.5 0 0,0 5,15.5A2.5,2.5 0 0,0 7.5,18A2.5,2.5 0 0,0 10,15.5A2.5,2.5 0 0,0 7.5,13M16.5,13A2.5,2.5 0 0,0 14,15.5A2.5,2.5 0 0,0 16.5,18A2.5,2.5 0 0,0 19,15.5A2.5,2.5 0 0,0 16.5,13Z" />
      </svg>
    </div>
  </div>
</template>

<template id="huda-bottom-template">
  <div class="huda-final-destination" id="huda-dest-area">
    <div class="huda-dest-title">الرابط جاهز للتحميل</div>
    <a href="#" id="huda-go-link" class="huda-final-btn" target="_blank">
      <svg class="huda-btn-icon" viewBox="0 0 24 24"><path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" /></svg>
      اضغط هنا للانتقال
    </a>
  </div>
</template>

<style>
:root {
  --huda-blue: #4285f4;
  --huda-green: #0f9d58;
  --huda-border: #d3d3d3;
  --huda-bg: #f9f9f9;
  --huda-text: #282828;
}
.huda-captcha-box {
  background: #f9f9f9;
  border: 1px solid #d3d3d3;
  border-radius: 3px;
  box-shadow: 0 0 4px 1px rgba(0,0,0,0.08);
  padding: 0;
  margin: 40px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 380px;
  height: 78px;
  font-family: 'Roboto', sans-serif;
  user-select: none;
  direction: rtl;
  position: relative;
  z-index: 10;
  overflow: hidden;
  box-sizing: border-box;
}
.huda-captcha-main {
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: 100%;
  flex-grow: 1;
}
.huda-checkbox {
  width: 28px;
  height: 28px;
  background: #fff;
  border: 2px solid #c1c1c1;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  flex-shrink: 0;
  position: relative;
}
.huda-checkbox:hover {
  border-color: #b2b2b2;
}
.huda-checkbox.checked {
  border-color: transparent;
}
.huda-checkbox.loading {
  border-color: transparent;
  pointer-events: none;
}
.huda-text-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 12px;
}
.huda-captcha-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--huda-text);
  line-height: 1.2;
}
.huda-status-area {
  margin-top: 5px;
  display: none;
}
.huda-timer-text {
  font-size: 11px;
  color: #555;
  display: block;
  margin-bottom: 3px;
}
.huda-progress-bg {
  width: 140px;
  height: 4px;
  background: #e0e0e0;
  border-radius: 2px;
  overflow: hidden;
}
.huda-progress-fill {
  height: 100%;
  background: var(--huda-blue);
  width: 0%;
  transition: width 1s linear;
}
.huda-spinner {
  width: 28px;
  height: 28px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--huda-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  box-sizing: border-box;
  display: none;
}
.huda-checkmark {
  display: none;
  width: 8px;
  height: 16px;
  border: solid var(--huda-green);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  margin-top: -3px;
}
.huda-brand-section {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}
.huda-robot-icon {
  width: 42px;
  height: 42px;
  fill: #555;
  opacity: 0.2;
  transition: opacity 0.3s;
}
.huda-captcha-box:hover .huda-robot-icon {
  opacity: 0.6;
  fill: var(--huda-blue);
}
.huda-final-destination {
  background: #e8f0fe;
  border: 1px solid #b3cefb;
  color: #1a73e8;
  padding: 30px;
  text-align: center;
  border-radius: 8px;
  margin: 50px auto 20px auto;
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
  max-width: 450px;
}
.huda-final-destination.visible {
  opacity: 1;
  transform: translateY(0);
}
.huda-dest-title {
  display: block;
  margin: 0 0 15px 0;
  color: #333;
  font-size: 18px;
  font-weight: 700;
}
.huda-final-btn {
  background: var(--huda-blue);
  color: #fff;
  padding: 12px 35px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  animation: hudaLivePulse 2s infinite;
}
.huda-final-btn:hover {
  background: #1558b0;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(66, 133, 244, 0.4);
}
.huda-btn-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: transform 0.3s ease;
}
.huda-final-btn:hover .huda-btn-icon {
  transform: translateX(-3px) translateY(-3px);
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes hudaLivePulse {
  0% { box-shadow: 0 0 0 0 rgba(66, 133, 244, 0.7); }
  70% { box-shadow: 0 0 0 15px rgba(66, 133, 244, 0); }
  100% { box-shadow: 0 0 0 0 rgba(66, 133, 244, 0); }
}
@media (max-width: 400px) {
  .huda-captcha-box { max-width: 100%; height: auto; padding: 10px 0; }
  .huda-progress-bg { width: 100px; }
  .huda-brand-section { padding: 0 15px; }
}
</style>

<script>
//<![CDATA[
(function() {
  const config = {
    timer: 20,
    paramName: 'huda_go',
    containerClass: '.post-body, .entry-content, #post-body'
  };
  function encryptUrl(url) { return btoa(url); }
  function decryptUrl(encoded) { try { return atob(encoded); } catch(e) { return null; } }
  async function getRandomPost() {
    try {
      const response = await fetch('/feeds/posts/summary?alt=json&max-results=150');
      const data = await response.json();
      const entries = data.feed.entry;
      if (!entries || entries.length === 0) return '/';
      const randomEntry = entries[Math.floor(Math.random() * entries.length)];
      return randomEntry.link.find(l => l.rel === 'alternate').href;
    } catch (e) { return '/'; }
  }
  document.addEventListener('click', async function(e) {
    const link = e.target.closest('a');
    if (link && link.classList.contains('huda-final-btn')) return;
    const isExternal = link && link.href && link.hostname !== window.location.hostname;
    if (isExternal && !link.href.includes('#') && !link.href.includes('javascript')) {
      e.preventDefault();
      const targetUrl = link.href;
      const randomPost = await getRandomPost();
      const finalUrl = new URL(randomPost);
      finalUrl.searchParams.set(config.paramName, encryptUrl(targetUrl));
      window.location.href = finalUrl.toString();
    }
  });
  const params = new URLSearchParams(window.location.search);
  if (params.has(config.paramName)) {
    const targetLink = decryptUrl(params.get(config.paramName));
    if (!targetLink) return;
    const postBody = document.querySelector(config.containerClass);
    if (!postBody) return;
    const topTpl = document.getElementById('huda-top-template').content;
    const botTpl = document.getElementById('huda-bottom-template').content;
    const topNode = topTpl.cloneNode(true);
    postBody.insertBefore(topNode, postBody.firstChild);
    postBody.appendChild(botTpl.cloneNode(true));
    
    const captchaBox = document.getElementById('huda-captcha-box');
    const checkbox = document.getElementById('huda-check-trigger');
    const spinner = checkbox.querySelector('.huda-spinner');
    const checkmark = checkbox.querySelector('.huda-checkmark');
    const statusText = document.getElementById('huda-status-text');
    const progressUI = document.getElementById('huda-progress-ui');
    const fill = document.getElementById('huda-fill');
    const secondsEl = document.getElementById('huda-seconds');
    const destArea = document.getElementById('huda-dest-area');
    const goBtn = document.getElementById('huda-go-link');
    
    goBtn.href = targetLink;
    
    setTimeout(() => { if(captchaBox) { captchaBox.scrollIntoView({ behavior: 'smooth', block: 'center' }); } }, 800);
    
    checkbox.addEventListener('click', function() {
      if (checkbox.classList.contains('checked') || checkbox.classList.contains('loading')) return;
      checkbox.classList.add('loading');
      spinner.style.display = 'block';
      
      setTimeout(() => {
        spinner.style.display = 'none';
        progressUI.style.display = 'block';
        
        let timeLeft = config.timer;
        fill.style.width = '0%';
        
        const timerInterval = setInterval(() => {
          timeLeft--;
          secondsEl.textContent = timeLeft;
          const percent = ((config.timer - timeLeft) / config.timer) * 100;
          fill.style.width = percent + '%';
          if (timeLeft <= 0) {
            clearInterval(timerInterval);
            finishVerification();
          }
        }, 1000);
      }, 1000);
    });
    
    function finishVerification() {
      checkbox.classList.remove('loading');
      checkbox.classList.add('checked');
      checkmark.style.display = 'block';
      progressUI.style.display = 'none';
      statusText.textContent = 'تم التحقق';
      statusText.style.color = 'var(--huda-green)';
      destArea.style.display = 'block';
      setTimeout(() => { destArea.classList.add('visible'); destArea.scrollIntoView({ behavior: 'smooth', block: 'center' }); }, 500);
    }
  }
})();
//]]>
</script>

دليل التعديل والتخصيص الشامل

لقد صممنا الكود ليكون "مفتوح المصدر" بالكامل وقابلاً للتخصيص بسهولة. إليك قائمة بكل ما يمكنك تعديله في الكود لتكييفه مع مدونتك:

1. تعديل الألوان (في قسم CSS)

ابحث في بداية كود CSS عن قسم :root، وستجد المتغيرات التالية:

• --huda-blue: هذا هو اللون الرئيسي (يتحكم في لون المربع عند التحديد، أيقونة الروبوت عند التحويم، وزر التحميل النهائي). يمكنك وضع كود لون علامتك التجارية هنا.
• --huda-green: لون علامة "الصح" التي تظهر بعد نجاح التحقق.
• --huda-bg: لون خلفية صندوق الكابتشا (يمكن تغييره للون داكن إذا كان قالبك يدعم الوضع الليلي).

2. تعديل وقت الانتظار (في قسم JS)

إذا كنت تريد زيادة أو تقليل مدة بقاء الزائر في الصفحة:

• ابحث في كود الجافاسكريبت عن السطر: timer: 20
• غير الرقم 20 إلى أي عدد ثواني تريده (مثلاً 10 للسرعة، أو 30 لزيادة الأرباح).

3. تعديل النصوص والعبارات (في قسم HTML)

يمكنك تعريب العبارات أو تغيير لهجتها من خلال التعديل على النصوص العربية الموجودة داخل كود HTML:

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

الأسئلة الشائعة حول الإضافة

هل تؤثر هذه الإضافة على سرعة تحميل المدونة؟

إطلاقاً، الإضافة مبرمجة باستخدام لغة Javascript (Vanilla) النظيفة ولا تعتمد على أي مكتبات خارجية ثقيلة، مما يضمن سرعة تحميل عالية وأداء مستقر للمدونة.

هل الكود آمن لحسابات Google AdSense؟

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

هل تعمل الإضافة على جميع قوالب بلوجر؟

نعم، تم تصميم الكود ليعمل بذكاء على تحديد منطقة المحتوى تلقائياً في أغلب القوالب المشهورة مثل (Plus UI, Squeeze, jalsa, seo plus) وغيرها دون الحاجة لتعديلات معقدة.

كيف يمكنني تغيير مدة الانتظار في العداد؟

يمكنك ذلك بسهولة من خلال البحث عن السطر (timer: 20) داخل كود الجافاسكربت وتغيير الرقم 20 إلى عدد الثواني الذي تفضله.

خاتمة

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