مدونة هلا تك

تركيب أداة كابتشا لحماية الروابط الخارجية عند التحويل في قوالب بلوجر

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

شرح التركيب بالفيديو

ما هي هذه الأداة؟

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

لماذا تحتاج هذه الأداة في مدونتك؟

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

طريقة تركيب الأداة على قالب بلوجر

انسخ الكود الكامل للأداة من الملف المرفق ثم الدخول إلى لوحة تحكم بلوجرثم الوصول إلى محرر القالب
من القائمة الجانبية، انتقل إلى ~~المظهر~~ ثم "تحرير ~~HTML~~
ابحث عن وسم ~~</body>~~ في القالب، والصق الكود قبله مباشرة.

<style>
:root{--captcha-primary:#6366f1;--captcha-primary-dark:#4f46e5;--captcha-primary-light:#818cf8;--captcha-success:#22c55e;--captcha-success-dark:#16a34a;--captcha-danger:#ef4444;--captcha-bg:#ffffff;--captcha-text:#0f172a;--captcha-text-secondary:#64748b;--captcha-border:#e2e8f0;--captcha-shadow:0 20px 60px rgba(0,0,0,0.15),0 10px 30px rgba(0,0,0,0.05);--captcha-radius:20px;--captcha-transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
.captcha-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / 60%);display:none;justify-content:center;align-items:center;z-index:999999;direction:rtl;padding:20px;box-sizing:border-box;animation:overlayFadeIn 0.4s ease}
.captcha-overlay.active{display:flex}
@keyframes overlayFadeIn{from{opacity:0;backdrop-filter:blur(0px)}to{opacity:1;backdrop-filter:blur(12px)}}
.captcha-box{background:var(--captcha-bg);border-radius:var(--captcha-radius);box-shadow:var(--captcha-shadow);padding:clamp(24px,4vw,28px);width:100%;max-width:480px;position:relative;animation:boxSlideUp 0.5s cubic-bezier(0.34,1.56,0.64,1);box-sizing:border-box;border:1px solid rgba(255,255,255,0.1)}
@keyframes boxSlideUp{from{opacity:0;transform:translateY(40px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.captcha-close-btn{position:absolute;top:8px;left:8px;background:#f1f5f9;border:none;width:28px;height:28px;border-radius:50%;font-size:18px;cursor:pointer;color:#94a3b8;transition:var(--captcha-transition);display:flex;align-items:center;justify-content:center;line-height:1}
.captcha-close-btn:hover{background:#fee2e2;color:var(--captcha-danger);transform:rotate(90deg)}
.captcha-main{display:flex;align-items:center;gap:clamp(12px,3vw,20px);width:100%;margin-bottom:10px;margin-top:10px}
.captcha-checkbox{width:clamp(44px,8vw,44px);height:clamp(44px,8vw,44px);min-width:44px;min-height:44px;background:#f8fafc;border:3px solid #e2e8f0;border-radius:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--captcha-transition);flex-shrink:0;position:relative;outline:none;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.captcha-checkbox:hover:not(.checked):not(.loading){border-color:var(--captcha-primary);background:#eef2ff;transform:scale(1.05);box-shadow:0 4px 16px rgba(99,102,241,0.15)}
.captcha-checkbox:active:not(.checked):not(.loading){transform:scale(0.95)}
.captcha-checkbox.checked{background:var(--captcha-success);border-color:var(--captcha-success);cursor:default;box-shadow:0 4px 20px rgba(34,197,94,0.3)}
.captcha-checkbox.loading{border-color:var(--captcha-primary);background:#f8fafc;pointer-events:none;box-shadow:0 0 0 4px rgba(99,102,241,0.1)}
.captcha-spinner{width:28px;height:28px;border:3.5px solid #e2e8f0;border-top-color:var(--captcha-primary);border-radius:50%;animation:spin 0.8s linear infinite;display:none}
@keyframes spin{100%{transform:rotate(360deg)}}
.captcha-checkmark{display:none;width:24px;height:24px;color:#ffffff;animation:popIn 0.4s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes popIn{0%{transform:scale(0) rotate(-45deg)}100%{transform:scale(1) rotate(0deg)}}
.captcha-checkbox.checked .captcha-checkmark{display:block}
.captcha-text-group{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0;gap:4px}
.captcha-label{font-size:clamp(0.95rem,3.5vw,1.1rem);font-weight:700;color:var(--captcha-text);transition:var(--captcha-transition);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.01em}
.captcha-label.verified{color:var(--captcha-success)}
.captcha-progress-area{margin-top:6px;display:none;width:100%}
.captcha-timer{font-size:clamp(0.75rem,2.8vw,0.875rem);color:var(--captcha-text-secondary);display:flex;align-items:center;gap:6px;margin-bottom:10px;font-weight:500}
.captcha-timer b{color:var(--captcha-primary);font-size:clamp(1rem,3vw,1.2rem);font-weight:700;min-width:24px;display:inline-block;text-align:center}
.captcha-progress-bg{width:100%;height:6px;background:#f1f5f9;border-radius:20px;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,0.05)}
.captcha-progress-fill{height:100%;background:linear-gradient(90deg,var(--captcha-primary),var(--captcha-primary-light));width:0%;border-radius:20px;transition:width 0.1s linear;position:relative}
.captcha-progress-fill::after{content:&#39;&#39;;position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);animation:shimmer 1.5s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.captcha-brand{display:flex;align-items:center;justify-content:center;padding-right:clamp(12px,2.5vw,2px);border-right:2px solid #f1f5f9;flex-shrink:0}
.captcha-robot{width:clamp(36px,7vw,84px);height:clamp(36px,7vw,56px);fill:#94a3b8;transition:var(--captcha-transition)}
.captcha-box:hover .captcha-robot{fill:var(--captcha-primary);transform:scale(1.08) rotate(-5deg)}
.captcha-destination{background:#f8fafc;border:2px solid #e2e8f0;padding:clamp(16px,3vw,24px);text-align:center;border-radius:16px;margin-top:16px;display:none;opacity:0;transform:translateY(10px) scale(0.98);transition:all 0.5s cubic-bezier(0.34,1.56,0.64,1);width:100%;box-sizing:border-box}
.captcha-destination.visible{display:block!important;opacity:1;transform:translateY(0) scale(1);border-color:var(--captcha-success);background:#f0fdf4;box-shadow:0 0 0 4px rgba(34,197,94,0.1)}
.captcha-dest-title{margin-bottom:12px;color:var(--captcha-text);font-size:clamp(0.9rem,3.2vw,1rem);font-weight:700}
.captcha-dest-title .emoji{display:inline-block;animation:bounce 1s infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.captcha-go-btn{background:linear-gradient(135deg,var(--captcha-primary),var(--captcha-primary-dark));color:#ffffff!important;padding:14px 28px;border-radius:14px;text-decoration:none;font-weight:600;font-size:clamp(0.875rem,3vw,1rem);display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:220px;transition:var(--captcha-transition);box-shadow:0 4px 16px rgba(99,102,241,0.3);border:none;cursor:pointer;position:relative;overflow:hidden}
.captcha-go-btn::before{content:&#39;&#39;;position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left 0.6s}
.captcha-go-btn:hover::before{left:100%}
.captcha-go-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 30px rgba(99,102,241,0.4)}
.captcha-go-btn:active{transform:translateY(0) scale(0.98)}
.captcha-btn-icon{width:20px;height:20px;fill:currentColor;transition:var(--captcha-transition)}
.captcha-go-btn:hover .captcha-btn-icon{transform:translateX(-4px)}
@media (max-width:640px){.captcha-box{padding:20px;max-width:100%;margin:0 10px}.captcha-main{gap:12px}.captcha-brand{padding-right:10px}.captcha-go-btn{max-width:100%}}
@media (max-width:420px){.captcha-box{padding:16px;border-radius:16px}.captcha-main{flex-wrap:nowrap;gap:10px}.captcha-checkbox{width:40px;height:40px;min-width:40px;min-height:40px;border-radius:12px}.captcha-checkmark{width:20px;height:20px}.captcha-spinner{width:22px;height:22px}.captcha-label{font-size:0.85rem}.captcha-timer{font-size:0.7rem}.captcha-timer b{font-size:0.9rem}.captcha-robot{width:30px;height:30px}.captcha-brand{padding-right:8px}.captcha-go-btn{padding:12px 20px;font-size:0.8rem;border-radius:12px}.captcha-btn-icon{width:16px;height:16px}.captcha-close-btn{width:24px;height:24px;font-size:16px;top:8px;left:8px}}
@media (max-height:600px) and (orientation:landscape){.captcha-box{padding:16px 24px;max-height:90vh;overflow-y:auto}.captcha-main{margin-bottom:12px;margin-top:12px}.captcha-destination{margin-top:10px;padding:12px 16px}.captcha-go-btn{padding:10px 20px}}
</style>

<template id='captcha-overlay-template'>
  <div class='captcha-overlay' id='captcha-overlay'>
    <div class='captcha-box'>
      <button aria-label='إغلاق' class='captcha-close-btn' id='captcha-close-btn'>&#10005;</button>     
      <div class='captcha-main'>
        <div aria-label='تحقق من أمان الرابط' class='captcha-checkbox' id='captcha-trigger' role='button' tabindex='0'>
          <div class='captcha-spinner'/>
          <div class='captcha-checkmark'>
            <svg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' viewBox='0 0 24 24'>
              <path d='M5 13l4 4L19 7'/>
            </svg>
          </div>
        </div>
        <div class='captcha-text-group'>
          <div class='captcha-label' id='status-text'> أنا لست برنامج روبوت</div>
          <div class='captcha-progress-area' id='progress-area'>
            <div class='captcha-timer'>
              &#9201;&#65039; يرجى الانتظار <b id='timer-seconds'>20</b> ثانية
            </div>
            <div class='captcha-progress-bg'>
              <div class='captcha-progress-fill' id='progress-fill'/>
            </div>
          </div>
        </div>        
       <div class='captcha-brand'>
<svg class='captcha-robot' viewBox='0 0 122.88 116.79' xmlns='http://www.w3.org/2000/svg'>
  <g>
    <path d='M101.42,40.78c0-0.59-0.02-1.17-0.04-1.75V5.88l-9.16,9.17C84.72,5.86,73.31,0,60.53,0 c-13.3,0-25.12,6.35-32.59,16.18l15.02,15.18c1.47-2.72,3.56-5.06,6.08-6.83c2.62-2.05,6.34-3.72,11.48-3.72 c0.62,0,1.1,0.07,1.45,0.21c6.37,0.5,11.89,4.02,15.14,9.12L66.48,40.77C79.95,40.72,95.17,40.69,101.42,40.78L101.42,40.78 L101.42,40.78z M101.42,40.78L101.42,40.78L101.42,40.78L101.42,40.78z' fill='#1C3AA9'/>
    <path d='M60.29,0c-0.59,0-1.17,0.02-1.75,0.04H25.38l9.17,9.16C25.37,16.71,19.5,28.12,19.5,40.9 c0,13.3,6.35,25.12,16.18,32.59l15.18-15.02c-2.72-1.47-5.06-3.56-6.83-6.08c-2.05-2.62-3.72-6.34-3.72-11.48 c0-0.62,0.07-1.1,0.21-1.45c0.5-6.37,4.02-11.89,9.12-15.14l10.63,10.63C60.23,21.47,60.19,6.26,60.29,0L60.29,0L60.29,0z M60.29,0 L60.29,0L60.29,0L60.29,0z' fill='#4285F4'/>
    <path d='M19.51,40.9c0,0.59,0.02,1.17,0.04,1.75V75.8l9.16-9.16c7.5,9.18,18.91,15.04,31.69,15.04 c13.3,0,25.12-6.35,32.59-16.18L77.97,50.32c-1.47,2.72-3.56,5.06-6.08,6.83c-2.62,2.05-6.34,3.72-11.48,3.72 c-0.62,0-1.1-0.07-1.45-0.21c-6.37-0.5-11.89-4.02-15.14-9.12l10.63-10.63C40.98,40.96,25.76,40.99,19.51,40.9L19.51,40.9 L19.51,40.9z M19.51,40.9L19.51,40.9L19.51,40.9L19.51,40.9z' fill='#ABABAB'/>
    <path d='M26.41,97.52c-1,0-1.89,0.19-2.68,0.57c-0.79,0.37-1.46,0.9-2.01,1.58c-0.54,0.69-0.96,1.52-1.25,2.5 c-0.28,0.97-0.42,2.06-0.42,3.26v3.46c0,1.21,0.14,2.3,0.42,3.27c0.29,0.97,0.7,1.8,1.24,2.49c0.53,0.69,1.18,1.21,1.93,1.58 c0.76,0.37,1.61,0.55,2.55,0.55c0.97,0,1.82-0.14,2.55-0.42c0.74-0.28,1.36-0.69,1.85-1.22c0.5-0.54,0.88-1.19,1.15-1.96 c0.27-0.76,0.44-1.63,0.49-2.6l-2.38,0c-0.06,0.75-0.16,1.39-0.31,1.92c-0.15,0.52-0.36,0.96-0.64,1.3 c-0.27,0.34-0.64,0.58-1.08,0.75c-0.44,0.15-0.98,0.23-1.62,0.23c-0.69,0-1.27-0.15-1.75-0.45c-0.48-0.31-0.87-0.73-1.17-1.26 c-0.29-0.53-0.51-1.16-0.64-1.87c-0.13-0.71-0.19-1.48-0.19-2.31v-3.49c0-0.88,0.08-1.69,0.23-2.41c0.16-0.72,0.41-1.33,0.73-1.84 c0.33-0.51,0.74-0.9,1.24-1.17c0.5-0.28,1.09-0.42,1.78-0.42c0.58,0,1.07,0.09,1.48,0.26c0.41,0.16,0.76,0.42,1.03,0.77 c0.27,0.34,0.48,0.78,0.63,1.31c0.15,0.53,0.24,1.17,0.3,1.91h2.38c-0.04-1.01-0.2-1.91-0.48-2.69c-0.27-0.78-0.66-1.44-1.15-1.97 c-0.49-0.53-1.09-0.94-1.79-1.21C28.12,97.66,27.32,97.52,26.41,97.52L26.41,97.52L26.41,97.52z M84.58,97.52 c-1,0-1.89,0.19-2.68,0.57c-0.79,0.37-1.46,0.9-2.01,1.58c-0.54,0.69-0.96,1.52-1.25,2.5c-0.28,0.97-0.42,2.06-0.42,3.26v3.46 c0,1.21,0.14,2.3,0.42,3.27c0.29,0.97,0.71,1.8,1.24,2.49c0.53,0.69,1.18,1.21,1.93,1.58c0.76,0.37,1.61,0.55,2.55,0.55 c0.97,0,1.82-0.14,2.55-0.42c0.74-0.28,1.36-0.69,1.86-1.22c0.5-0.54,0.88-1.19,1.15-1.96c0.27-0.76,0.44-1.63,0.49-2.6l-2.38,0 c-0.06,0.75-0.16,1.39-0.31,1.92c-0.15,0.52-0.36,0.96-0.64,1.3c-0.28,0.34-0.63,0.58-1.08,0.75c-0.44,0.15-0.98,0.23-1.62,0.23 c-0.69,0-1.27-0.15-1.75-0.45c-0.48-0.31-0.87-0.73-1.17-1.26c-0.29-0.53-0.51-1.16-0.64-1.87c-0.13-0.71-0.19-1.48-0.19-2.31 v-3.49c0-0.88,0.08-1.69,0.23-2.41c0.16-0.72,0.41-1.33,0.73-1.84s0.74-0.9,1.24-1.17c0.5-0.28,1.09-0.42,1.78-0.42 c0.58,0,1.07,0.09,1.48,0.26c0.41,0.16,0.76,0.42,1.03,0.77c0.28,0.34,0.49,0.78,0.63,1.31c0.14,0.53,0.24,1.17,0.29,1.91h2.38 c-0.04-1.01-0.2-1.91-0.48-2.69c-0.28-0.78-0.66-1.44-1.15-1.97c-0.49-0.53-1.09-0.94-1.79-1.21 C86.29,97.66,85.49,97.52,84.58,97.52L84.58,97.52L84.58,97.52z M39.98,97.78l-6.04,18.76h2.42l1.46-4.89h6.34l1.48,4.89h2.42 l-6.05-18.76H39.98L39.98,97.78z M50.61,97.78v18.76h2.36v-7.34h3.62c0.9,0,1.7-0.13,2.4-0.37c0.7-0.26,1.28-0.63,1.75-1.11 c0.48-0.48,0.84-1.07,1.08-1.78c0.25-0.71,0.37-1.52,0.37-2.42c0-0.83-0.13-1.6-0.37-2.29c-0.24-0.7-0.6-1.31-1.07-1.82 c-0.47-0.51-1.06-0.91-1.77-1.2c-0.7-0.28-1.49-0.43-2.4-0.43L50.61,97.78L50.61,97.78z M64,97.78v2.04h4.92v16.72h2.36V99.81h4.93 v-2.04H64L64,97.78z M93.59,97.78v18.76h2.36v-8.67h7.55v8.67h2.37V97.78h-2.37v8.06h-7.55v-8.06H93.59L93.59,97.78z M114.8,97.78 l-6.04,18.76h2.42l1.46-4.89h6.34l1.48,4.89h2.42l-6.05-18.76H114.8L114.8,97.78z M52.97,99.81h3.62c0.58,0,1.06,0.1,1.47,0.31 c0.41,0.21,0.75,0.48,1,0.82c0.27,0.34,0.46,0.74,0.58,1.2c0.13,0.45,0.19,0.91,0.19,1.39c0,0.53-0.06,1.02-0.19,1.47 c-0.12,0.44-0.31,0.82-0.58,1.15c-0.26,0.32-0.59,0.57-1,0.75c-0.4,0.18-0.89,0.27-1.47,0.27h-3.62V99.81L52.97,99.81z M40.99,101.08l2.56,8.53h-5.11L40.99,101.08L40.99,101.08z M115.81,101.08l2.56,8.53h-5.12L115.81,101.08L115.81,101.08z M4.84,102.34c-0.59,0-1.1,0.15-1.53,0.45c-0.42,0.3-0.77,0.71-1.06,1.22l-0.04-1.42H0v13.94h2.28v-9.97 c0.21-0.59,0.52-1.06,0.91-1.4c0.4-0.34,0.91-0.52,1.53-0.52c0.2,0,0.37,0.01,0.53,0.03c0.15,0.01,0.32,0.03,0.5,0.06l-0.01-2.22 c-0.03-0.02-0.09-0.03-0.17-0.05c-0.07-0.03-0.15-0.05-0.23-0.06s-0.18-0.03-0.27-0.04C4.99,102.35,4.91,102.34,4.84,102.34 L4.84,102.34L4.84,102.34z M12.51,102.34c-0.66,0-1.3,0.12-1.92,0.35c-0.62,0.23-1.17,0.61-1.65,1.15 c-0.47,0.52-0.85,1.21-1.15,2.06c-0.29,0.84-0.44,1.88-0.44,3.1v1.57c0,1.06,0.12,1.99,0.37,2.77c0.25,0.78,0.61,1.43,1.07,1.95 c0.47,0.51,1.04,0.88,1.71,1.13c0.67,0.25,1.42,0.37,2.25,0.37c0.6,0,1.14-0.06,1.61-0.18c0.48-0.12,0.91-0.28,1.28-0.46 c0.37-0.2,0.69-0.42,0.95-0.67c0.27-0.25,0.49-0.51,0.68-0.77l-1.19-1.44c-0.19,0.23-0.39,0.45-0.61,0.64 c-0.21,0.19-0.45,0.36-0.71,0.5c-0.26,0.14-0.54,0.25-0.85,0.32c-0.31,0.08-0.66,0.12-1.04,0.12c-1.06,0-1.87-0.34-2.43-1.02 c-0.56-0.68-0.84-1.76-0.84-3.26v-0.32l7.78,0v-1.33c0-1.06-0.09-2-0.27-2.82c-0.18-0.82-0.47-1.5-0.86-2.06 c-0.4-0.56-0.9-0.98-1.52-1.26C14.13,102.48,13.38,102.34,12.51,102.34L12.51,102.34z M12.51,104.3c0.5,0,0.91,0.09,1.24,0.27 s0.58,0.43,0.77,0.76c0.2,0.33,0.34,0.72,0.42,1.17c0.09,0.45,0.15,0.94,0.18,1.48v0.31H9.64c0.03-0.78,0.13-1.43,0.28-1.95 c0.15-0.51,0.36-0.92,0.61-1.22c0.26-0.31,0.55-0.52,0.89-0.64C11.75,104.36,12.11,104.3,12.51,104.3L12.51,104.3L12.51,104.3z' fill='#A6A6A6'/>
  </g>
</svg>
      </div>
      </div>
      <div class='captcha-destination' id='destination-area'>
        <div class='captcha-dest-title'>
          <span class='emoji'>👇</span> الرابط جاهز الآن
        </div>
        <a class='captcha-go-btn' href='#' id='go-link' rel='noopener noreferrer' target='_blank'>
          <svg class='captcha-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>
    </div>
  </div>
</template>

<script>
//<![CDATA[
(function() {
  'use strict';

  var CONFIG = {
    timer: 20,
    paramName: 'captcha_go',
    displayMode: 'popup' // 'popup' أو 'inline'
  };

  var utils = {
    encrypt: function(str) {
      return btoa(encodeURIComponent(str));
    },
    decrypt: function(str) {
      try {
        return decodeURIComponent(atob(str));
      } catch(e) {
        return null;
      }
    }
  };

  var captchaElements = null;
  var pendingUrl = null;
  var isVerifying = false;
  var isClosed = false;
  var activeLink = null;

  function createCaptchaElements() {
    var tpl = document.getElementById('captcha-overlay-template');
    if (!tpl) return null;
    var clone = tpl.content.cloneNode(true);
    document.body.appendChild(clone);
    return {
      overlay: document.getElementById('captcha-overlay'),
      checkbox: document.getElementById('captcha-trigger'),
      spinner: document.querySelector('#captcha-trigger .captcha-spinner'),
      statusText: document.getElementById('status-text'),
      progressArea: document.getElementById('progress-area'),
      fill: document.getElementById('progress-fill'),
      seconds: document.getElementById('timer-seconds'),
      destArea: document.getElementById('destination-area'),
      goBtn: document.getElementById('go-link'),
      closeBtn: document.getElementById('captcha-close-btn'),
      box: document.querySelector('.captcha-box')
    };
  }

  function createInlineCaptcha(targetUrl, linkElement) {
    var oldInline = document.getElementById('inline-captcha-container');
    if (oldInline) {
      var oldWrapper = oldInline.parentNode;
      if (oldWrapper) oldWrapper.remove();
    }

    var container = document.createElement('div');
    container.id = 'inline-captcha-container';
    container.style.cssText = `
      margin: 20px auto;
      padding: 24px;
      background: #f8fafc;
      border-radius: 20px;
      border: 2px solid #e2e8f0;
      position: relative;
      max-width: 480px;
      width: 100%;
      box-sizing: border-box;
      animation: boxSlideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
      box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    `;

    var tpl = document.getElementById('captcha-overlay-template');
    var clone = tpl.content.cloneNode(true);
    var box = clone.querySelector('.captcha-box');
    
    box.style.boxShadow = 'none';
    box.style.border = 'none';
    box.style.padding = '0';
    box.style.animation = 'none';
    box.style.background = 'transparent';
    box.style.position = 'relative';
    box.style.direction = 'rtl';
    box.style.textAlign = 'right';
    box.style.width = '100%';
    
    var oldCloseBtn = box.querySelector('.captcha-close-btn');
    if (oldCloseBtn) oldCloseBtn.remove();
    
    var closeBtn = document.createElement('button');
    closeBtn.className = 'captcha-close-btn';
    closeBtn.setAttribute('aria-label', 'إلغاء التحقق');
    closeBtn.innerHTML = '&#10005;';
    closeBtn.style.cssText = `
      position: absolute;
      top: -32px;
      right: -22px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      font-size: 18px;
      cursor: pointer;
      color: #94a3b8;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      z-index: 10;
      font-weight: 700;
    `;
    
  closeBtn.addEventListener('mouseenter', function() {
      this.style.background = '#fee2e2';
      this.style.borderColor = '#CCCCCC';
      this.style.color = '#ef4444';
      this.style.transform = 'rotate(90deg) scale(1.1)';
    });
    closeBtn.addEventListener('mouseleave', function() {
      this.style.background = '#ffffff';
      this.style.borderColor = '#e2e8f0';
      this.style.color = '#94a3b8';
      this.style.transform = 'rotate(0deg) scale(1)';
      
    });
    
    closeBtn.addEventListener('click', function(e) {
      e.stopPropagation();
      removeInlineCaptcha();
    });
    
    box.appendChild(closeBtn);
    container.appendChild(box);

    if (linkElement && linkElement.parentNode) {
      var wrapper = document.createElement('div');
      wrapper.style.cssText = `
        display: flex;
        justify-content: center;
        width: 100%;
        clear: both;
      `;
      wrapper.appendChild(container);
      linkElement.parentNode.insertBefore(wrapper, linkElement.nextSibling);
    } else {
      document.body.appendChild(container);
    }

    var el = {
      checkbox: container.querySelector('#captcha-trigger'),
      spinner: container.querySelector('#captcha-trigger .captcha-spinner'),
      statusText: container.querySelector('#status-text'),
      progressArea: container.querySelector('#progress-area'),
      fill: container.querySelector('#progress-fill'),
      seconds: container.querySelector('#timer-seconds'),
      destArea: container.querySelector('#destination-area'),
      goBtn: container.querySelector('#go-link'),
      overlay: null,
      closeBtn: closeBtn,
      container: container
    };

    el.goBtn.href = targetUrl;
    el.statusText.textContent = ' أنا لست برنامج روبوت';
    el.statusText.classList.remove('verified');
    el.destArea.classList.remove('visible');
    el.destArea.style.display = 'none';
    el.progressArea.style.display = 'none';
    el.fill.style.width = '0%';
    el.seconds.textContent = CONFIG.timer;
    
    el.checkbox.addEventListener('click', function() {
      if (this.classList.contains('checked') || this.classList.contains('loading') || isVerifying) return;
      startInlineVerification(el);
    });

    window._inlineCaptcha = el;
    return el;
  }

  function startInlineVerification(el) {
    if (isVerifying) return;
    isVerifying = true;
    
    el.checkbox.classList.add('loading');
    el.checkbox.querySelector('.captcha-spinner').style.display = 'block';
    el.progressArea.style.display = 'block';
    
    var timeLeft = CONFIG.timer;
    var startTime = performance.now();
    var duration = CONFIG.timer * 1000;
    
    el.seconds.textContent = timeLeft;
    el.fill.style.width = '0%';
    
    function updateProgress() {
      var elapsed = performance.now() - startTime;
      var progress = Math.min(elapsed / duration, 1);
      
      el.fill.style.width = (progress * 100) + '%';
      
      var remaining = Math.ceil((1 - progress) * CONFIG.timer);
      if (remaining >= 0 && el.seconds.textContent !== remaining.toString()) {
        el.seconds.textContent = remaining;
      }
      
      if (progress < 1) {
        requestAnimationFrame(updateProgress);
      } else {
        el.fill.style.width = '100%';
        el.seconds.textContent = '0';
        el.spinner.style.display = 'none';
        completeInlineVerification(el);
      }
    }
    
    requestAnimationFrame(updateProgress);
  }

  function completeInlineVerification(el) {
    el.checkbox.classList.remove('loading');
    el.checkbox.classList.add('checked');
    el.progressArea.style.display = 'none';
    el.statusText.textContent = ' تم التحقق بنجاح';
    el.statusText.classList.add('verified');
    isVerifying = false;
    
    el.destArea.style.display = 'block';
    setTimeout(function() {
      el.destArea.classList.add('visible');
    }, 50);
  }

  function removeInlineCaptcha() {
    var container = document.getElementById('inline-captcha-container');
    if (container) {
      var wrapper = container.parentNode;
      if (wrapper && wrapper.style.display === 'flex') {
        wrapper.remove();
      } else {
        container.remove();
      }
    }
    isVerifying = false;
    isClosed = true;
    if (activeLink) {
      activeLink.style.display = 'inline';
      activeLink = null;
    }
  }

  document.addEventListener('click', function(e) {
    var link = e.target.closest('a');
    if (!link) return;
    if (link.classList.contains('captcha-go-btn') || link.closest('.captcha-box')) return;
    
    var isExternal = link.hostname && link.hostname !== window.location.hostname;
    var isValidProtocol = link.href && (link.href.indexOf('http://') === 0 || link.href.indexOf('https://') === 0);
    var isNotMailto = link.href && link.href.indexOf('mailto:') === -1;
    var isNotTel = link.href && link.href.indexOf('tel:') === -1;
    
    if (isExternal && isValidProtocol && isNotMailto && isNotTel) {
      e.preventDefault();
      pendingUrl = link.href;
      isClosed = false;

      if (CONFIG.displayMode === 'inline') {
        activeLink = link;
        link.style.display = 'none';
        createInlineCaptcha(pendingUrl, link);
      } else {
        showCaptcha(pendingUrl);
      }
    }
  });

  function showCaptcha(targetUrl) {
    if (!captchaElements) {
      captchaElements = createCaptchaElements();
      if (!captchaElements) return;
    }
    
    var el = captchaElements;
    el.checkbox.classList.remove('checked', 'loading');
    el.spinner.style.display = 'none';
    el.progressArea.style.display = 'none';
    el.destArea.classList.remove('visible');
    el.destArea.style.display = 'none';
    el.statusText.textContent = ' أنا لست برنامج روبوت';
    el.statusText.classList.remove('verified');
    el.fill.style.width = '0%';
    el.seconds.textContent = CONFIG.timer;
    isVerifying = false;
    
    el.goBtn.href = targetUrl;
    el.overlay.classList.add('active');
    document.body.style.overflow = 'hidden';
    
    var newCheckbox = el.checkbox.cloneNode(true);
    el.checkbox.parentNode.replaceChild(newCheckbox, el.checkbox);
    captchaElements.checkbox = newCheckbox;
    captchaElements.spinner = newCheckbox.querySelector('.captcha-spinner');
    
    newCheckbox.addEventListener('click', function() {
      if (this.classList.contains('checked') || this.classList.contains('loading') || isVerifying || isClosed) return;
      startVerification(this);
    });
    
    if (el.closeBtn) {
      var newCloseBtn = el.closeBtn.cloneNode(true);
      el.closeBtn.parentNode.replaceChild(newCloseBtn, el.closeBtn);
      captchaElements.closeBtn = newCloseBtn;
      newCloseBtn.addEventListener('click', function() {
        closeCaptcha();
      });
    }
    
    document.addEventListener('keydown', function escHandler(e) {
      if (e.key === 'Escape') {
        closeCaptcha();
        document.removeEventListener('keydown', escHandler);
      }
    });
  }

  function startVerification(checkbox) {
    if (isVerifying || isClosed) return;
    isVerifying = true;
    
    checkbox.classList.add('loading');
    checkbox.querySelector('.captcha-spinner').style.display = 'block';
    captchaElements.progressArea.style.display = 'block';
    
    var timeLeft = CONFIG.timer;
    var startTime = performance.now();
    var duration = CONFIG.timer * 1000;
    
    captchaElements.seconds.textContent = timeLeft;
    captchaElements.fill.style.width = '0%';
    
    function updateProgress() {
      if (isClosed) return;
      var elapsed = performance.now() - startTime;
      var progress = Math.min(elapsed / duration, 1);
      captchaElements.fill.style.width = (progress * 100) + '%';
      var remaining = Math.ceil((1 - progress) * CONFIG.timer);
      if (remaining >= 0 && captchaElements.seconds.textContent !== remaining.toString()) {
        captchaElements.seconds.textContent = remaining;
      }
      if (progress < 1) {
        requestAnimationFrame(updateProgress);
      } else {
        captchaElements.fill.style.width = '100%';
        captchaElements.seconds.textContent = '0';
        captchaElements.spinner.style.display = 'none';
        completeVerification();
      }
    }
    requestAnimationFrame(updateProgress);
  }

  function completeVerification() {
    if (isClosed) return;
    captchaElements.checkbox.classList.remove('loading');
    captchaElements.checkbox.classList.add('checked');
    captchaElements.progressArea.style.display = 'none';
    captchaElements.statusText.textContent = ' تم التحقق بنجاح';
    captchaElements.statusText.classList.add('verified');
    isVerifying = false;
    captchaElements.destArea.style.display = 'block';
    setTimeout(function() {
      if (!isClosed) {
        captchaElements.destArea.classList.add('visible');
      }
    }, 50);
  }

  function closeCaptcha() {
    isClosed = true;
    isVerifying = false;
    if (captchaElements && captchaElements.overlay) {
      captchaElements.overlay.classList.remove('active');
      document.body.style.overflow = '';
    }
    pendingUrl = null;
  }

  function checkForRedirect() {
    var params = new URLSearchParams(window.location.search);
    if (params.has(CONFIG.paramName)) {
      var target = utils.decrypt(params.get(CONFIG.paramName));
      if (target) {
        var url = new URL(window.location.href);
        url.searchParams.delete(CONFIG.paramName);
        window.history.replaceState({}, '', url.toString());
        setTimeout(function() {
          window.location.href = target;
        }, 500);
      }
    }
  }

  document.addEventListener('DOMContentLoaded', function() {
    checkForRedirect();
    if (!captchaElements && CONFIG.displayMode === 'popup') {
      captchaElements = createCaptchaElements();
      if (captchaElements) {
        captchaElements.overlay.classList.remove('active');
        document.body.style.overflow = '';
      }
    }
  });

})();
//]]>

</script>

اضغط على حفظ ~~(Save)~~ واختبر الأداة بالنقر على رابط خارجي في مدونتك.

تغيير شكل الأيقونة

يمكنك استبدال أيقونة الروبوت الافتراضية بأيقونة أخرى من اختيارك، فقط استبدل كود SVG داخل عنصر .captcha-robot.

ملاحظة مهمة

يمكنك أختيار بين شكلين لعرض أداة التحقق و تحويل الرابط إما منبثق أو ثابت

ستجد بداخل الأكواد

var CONFIG = {
timer: 10,
paramName: 'captcha_go',
displayMode: 'popup' // 'popup' أو 'inline'
};

موجودة تلقائيا على خيار الأضافة منبثقة ~~popup~~ أذا غيرتها الى ~~inline~~ ستظهر ثابتة

و ستجد ~~عدد الثواني~~ الخاصة بعداد التحويل هي 20 ثانية و هي موجودة في ~~مكانين~~ بداخل الأكواد غير الرقم للذي تريده ~~في المكانين~~ شاهد الفيديو

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

متجاوب مع جميع الأجهزة: يعمل بشكل مثالي على الهواتف والأجهزة اللوحية والحواسيب
خفة الوزن: لا يؤثر على سرعة تحميل المدونة
سهولة التركيب: لا يحتاج إلى خبرة برمجية
توافق مع جميع المتصفحات: يدعم Chrome و Firefox و Safari و Edge

ملاحظات هامة

الأداة تعمل تلقائياً: ما عليك سوى تركيبها وستعمل على جميع الروابط الخارجية
لا تتداخل مع الروابط الداخلية: الروابط التي تؤدي إلى صفحات مدونتك لن تتأثر
يمكن إيقافها بسهولة: ببساطة قم بحذف الكود من القالب

الخاتمة

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

وفي الختام !

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