انشاء صفحة تقصير روابط وصفحة تحويل بالقالب

غير معرف

29 نوفمبر 2025

الآن سأقدّم لك سكربتًا متكاملًا لإنشاء خدمة تقصير روابط (مثل Bitly أو Aylink) باستخدام JavaScript وواجهة بسيطة، مع صفحة إعادة توجيه مدمجة تحتوي على:

انشاء صفحة تقصير روابط وصفحة تحويل بالقالب

تقصير الروابط تلقائيًا (بشكل تجريبي بسيط دون قاعدة بيانات)

إمكانية النسخ بزر واحد

دعم الإعلانات (يمكنك وضع كود AdSense أو Adsterra)

صفحة إعادة توجيه بعد النقر على الرابط المختصر

✅ أولاً: الصفحة الرئيسية (index.html)

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>مُقصّر الروابط</title>
  <style>
    body { font-family: Arial; text-align: center; padding: 50px; }
    input[type="text"] { width: 60%; padding: 10px; }
    button { padding: 10px 20px; margin-top: 10px; }
    .short-link { margin-top: 20px; font-size: 18px; }
  </style>
</head>
<body>

<h1>خدمة تقصير الروابط</h1>
  <input type="text" id="originalUrl" placeholder="أدخل الرابط الطويل هنا">
  <br>
  <button onclick="shortenUrl()">تقصير الرابط</button>

<div class="short-link" id="result" style="display:none;">
    <p>رابطك المختصر:</p>
    <input type="text" id="shortUrl" readonly>
    <button onclick="copyLink()">نسخ</button>
  </div>

// عرض الرابط المختصر
      document.getElementById("shortUrl").value = shortUrl;
      document.getElementById("result").style.display = "block";
    }

function copyLink() {
      const shortUrl = document.getElementById("shortUrl");
      shortUrl.select();
      shortUrl.setSelectionRange(0, 99999);
      document.execCommand("copy");
      alert("تم نسخ الرابط!");
    }
  </script>

</body>
</html>

✅ ثانياً: صفحة إعادة التوجيه (redirect.html)

<!DOCTYPE html>
    
      
  xxxxxxx
    
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>يتم تحويلك...</title>
  <style>
    body { text-align: center; padding: 100px; font-family: Arial; background: #f9f9f9; }
    .box {
      background: white;
      display: inline-block;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
    }
    #ad-area {
      margin: 20px 0;
      height: 90px;
      background-color: #eee;
    }
  </style>
</head>
<body>

<div class="box">
    <h2>يرجى الانتظار، يتم تحويلك...</h2>
    <p>سيتم تحويلك خلال <span id="counter">5</span> ثوانٍ</p>

<div id="ad-area">
      
      إعلان هنا
    </div>
  </div>

const countdown = setInterval(() => {
      document.getElementById("counter").textContent = counter;
      if (counter === 0) {
        clearInterval(countdown);
        window.location.href = decodeURIComponent(targetUrl);
      }
      counter--;
    }, 1000);
  </script>

</body>
</html>

✳️ ملاحظات:

السكربت يعمل بدون قاعدة بيانات (لأغراض تجريبية).

لو أردت سكربت كامل مع قاعدة بيانات (PHP + MySQL أو Firebase) أخبرني وسأجهزه لك.

يمكنك استبدال عبارة "إعلان هنا" بكود إعلان AdSense أو Adsterra مباشرة.

لتحميل كود صفحة تقصير روابط

تحميل

هل تحب أن أضيف دعمًا لتخزين الروابط ومتابعة عدد النقرات؟

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

مجلة شمس 4M

القائمة الرئيسية

الصفحات

انشاء صفحة تقصير روابط وصفحة تحويل بالقالب

انشاء صفحة تقصير روابط وصفحة تحويل بالقالب

✅ أولاً: الصفحة الرئيسية (index.html)

✅ ثانياً: صفحة إعادة التوجيه (redirect.html)

أخر المواضيع من قسم : اضافات بلوجر

تعليقات

إرسال تعليق