إضافة صفحة إختصار الروابط + سكربت إختصار اوتوماتيكي

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

ضع الكود التالي فوق ال </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

ضع الكود التالي في صفحة الاختصار

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

كود إختصار الروابط الاوتوماتيكي

<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 إذا اردت زر الاختصار يوجه لخارج الموقع
• waitTime ضع مدة الانتظار