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

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

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

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

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

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

تصميم بسيط وفعال

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

العداد التنازلي: حيلة لزيادة التفاعل

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

مساحات إعلانية لتحقيق دخل مادي

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

تخصيص الصفحة: تجنب مشكلات جوجل

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

حماية الروابط المهمة

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

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

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

<div class="safeBox"></div>

الخطوة 2: قم بالدخول الي المظهر ثم الزر بجانب تخصيص اختر تعديل html. الآن أبحث عن </head> وضع الكود التالي فوقه مباشره.

<b:if cond='data:view.isPage'>
	<style type="text/css">
  /*<![CDATA[*/     
      :root{
        --main-color: #f44336; /* اللون الاساسي */
        --separator: #e8e8e8; /* لون الحواف*/
        --txtColor: #27272a; /*  لون الخطوط*/
        --PColor: #666666; /* لون خط خانة اختصار الرابط   */
      }
    @keyframes slide-in{from{opacity:0;transform:translate(300px,0)}to{opacity:1;transform:translate(0,0)}}
    .notifBadge{display:flex;background:#161617;padding:10px 20px;margin:0 auto;border-radius:3px;color:#ffffff;font-size:15px;line-height:20px;white-space:nowrap;pointer-events:auto;overflow:hidden;position:fixed;bottom:25px;right:20px;transition:all 0.3s ease-in-out;z-index:99999999;cursor:pointer;width:fit-content;justify-content:center;align-items:center;flex-direction:row-reverse;animation:slide-in 1s ease-in-out forwards;-webkit-animation:slide-in 1s ease-in-out forwards}
    .safeBox{margin:1rem 0}
    .safeBox .inner{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px}
    .safeBox  .countdown{font-size:4rem;font-family:fantasy;user-select:none}
    .safeBox .Progress{-webkit-border-radius:0.5rem;-moz-border-radius:0.5rem;border-radius:0.5rem;margin:0.8rem auto;height:40px;line-height:40px;overflow:hidden;padding:5px;border:1px solid var(--separator);position:relative;width:100%}
    .safeBox .Progress .line{display:block;width:0;background:var(--main-color);height:100%;transition:all 0.3s ease-in-out;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;opacity:.1}
    .safeBox .Progress .text{color:var(--main-color);margin:10px auto;font-size:12px;display:block;position:relative;top:-45px;font-weight:700;text-align:center;user-select:none}
    .safeBox .Result a{font-size:1em;background:var(--main-color);display:flex;position:relative;padding:10px 45px 10px 15px;border-radius:5px!important;color:#fff!important;text-decoration:none!important;align-items:center;transition:all 0.3s ease-in-out;justify-content:space-between}
    .safeBox .Result a svg{position:absolute;fill:none;stroke:currentColor;stroke-width:2;right:15px;width:20px;height:20px}
    .safeBox .Result{display:flex;align-items:center;justify-content:center}
    .safeBox .Result a:hover{transform:scale(1.1);opacity:.8}
    .safeBox .input-field{float:none;position:relative;margin-top:1rem;width:100%}
    .safeBox .input-field input{font-size:15px;font-family:inherit;color:var(--txtColor);padding:1rem;display:block;width:100%;box-sizing:border-box;border:none;background:rgba(0,0,0,.05);border-radius:7px}
    .safeBox .input-field .highlight{position:absolute;height:50%;width:100px;top:25%;right:0;pointer-events:none;opacity:.5}
    .safeBox .input-field .bar{position:relative;display:block;width:100%}
    .safeBox .input-field input:focus,.safeBox .input-field textarea:focus{outline:none}
    .safeBox .input-field input:focus~.highlight,.safeBox .input-field textarea:focus~.highlight{}
    .safeBox .input-field .bar:after,.safeBox .input-field .bar:before{content:'';height:2px;width:0;bottom:1px;position:absolute;background:var(--main-color);transition:.2s ease all}
    .safeBox .input-field .bar:before{left:50%}
    .safeBox .input-field .bar:after{right:50%}
    .safeBox .input-field input:focus~.bar:before,.safeBox .input-field input:focus~.bar:after,.safeBox .input-field textarea:focus~.bar:before,.safeBox .input-field textarea:focus~.bar:after{width:50%}
    .safeBox .input-field label{color:var(--PColor);font-size:1rem;font-weight:400;position:absolute;pointer-events:none;right:15px;top:12px;transition:all 0.2s ease-in-out}
    .safeBox .input-field input:focus~label,.safeBox .input-field input:valid~label,.safeBox .input-field textarea:focus~label,.safeBox .input-field textarea:valid~label{top:-32px;color:var(--txtColor)}
    .safeBox  .actions{display:flex;margin:0 auto;column-gap:10px}
    .safeBox  .actions button{font-size:1em;background:var(--main-color);display:flex;position:relative;padding:10px 45px 10px 15px;border-radius:5px!important;color:#fff!important;transition:all 0.3s ease-in-out;text-decoration:none!important;align-items:center;justify-content:space-between;border:0;cursor:pointer;font-family:inherit}
    .safeBox  .actions button svg{position:absolute;fill:none;stroke:currentColor;stroke-width:2;right:15px;width:20px;height:20px}
    .safeBox  .actions button:hover{transform:scale(1.1);opacity:.8}
    .safeBox .actions.f .copy{display:none}
      /*]]>*/
  </style>
</b:if>

الخطوة 3: سنقوم بالبحث عن كود </body> واعلاه مباشره قم بإضافة الكود التالي.

<b:if cond='data:view.isPage'>
<script type="text/javascript">
//<![CDATA[
  let linkTarget = true, // زر يوجه الى خارج الموقع
      waitTime = 30,// عدد ثواني الانتظار
      textApp = {
        waiting : 'جاري تجهيز الرابط',
        success : 'تم تجهيز الرابط',
        error : 'رابط معطل',
        noLink : 'لم تضيف رابط"',
        copyLink : 'تم النسخ',
        copyToClipboard : 'نسخ الرابط',
        convert : 'تحويل الرابط',
        putYourLink : 'ضع الرابط الخاص بك',
        clickHere : 'إضغط هنا',
      },
      interval = 0,
      currentTime = 0,
      safeBox = document.querySelector(".safeBox");
function notif(e){var t=document.createElement("div");t.className="notifBadge",t.innerHTML=e,document.body.appendChild(t),setTimeout(function(){t.style.bottom="-200px",t.style.opacity="0",t.style.visibility="hidden",document.body.removeChild(t)},3e3)}function decode(e){let t="";for(let n=0;n<e.length;n+=2){let a=e.substr(n,2),l=parseInt(a,16);t+=String.fromCharCode(l)}return t}function encode(e){let t="";for(let n=0;n<e.length;n++){let a=e.charCodeAt(n);t+=a.toString(16)}return t}function GetUrlParams(){var e=new URLSearchParams(window.location.search),t=e.get("url");return t||(t=e.get("?url")),t}GetUrlParams()&&(localStorage.setItem("safeLink",GetUrlParams()),history.replaceState(null,"",""+window.location.pathname)),document.addEventListener("DOMContentLoaded",function(){if(safeBox){function e(e){currentTime=interval?0:currentTime,interval=window.setInterval(function(){var t=waitTime-currentTime;e.querySelector(".countdown strong").textContent=t,0<=waitTime-currentTime&&(progressBarWidth=currentTime/waitTime*100,e.querySelector(".Progress .line").style.width=progressBarWidth+"%"),++currentTime>waitTime&&(clearInterval(interval),interval="Done",e.querySelector(".Progress .text").textContent=textApp.success,e.querySelector(".Result").innerHTML=`<a class="btn" href="${decode(localStorage.safeLink)}" ${linkTarget?'target="_blank"':""}>${textApp.clickHere} <svg viewBox="0 0 24 24"><path d="M9 13a5 5 0 0 0 8 1l4-4a1 1 0 0 0-7-7l-2 2m3 6a5 5 0 0 0-8-1l-4 4a1 1 0 0 0 7 7l2-2"></path></svg></a>`,localStorage.removeItem("safeLink"))},1e3)}localStorage.safeLink?(safeBox.innerHTML=`<div class="inner"><div class="countdown"><strong>${waitTime}</strong></div><div class="Progress"><span class="line"></span><span class="text">${textApp.waiting}</span></div><div class="Result"></div></div>`,document.addEventListener("visibilitychange",function t(){"Done"==interval||(document.hidden?(clearInterval(interval),interval=null):interval||e(safeBox))}),e(safeBox)):(safeBox.innerHTML=`<div class="inner"><div class="input-field"><input id="inputURL" type="url" required=''  value=""><span class="highlight"></span><span class="bar"></span><label>${textApp.putYourLink}</label></div><div class="actions f"><button class="convert" aria-label="Conver The link" type="button"><svg viewBox="0 0 24 24"><path d="M14 7h3a1 1 0 0 1 0 10h-3m-4 0H7A1 1 0 0 1 7 7h3m-2 5h8"></path></svg><span>${textApp.convert}</span></button><button class="copy" aria-label="copy The link" type="button"><svg viewBox="0 0 24 24"><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path><rect width="13" height="13" x="9" y="9" rx="2"></rect></svg><span>${textApp.copyToClipboard}</span></button></div></div>`,safeBox.querySelector(".convert").addEventListener("click",e=>{let t=safeBox.querySelector("#inputURL")??null;t?.value.length?(safeBox.querySelector(".actions")?.classList.remove("f"),t.value=window.location.href+"?url="+encode(t.value)):notif(textApp.noLink)}),safeBox.querySelector(".copy").addEventListener("click",e=>{var t=document.createElement("textarea");t.value=safeBox.querySelector("#inputURL").value,document.body.appendChild(t),t.select(),document.execCommand("Copy"),t.remove(),notif(textApp.copyLink)}))}});
  /*]]>*/</script>
</b:if>

الخطوة 4: بتوفيق من الله عز وجل سنقوم بإضافة كود الإختصار التالي اسفل الكود السابق حيث سيكون أيضاً أعلي كود </body> .

<script type='text/javascript'>/*<![CDATA[*/
let pathUrl = '/p/safe.html', // رابط الصفحة 
	targetLink = false, // اختصار روابط الخارجية فقط
	protectedLinks = ['facebook.com', 'twitter.com', 'google.com','youtube.com'], // هنا ضع الروابط التي لا تريد إختصارها
	exception = ['javascript:;', '#', '/', 'javascript(0);', 'javascript:window.print()','https://','http://'];
function encode(e){let t="";for(let r=0;r<e.length;r++){let l=e.charCodeAt(r);t+=l.toString(16)}return t}document.addEventListener("DOMContentLoaded",function(){let e=targetLink?document.querySelectorAll('a[target="_blank"]'):document.querySelectorAll("a"),t=[];e.forEach((e,r)=>{let l=e.href;if(e.getAttribute("href")&&!protectedLinks.some(e=>l.includes(e))&&!l.includes(window.location.hostname)&&!exception.some(e=>l===e)){let a=encode(l);e.removeAttribute("href"),e.setAttribute("data-safe",r),e.setAttribute("target","_blank"),e.href=pathUrl,t.push(a)}}),document.querySelectorAll("a[data-safe]").forEach((e,r)=>{e.onclick=()=>{localStorage.setItem("safeLink",t[r])}})});
/*]]>*/</script>

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

pathUrl: ضع فيه رابط الصفحة. 

targetLink: لإختصار الروابط الخارجية true.

protectedLinks: أضف الروابط التي لا تود إختصارها.

linktarget: ضعها true لتوجية الروابط خارج الموقع.

waittaime: ضع فيها عدد دقائق الإنتظار.

الأسئلة الشائعة

1. ما هي صفحة تحويل الروابط الخارجية لمدونات بلوجر؟

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

2. هل يمكنني تخصيص صفحة توجيه الروابط؟

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

3. هل يمكنني حماية بعض الروابط من التحويل التلقائي؟

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

4. كيف يساعد العداد التنازلي في تحسين أداء المدونة؟

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

5. هل يمكنني استخدام صفحة توجيه الروابط لتحقيق دخل مادي؟

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

الخاتمة

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

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