Welcome to the Abdo Technology blog . In this article, we will take you step by step on how to add a page to shorten links on Blogger blogs and a built-in script to shorten all blog links automatically.
Preview the add-on
Explanation video
Codes
Place the following code above the </head
<b:if cond='data:view.isPage'>
<style type='text/css'>
/*<![CDATA[*/
:root{
--main-color: #f44336; /* Primary colour */
--separator: #e8e8e8; /* Edge color*/
--txtColor: #27272a; /* Font color*/
--PColor: #666666; /* The font color of the link shortcut box */
}
@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>Place the following code above the </body
Place the following code on the shortcut page
<div class="safeBox"></div>Automatic link shortening code
<script type='text/javascript'>/*<![CDATA[*/
<!-- Web.jirale.com -->
let pathUrl = '/p/safe.html', // page link
targetLink = false, // Shorten external links only
protectedLinks = ['facebook.com', 'twitter.com', 'google.com','youtube.com'], // Here put the links that you do not want to shorten
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])}})});
<!-- web.jirale.com -->
/*]]>*/</script>