Dim light print
الصفحة الرئيسية
اضافات بلوجر

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

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

توجيه الروابط الخارجية بلوجر

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

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

يمكنك معاينة صفحة توجيه الروابط الخارجية علي موقعنا من خلال النقر على الرابط التالي:

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

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

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

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

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

    أولا ستذهب الي لوحة التحكم في بلوجر ثم تقوم بانشاء صفحة وإعطائها أي اسم وليكن: save-link ثم انسخ كود HTML التالي و لصقه في الصفحة :
    <div class="safeBox"></div>
    الخطوة الثانية قم بالدخول الي المظهر ثم الزر بجانب تخصيص اختر تعديل 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>
    الخطوة الثالثة سنقوم بالبحث عن كود </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>
    الخطوة الأخيرة بتوفيق من الله عز وجل سنقوم بإضافة كود الإختصار التالي اسفل الكود السابق حيث سيكون أيضاً أعلي كود </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: ضع فيها عدد دقائق الإنتظار

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

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

#اضافات بلوجر

إرسال تعليق

تعريف الارتباط
نحن نقدم ملفات تعريف الارتباط علي هذا الموقع لتحليل حركة المرور ولتحسين تجربة التصفح.
More Details
انقطع الانترنت!
معذرة، جهازك غير متصل بالإنترنت. يرجى فحص الشبكة وإعادة الإتصال بالإنترنت لبدء التصفح مرة أخرى.
مانع الاعلانات!
لقد تم اكتشاف استخدامك لإضافة مانع الإعلانات في متصفحك، إيراداتنا من الإعلانات تساهم في تشغيل هذا الموقع،
نرجو منك تعطيل مانع الإعلانات لموقعنا.
Site is Blocked
Sorry! This site is not available in your country.