شرح كتابة صفحة تحويل الروابط أحترافية

شرح كتابة صفحة تحويل الروابط أحترافية

ADVERTISEMENT

معلومات شرح كتابة صفحة تحويل الروابط صفحة إعادة توجيه او صفحة Safelink

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

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

ما هي صفحة إعادة التوجية ثم

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

ما هي الاستفاده من العمل بشكل جيد توجي في مدونتي

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

وخطوات أنشاء صفحة وحتى التوجية في المدونة

قم بالذهاب الي لوحة تحكم مدونتك

قم بالذهاب الي صفحات وأنشاء صفحة جديدة.

قم ببتسمية صفحة بأسم تحويل الصفحة

أحفظ الصفحة بعد أي قاف التعليقات

أفتح الصفحة و انتقل إلى عرض HTML

الصق المقصود لغرض إضافة وتجربة تسمية الصفحة بما تريد مثلا صفحة تحويل الروابط

الكود الخاص بالصفحة

<!--أضف هنا أكواد الإعلانات إذا كنت ترغب-->
<div style="text-align: center;">
ضع كود الاعلانات
</div>
    <title>صفحة الانتقال</title>
  <style>
.countdown-container{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:20px 0;}
.progress-circle{width:180px;height:180px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:83px;font-weight:bold;color:#ab52ca;margin-bottom:40px;transition:background 1s linear;border:solid 4px #AB52CA;}
#skip-button{display:none;padding:16px 40px;background:linear-gradient(79deg,#aa50c8,#4f20b9);color:#fff;border:none;cursor:pointer;margin-top:15px;border-radius:6px;}
</style>
    <div class="countdown-container">
        <div class="progress-circle">10</div>
        <div class="progress-bar">
            <div class="progress-fill"></div>
        </div>
        <button id="skip-button"> ✔ الأنتقال إلى الرابط</button>
    </div>

    <script>
        const skipButton = document.getElementById('skip-button');
        const progressBar = document.querySelector('.progress-fill');
        const progressCircle = document.querySelector('.progress-circle');
        let count = 10; // عدد الثواني

        // الحصول على الرابط المستهدف من URL
        const urlParams = new URLSearchParams(window.location.search);
        const targetUrl = urlParams.get('url');

        // تحديث العدّاد والتأثير الدائري
        const countdown = setInterval(() => {
            count--;
            if (count >= 0) {
                const percentage = (10 - count) * 20;
                progressCircle.style.background = `none`;
                progressCircle.innerText = count;
                progressBar.style.width = `${percentage}%`;
            }
            if (count === 0) {
                clearInterval(countdown);
                skipButton.style.display = 'block';
            }
        }, 1000);

        // عند الضغط على زر الانتقال
        skipButton.addEventListener('click', function () {
            window.location.href = targetUrl;
        });
    </script>

<!--أضف هنا أكواد الإعلانات إذا كنت ترغب-->
<div style="text-align: center;">
ضع كود الاعلانات
</div>

قم بالانتقال الى اكواد القالب و ابحث عن </body> و الصق الكود التالي اعلاه

 <script type='text/javascript'>
//<![CDATA[
  document.addEventListener("DOMContentLoaded", function () {
    const allLinks = document.querySelectorAll(".post-body a"); 

    // قائمة الدومينات أو الكلمات المستثناة
    const excludedDomains = [
        "facebook.com",
        "twitter.com",
        "instagram.com",
        "linkedin.com"
    ];

    allLinks.forEach(link => {
        const originalURL = link.href;
        const isExcluded = excludedDomains.some(domain => originalURL.includes(domain));

        if (!isExcluded && originalURL !== "#") { // استثناء الروابط الفارغة
            link.href = `الصق رابط الصفحة هنا?url=${encodeURIComponent(originalURL)}`;
        }
    });
});

  //]]>
</script>

التعديلات

ضع رابط الصفحة التي قمت يصنعها مكان كلمة الصق رابط الصفحة هنا

تجد في الكود الثاني // قائمة الدومينات أو الكلمات المستثناة اسقلهم يمكنك اضافة اي دومين ترد عدم تحويل الرابط الى صفحة تحويل الروابط يجب كتابة الدومين بهذا الشكل , "twitter.com", لا تنسى الفاصلة فقط غير الى الدومين المطلوب

تغير مدة العداد الثواني بداخل الصفحة

اذهب الى الاكواد الخاصة بصفحة العداد ستجد الرقم 10 موجود 3 مرات قم بتغير الرقم الةى الرقم اللذي ترده

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

تركيب صفحة تحويل الروابط 2 لقالب بلوجر

تحويل الصورة الى رابط صفحة تحويل الروابط تحويل الصور الى رابط تحويل صفحة شخصية الى عامة انشاء صفحة تحويل الروابط

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحة الانتقال</title>
    <!-- أضف هنا أكواد الإعلانات إذا كنت ترغب -->
    <style>
        .countdown-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 20px 0;
        }
        .progress-circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: conic-gradient(#4CAF50 0% 0%, #ddd 0%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
            transition: background 1s linear; /* تأثير الحركة السلسة */
        }
        .progress-bar {
            width: 100%;
            height: 5px;
            background-color: #ddd;
            position: relative;
            margin-top: 10px;
        }
        .progress-fill {
            height: 100%;
            background-color: #4CAF50;
            width: 0%;
            transition: width 1s linear; /* تأثير الحركة السلسة */
        }
        #skip-button {
            display: none;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: #fff;
            border: none;
            cursor: pointer;
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <div class="countdown-container">
        <div class="progress-circle">5</div>
        <div class="progress-bar">
            <div class="progress-fill"></div>
        </div>
        <button id="skip-button">الانتقال إلى الرابط</button>
    </div>

    <script>
        const skipButton = document.getElementById('skip-button');
        const progressBar = document.querySelector('.progress-fill');
        const progressCircle = document.querySelector('.progress-circle');
        let count = 5; // عدد الثواني

        // الحصول على الرابط المستهدف من URL
        const urlParams = new URLSearchParams(window.location.search);
        const targetUrl = urlParams.get('url');

        // تحديث العدّاد والتأثير الدائري
        const countdown = setInterval(() => {
            count--;
            if (count >= 0) {
                const percentage = (5 - count) * 20;
                progressCircle.style.background = `conic-gradient(#4CAF50 0% ${percentage}%, #ddd ${percentage}%)`;
                progressCircle.innerText = count;
                progressBar.style.width = `${percentage}%`;
            }
            if (count === 0) {
                clearInterval(countdown);
                skipButton.style.display = 'block';
            }
        }, 1000);

        // عند الضغط على زر الانتقال
        skipButton.addEventListener('click', function () {
            window.location.href = targetUrl;
        });
    </script>
