قالب بلوجر JobPortal المتخصص في عرض الوظائف

 صفحة تحويل روابط مثل سكويز بوب بدون مغادرة الصفحة مع عداد وتحويل تلقائى والوان جذابة ومعه كود تضمين لوضعه بمواقع اخرى واستخدام الاعلانات وتوليد روابط قصيرة

صفحة تحويل روابط مثل سكويز بوب

ممتاز! بما إنك تريد صفحة تحويل روابط مثل سكويز بوب (بدون مغادرة الصفحة) وبمواصفات متقدمة، إليك مشروع متكامل فيه:

واجهة جذابة داخل صفحة الموقع (Popup/Overlay)

عداد وتحويل تلقائي

أماكن للإعلانات

كود تضمين يمكن وضعه بأي موقع

نظام توليد روابط قصيرة

✅ أولاً: تصميم صفحة التحويل (كـ Pop-up Overlay)

<!-- ضعه في موقعك، أو استخدمه داخل iframe --> <style> #squeezePopup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; z-index: 9999; } #popupContent { background: #ffffff; padding: 30px; border-radius: 20px; width: 90%; max-width: 500px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.3); animation: fadeIn 0.5s ease; font-family: 'Segoe UI', sans-serif; } .ads { background: #f0f0f0; padding: 15px; margin: 10px 0; border-radius: 10px; font-size: 14px; } #countdown { font-size: 24px; color: #e67e22; margin: 15px 0; } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } </style> <div id="squeezePopup" style="display:none;"> <div id="popupContent"> <h2>سيتم تحويلك خلال <span id="countdown">10</span> ثوانٍ</h2> <div class="ads">إعلان هنا</div> <div class="ads">إعلان آخر هنا</div> <p><a href="#" id="manualLink">اضغط هنا إذا لم يتم التحويل</a></p> </div> </div> <script> function showSqueezePopup(targetUrl, waitSeconds = 10) { const popup = document.getElementById("squeezePopup"); const countdownEl = document.getElementById("countdown"); const manualLink = document.getElementById("manualLink"); popup.style.display = "flex"; manualLink.href = targetUrl; let countdown = waitSeconds; countdownEl.textContent = countdown; const interval = setInterval(() => { countdown--; countdownEl.textContent = countdown; if (countdown <= 0) { clearInterval(interval); window.location.href = targetUrl; } }, 1000); } // مثال: showSqueezePopup("https://example.com"); </script>

✅ ثانياً: كود التضمين الخارجي (لأي موقع)

أنشئ ملف JavaScript في موقعك (مثلًا embed.js) وضع فيه:

function loadRedirectPopup(shortCode) { fetch(`https://yourdomain.com/api/get-url?code=${shortCode}`) .then(res => res.json()) .then(data => { if (data.url) { const script = document.createElement("script"); script.src = "https://yourdomain.com/redirect-popup.js"; script.onload = () => { showSqueezePopup(data.url, 10); // عداد 10 ثواني }; document.body.appendChild(script); } }); }

ثم داخل المواقع الأخرى:

<script src="https://yourdomain.com/embed.js"></script> <script> loadRedirectPopup("abc123"); // استخدم كود الرابط القصير هنا </script>

✅ ثالثاً: نظام توليد روابط قصيرة (خلفية PHP بسيطة)

قاعدة البيانات:

CREATE TABLE short_links ( id INT AUTO_INCREMENT PRIMARY KEY, code VARCHAR(10) UNIQUE, url TEXT );

إنشاء رابط قصير (PHP):

<?php // save.php $pdo = new PDO("mysql:host=localhost;dbname=yourdb", "user", "pass"); $url = $_POST['url']; $code = substr(md5(uniqid()), 0, 6); $stmt = $pdo->prepare("INSERT INTO short_links (code, url) VALUES (?, ?)"); $stmt->execute([$code, $url]); echo json_encode(['short' => $code]);

جلب الرابط الطويل:

<?php // api/get-url.php $pdo = new PDO("mysql:host=localhost;dbname=yourdb", "user", "pass"); $code = $_GET['code']; $stmt = $pdo->prepare("SELECT url FROM short_links WHERE code = ?"); $stmt->execute([$code]); $data = $stmt->fetch(); echo json_encode(['url' => $data ? $data['url'] : null]);

✅ إعلان جاهز (يمكنك ربط AdSense أو HTML يدوي):

<div class="ads"> <script async src="https://your-ads-network.com/ad.js"></script> <div id="ad-slot">إعلان هنا</div> </div>

هل تود نسخة:

✅ جاهزة على HTML/CSS/JS للتحميل؟

✅ تعمل عبر Node.js أو Laravel بدلاً من PHP؟

✅ بواجهة توليد سهلة للمستخدمين؟

قول لي الطريقة اللي تناسبك، وأنا أجهزها لك بالكامل 💻✨