Ads are pain !! But this is only way to manage server cost. Join Group!

Add a Link Shortening Page v3 + an Automatic Shortening Script

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

 




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>



Telegram

CONCLUSION

In this article, I shared with you Add a Link Shortening Page v3 + an Automatic Shortening Script. I hope you have liked It. Please do share it with your friends and follow our blog for more.

If you face any problems in Demo, Download or have any questions so feel free to ask me in comments section or join our Telegram Channel to get the lastest posts updates daily.

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken.



©Copyright: Jirale.com™
Jirale offers expert insights on technology, gadgets, software, and more. Explore our articles to stay ahead in the fast-paced world of tech.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.