اضافة صفحة تحويل الروابط الخارجية لمدونات بلوجر

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

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

معاينة صفحة توجيه الروابط

بإمكانك مشاهدة شكل صفحة تحويل الروابط الخارجية من خلال الرابط التالي:

معاينة الصفحة

مميزات صفحة توجيه الروابط

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

أبرز مميزات صفحة تحويل الروابط

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

شرح طريقة التركيب

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

HTML Code

<div class="progress-container">

  <svg viewBox="0 0 200 200">

    <defs>

      <linearGradient id="neon-gradient" x1="1" y1="0" x2="0" y2="1">

        <stop offset="0%" stop-color="#2979ff"/>

        <stop offset="100%" stop-color="#00d4ff"/>

      </linearGradient>

    </defs>

    <circle class="progress-bg" cx="100" cy="100" r="85" />

    <circle class="progress-bar" cx="100" cy="100" r="85" />

  </svg>

  <div class="progress-text" id="progress-number">0</div>

</div>

<div class="btn-container">

  <a href="javascript:void(0)" id="btn-wait" class="btn-wait">يرجى الانتظار...</a>

  <a href="#" id="btn-go" class="btn-go">الانتقال للرابط</a>

  <a href="javascript:void(0)" id="btn-disabled" class="btn-disabled">الرابط معطل</a>

</div>
  

الخطوة الثانية

• قم بالذهاب إلى لوحة التحكم
• الذهاب إلى قسم المظهر
• بجانب تخصيص اختر تعديل html
• ابحث عن وسم ]]></b:skin>
• اعلاة مباشرة أضف الكود التالي

css Code

  .progress-container {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 50px auto;
  }

  svg {
    transform: rotate(144deg); 
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 8px #2979ff66);
  }

  .progress-bg {
    fill: none;
    stroke: #ddd;
    stroke-width: 16;
    stroke-dasharray: 267 534;
    stroke-dashoffset: 0;
  }

  .progress-bar {
    fill: none;
    stroke: url(#neon-gradient);
    stroke-width: 16;
    stroke-linecap: round;
    stroke-dasharray: 267 534;
    stroke-dashoffset: 267;
    transition: stroke-dashoffset 0.5s ease;
    filter:
      drop-shadow(0 0 6px #2979ff88)
      drop-shadow(0 0 10px #2979ffaa);
  }
.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 48px;
    color: #2979ff;
    font-weight: 700;
    text-shadow:
      0 0 6px #2979ffaa,
      0 0 12px #2979ffcc;
  }

  .btn-container {
    text-align: center;
    margin-top: 20px;
  }

  .btn-wait, .btn-go, .btn-disabled {
    display: inline-block;
    padding: 14px 48px;
    border-radius: 40px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }
.btn-wait {
    background: #bbb;
    color: #555;
    cursor: default;
  }

  .btn-go {
    background: #21262e;
    color: #fff;
    box-shadow: 0 0 20px #ffffff;
    display: none;
  }

  .btn-go:hover {
    background: #5393ff;
    box-shadow: 0 0 30px #5393ffcc;
  }

  .btn-disabled {
    background: #f44336;
    color: #fff;
    box-shadow: 0 0 20px #f4433666;
    display: none;
  }

  

الخطوة الثالثة

• قم بالذهاب إلى لوحة التحكم
• الذهاب إلى قسم المظهر
• بجانب تخصيص اختر تعديل html
• ابحث عن وسم اعلاة </body>
• مباشرة أضف الكود التالي

js Code

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function () {
  const totalSeconds = 15;
  let timer = 0;

  const circle = document.querySelector('.progress-bar');
  const drawLength = 267; // 85% من محيط الدائرة
  const progressText = $("#progress-number");
  const btnWait = $("#btn-wait");
  const btnGo = $("#btn-go");
  const btnDisabled = $("#btn-disabled");

  function getUrlParam(name) {
    const url = new URL(window.location.href);
    return url.searchParams.get(name);
  }

  function setProgress(secondsPassed) {
    const progress = secondsPassed / totalSeconds;
    const offset = drawLength - progress * drawLength;
    circle.style.strokeDashoffset = offset;
  }

  const interval = setInterval(() => {
    timer++;
    setProgress(timer);
    progressText.text(timer);

    if (timer >= totalSeconds) {
      clearInterval(interval);

      const redirectUrl = getUrlParam("url");
      if (redirectUrl && redirectUrl !== "false") {
        btnGo.attr("href", redirectUrl).show();
      } else {
        btnDisabled.show();
      }
      btnWait.hide();
    }
  }, 1000);
});
</script>



<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
  const currentDomain = window.location.hostname;
  const excludedDomains = [
    'facebook.com',
    'youtube.com',
    'twitter.com',
    'linkedin.com',
    'Google.com',
    'wa.me'
  ];

  $("a[href]").each(function() {
    const link = $(this);
    const href = link.attr("href");

    // استثناء الرابط إذا كان لا يبدأ بـ http
    if (!href || !href.startsWith("http")) return;

    // استثناء الروابط التي تحتوي على كلاس no-redirect
    if (link.hasClass("no-redirect")) return;

    const linkDomain = (new URL(href)).hostname;

    // استثناء الروابط الداخلية
    if (linkDomain === currentDomain) return;

    // استثناء الدومينات المحددة
    const isExcluded = excludedDomains.some(domain => linkDomain.includes(domain));
    if (isExcluded) return;

    // تحويل الرابط إلى صفحة العداد مع تمرير الرابط الأصلي
    const countdownPage = "/p/redirect.html"; // غيّر المسار حسب مكان صفحة العداد
    const encodedUrl = encodeURIComponent(href);
    link.attr("href", countdownPage + "?url=" + encodedUrl);
  });
});
</script>
  

تعديلات الإضافة

القيمة	المدخل	الوصف
countdownPage	رابط الصفحة	صفحة تحويل الروابط الخارجية
totalSeconds	وقت العداد	عدد الثواني التي سيستغرقها العداد التنازلي
currentDomain	الروابط المستثناة	الروابط التي يجب استثناؤها من تشغيل العداد

الخاتمة

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

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