</body>
</html>

تركيب صفحة تحويل الروابط 3 لقالب بلوجر

<title>صفحة تحويل</title> <style> body {text-align: center;margin: 0;padding: 0;} .container10 {margin: 50px auto;background: #fff;padding: 20px;border-radius: 10px;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);} .countdown {font-size: 7rem;margin: 52px 0px;color: #80447d;font-family: sans-serif;background: #e9ecef;border: 1px solid #0000000d;height: 184px;line-height: 180px;} .progress {height: 2.2rem;background: #e9ecef;border: 1px solid #0000000d;} .progress-bar {height: 26px;background: linear-gradient(346deg, #0923b5, #cf5e53);border-radius: 5px;transition: width 1s linear;margin: 3px;} .btn-redirect {display: none;margin-top: 20px;padding: 10px 20px;background: #4caf50;color: white;border: none;border-radius: 5px;text-decoration: none;font-size: 1.2rem;cursor: pointer;}.btn-redirect:hover {background: #45a049;} h10 {font-size: 42px;background: #e9ecef;position: relative;padding: 13px 40px 17px 40px;border-radius: 51px;} </style> <div class="container10"> <h10>أنتظر قليلا ليتم التحويل ...</h10> <br /> <b:if cond="data:blog.pageType == "item""> <div style="clear: both; margin: 10px; text-align: center;">  </div></b:if> <br /> <div class="countdown" id="countdown">10</div> <div class="progress"> <div class="progress-bar" id="progress-bar" style="width: 100%;"></div> </div> <a class="btn-redirect" href="#" id="redirect-btn">انتقل الآن</a> </div> <script> // عداد التنازلي مع شريط التقدم const countdownElement = document.getElementById("countdown"); const progressBar = document.getElementById("progress-bar"); const redirectBtn = document.getElementById("redirect-btn"); let countdownTime = 10; // الوقت بالثواني const targetURL = "https://example.com"; // ضع الرابط الذي سيتم التحويل إليه const countdownInterval = setInterval(() => { countdownTime--; countdownElement.textContent = countdownTime; progressBar.style.width = `${(countdownTime / 10) * 100}%`; if (countdownTime <= 0) { clearInterval(countdownInterval); redirectBtn.style.display = "inline-block"; // إظهار الزر redirectBtn.href = targetURL; // ضبط الرابط } }, 1000); </script> <b:if cond="data:blog.pageType == "item""> <div style="clear: both; margin: 10px; text-align: center;">  </div></b:if>

infosmartics