الآن سأقدّم لك سكربتًا متكاملًا لإنشاء خدمة تقصير روابط (مثل Bitly أو Aylink) باستخدام JavaScript وواجهة بسيطة، مع صفحة إعادة توجيه مدمجة تحتوي على:
انشاء صفحة تقصير روابط وصفحة تحويل بالقالب
تقصير الروابط تلقائيًا (بشكل تجريبي بسيط دون قاعدة بيانات)
إمكانية النسخ بزر واحد
دعم الإعلانات (يمكنك وضع كود AdSense أو Adsterra)
صفحة إعادة توجيه بعد النقر على الرابط المختصر
✅ أولاً: الصفحة الرئيسية (index.html)
.code-box {
position: relative;
background: #272822;
color: #f8f8f2;
border-radius: 10px;
padding: 15px;
margin: 20px auto;
font-family: monospace;
direction: ltr;
overflow: auto;
}
.code-box textarea {
width: 100%;
height: 250px;
background: transparent;
border: none;
color: #f8f8f2;
resize: none;
font-size: 14px;
outline: none;
}
.code-buttons {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 10px;
}
.code-buttons button {
padding: 8px 12px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: 0.3s;
}
.code-buttons button:hover {
background-color: #0056b3;
}
مُقصّر الروابط
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; }
خدمة تقصير الروابط
تقصير الرابط
function shortenUrl() {
const originalUrl = document.getElementById(“originalUrl”).value;
const encodedUrl = encodeURIComponent(originalUrl);
const uniqueId = Math.random().toString(36).substring(2, 7);
const shortUrl = `${location.origin}/redirect.html?id=${uniqueId}&url=${encodedUrl}`;
// عرض الرابط المختصر
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(“تم نسخ الرابط!”);
}
function copyCode() {
const code = document.getElementById(“myCode”);
code.select();
document.execCommand(“copy”);
alert(“تم نسخ الكود!”);
}
function downloadCode() {
const code = document.getElementById(“myCode”).value;
const blob = new Blob(, { type: “text/plain” });
const link = document.createElement(“a”);
link.href = URL.createObjectURL(blob);
link.download = “code.html”;
link.click();
}
function clearCode() {
if (confirm(“هل أنت متأكد من مسح الكود؟”)) {
document.getElementById(“myCode”).value = “”;
}
}
✅ ثانياً: صفحة إعادة التوجيه (redirect.html)
.code-box {
position: relative;
background: #272822;
color: #f8f8f2;
border-radius: 10px;
padding: 15px;
margin: 20px auto;
font-family: monospace;
direction: ltr;
overflow: auto;
}
.code-box textarea {
width: 100%;
height: 250px;
background: transparent;
border: none;
color: #f8f8f2;
resize: none;
font-size: 14px;
outline: none;
}
.code-buttons {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 10px;
}
.code-buttons button {
padding: 8px 12px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: 0.3s;
}
.code-buttons button:hover {
background-color: #0056b3;
}
xxxxxxx
يتم تحويلك…
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;
}
يرجى الانتظار، يتم تحويلك…
سيتم تحويلك خلال 5 ثوانٍ
إعلان هنا
const urlParams = new URLSearchParams(window.location.search);
const targetUrl = urlParams.get(“url”);
let counter = 5;
const countdown = setInterval(() => {
document.getElementById(“counter”).textContent = counter;
if (counter === 0) {
clearInterval(countdown);
window.location.href = decodeURIComponent(targetUrl);
}
counter–;
}, 1000);
function copyCode() {
const code = document.getElementById(“myCode”);
code.select();
document.execCommand(“copy”);
alert(“تم نسخ الكود!”);
}
function downloadCode() {
const code = document.getElementById(“myCode”).value;
const blob = new Blob(, { type: “text/plain” });
const link = document.createElement(“a”);
link.href = URL.createObjectURL(blob);
link.download = “code.html”;
link.click();
}
function clearCode() {
if (confirm(“هل أنت متأكد من مسح الكود؟”)) {
document.getElementById(“myCode”).value = “”;
}
}
✳️ ملاحظات:
السكربت يعمل بدون قاعدة بيانات (لأغراض تجريبية).
لو أردت سكربت كامل مع قاعدة بيانات (PHP + MySQL أو Firebase) أخبرني وسأجهزه لك.
يمكنك استبدال عبارة “إعلان هنا” بكود إعلان AdSense أو Adsterra مباشرة.
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
لتحميل كود صفحة تقصير روابط
.button-outline-blue {
display: inline-block;
padding: 10px 20px;
margin: 10px 5px;
font-size: 16px;
font-weight: bold;
color: #007BFF; /* أزرق */
background-color: #ffffff; /* أبيض */
border: 2px solid #007BFF;
border-radius: 8px;
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease;
}
.button-outline-blue:hover {
background-color: #f0f8ff; /* خلفية زرقاء خفيفة */
}
.button-outline-blue:active {
color: #dc3545; /* أحمر */
background-color: #ffe5e5; /* خلفية حمراء فاتحة */
border-color: #dc3545;
}
هل تحب أن أضيف دعمًا لتخزين الروابط ومتابعة عدد النقرات؟
sehaa 
أضف تعليق