How to Create Safelink in any Blogger Template

K K UPGRADER

How to Create Safelink in any Blogger Template

What is Safelink Crypto?

It's basically method to encode your URL's or Links to unreadable form by human only browser can read that .

How does it basically work in Blogger Templates?

Firstly it fetches posts data from blog then Encode your Link by Crypto-Js and put it in any random post url as parameter. And when we open that encoded link then it gets decoded via crypto-Js and you may have to wait for certain time as per timer set in that template and You will get your original Encrypted Link.


How to Install it on Any Blogger Blog?

  1. Firstly , Insert this main Cryto-Js Script just above</body>

  2. 
        <script type="text/javascript" defer="" async="" src="https://cdn.jsdelivr.net/gh/KKUPGRADER/blogger@js/safelink/crypto-js.js"/>
        

  3. Now Install jQuery , timer and essential javascript with only work with jQuery. Paste Below Scipts just above (Ignore jQuery if already installed on template.)

  4. 
    <script defer="" async="" src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>
    
     <script defer="" async="" src='https://cdn.jsdelivr.net/gh/KKUPGRADER/blogger@js/safelink/timer.js'/>
    
     <script defer="" async="" src='https://cdn.jsdelivr.net/gh/KKUPGRADER/blogger@js/safelink/safeclip.js'/>
    
     
    

  5. Now Insert this script too as Cdn script or locally written .This Script gives Functionality to Link Generator

  6. 
    <b:if cond='data:view.isHomepage'>
    
    
        <script type="text/javascript" defer="" async="" src="https://cdn.jsdelivr.net/gh/KKUPGRADER/blogger@js/safelink/generator.js"/>
    </b:if>
        

    
    
        <b:if cond='data:view.isHomepage'>
    
    <script type='text/javascript'>
    
    //<![CDATA[
    
    $(document).ready(function(){$("#btngenerate").on("click",function(){var e=$("#generateurl").val(),r=$("#generatelink"),a=$("#generateloading"),n=$("#resulturl");if(""==e)return $("#generateurl").focus(),!1;$("#copytoclipboard").html("<span class='fa fa-floppy-o'></span> Copy URL"),a.removeClass("hidden"),r.addClass("hidden"),$.ajax({url:"/feeds/posts/summary?alt=json-in-script",type:"get",dataType:"jsonp",success:function(t){var o="",l=t.feed.entry,s=new Array;if(void 0!==l){for(var i=0;i<l.length;i++){for(var d=0;d<l[i].link.length;d++)if("alternate"==l[i].link[d].rel){o=l[i].link[d].href;break}s[i]=o;var c=Math.random()*s.length;c=parseInt(c)}resultgenerate=s[c]+"#?o="+aesCrypto.encrypt(convertstr(e),convertstr("root")),a.addClass("hidden"),r.removeClass("hidden"),n.val(resultgenerate)}else n.val("No result!")},error:function(){n.val("Error loading feed!")}})}),new ClipboardJS(".copytoclipboard").on("success",function(e){$("#copytoclipboard").html("<span class='fa fa-check'></span> Link Copied to Clipboard")})});
    
    //]]>
    
    </script>
    
    </b:if>
    
      
    
        

  7. Now Insert this last script too either as Cdn or locally written.This Script help to decode the encrypted link and give finaly decoded link.

  8. 
    
        <b:if cond='data:view.isPost'>
    
        <script type="text/javascript" defer="" async="" src="https://cdn.jsdelivr.net/gh/KKUPGRADER/blogger@js/safelink/get-link.js"/>
    
    </b:if>
    
        

    
    
        
    
    <b:if cond='data:view.isPost'>
    
    <script type='text/javascript'>
    
    //<![CDATA[
    
    $(document).ready(function(){$.urlParam=function(o){var n=new RegExp("[?&]"+o+"=([^&#]*)").exec(window.location.href);return null==n?null:decodeURI(n[1])||0};var getlink=$("#getlink"),gotolink=$("#gotolink"),timer=$("#timer");function gotolinkcountdown(){var o=3;gotolink.removeClass("hidden");var n=setInterval(function(){var e=o-=1;gotolink.html('<span class="fa fa-cog fa-spin"></span> Please Wait...'),e<0&&(clearInterval(n),gotolink.prop("disabled",!1),gotolink.html('<span class="fa fa-check"></span> Go to Link'))},1e3)}null!=$.urlParam("o")&&timer.pietimer({timerSeconds:10,color:"#03a9f4",fill:!1,showPercentage:!0,callback:function(){getlink.prop("disabled",!1),getlink.removeClass("hidden"),timer.addClass("hidden")}});var request=!1;getlink.click(function(){0==request&&(gotolinkcountdown(),request=!0),$("html, body").animate({scrollTop:eval(gotolink.offset().top-10)},500)}),gotolink.on("click",function(){var o=aesCrypto.decrypt(convertstr($.urlParam("o")),convertstr("root"));window.location.href=o}),fuckAdBlock.on(!0,function(){$("#adbs").html("Adblock Detected"),$("#adb").removeClass("hidden")}).on(!1,function(){})});
    
    //]]>
    
    </script>
    
    </b:if>
    
        

  9. Here is the Html of Generator Panel

  10. 
    
        <b:if cond='data:view.isHomepage'>
    
    <div class='panel panel-primary'>
    
       <div class='panel-heading'>
    
          <div class='panel-title text-center'>
    
             <h2><span aria-hidden='true' class='spinner-grow' role='status'/>
    
                Generate Link
    
             </h2>
    
          </div>
    
       </div>
    
       <div class='panel-body'>
    
          <div class='form-group'>
    
             <div class='input-group'>
    
                <input class='form-control' id='generateurl' oninvalid='this.setCustomValidity(&apos;Please Enter valid link&apos;)' placeholder='Enter your link here...' required='required' type='url'/>
    
                <span class='input-group-btn'>
    
                <button class='btn btn-primary primary-color primary-color-border' id='btngenerate' oninvalid='this.setCustomValidity(&apos;Please Enter valid link&apos;)' required='required' type='button'>
    
                  <i aria-hidden='true' class='fa fa-shield fa-fw'/> Generate
    
                </button>
    
                </span>
    
             </div>
    
          </div>
    
          <div class='hidden text-center' id='generateloading'><i class='fa fa-cog fa-spin'/></div>
    
          <div class='hidden' id='generatelink'>
    
             <div class='form-group has-success'>
    
                <div class='input-group'>
    
                   <input class='form-control' id='resulturl' onclick='this.focus();this.select()' readonly='readonly' type='text'/>
    
                </div>
    
                <br/>
    
                <div class='text-center'>
    
                   <button class='copytoclipboard btn-sm btn btn-success' data-clipboard-action='copy' data-clipboard-target='#resulturl' id='copytoclipboard'><span class='fa fa-floppy-o'/> Copy URL</button>
    
                </div>
    
             </div>
    
          </div>
    
       </div>
    
    </div>
    
    </b:if>
    
        

  11. There is the Html code for Go to Link and Get Link button

  12. 
    
       <div id="timer"></div>
    
    <div class="text-center">
    
    <button id='getlink' class='btn bt-success hidden' disabled=''>Get Link</button>
    
    <!-- K K UPGRADER-->
    
    </div> 
    
        

    
    
      <div class="text-center">
    
    <button id='gotolink' class='btn bt-success hidden' disabled=''>Go to Link</button>
    
    <div style='margin:auto;display:inline-block'>
    
    <!-- K K UPGRADER-->
    
    </div>
    
    </div>  
    
        

  13. Finally here is the Css for all These.Add it just above to </b:skin>

  14. 
    
        @keyframes square{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{-webkit-transform:translateY(-700px) rotate(600deg);transform:translateY(-700px) rotate(600deg)}}
    
    @keyframes spinner-grow{0%{-webkit-transform:scale(0);transform:scale(0)}50%{opacity:1}}
    
    @keyframes fadeInDown{from{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}
    
    .spinner-border{display:inline-block;width:1.2rem;height:1.2rem;vertical-align:text-bottom;border:.25em solid #fff;border-right-color:transparent;border-radius:50%;animation:spinner-border 1s linear infinite}.spinner-grow{display:inline-block;width:.7rem;height:.7rem;vertical-align:text-bottom;background-color:#fff;border-radius:99em;opacity:0;animation:spinner-grow 1s linear infinite;margin:0 4px 7px 0}
    .panel.panel-primary{background:#ccf0ff;text-align:center;display:table;overflow:hidden;width:100%;max-width:970px;padding:0 0 25px 0;border-radius:5px;margin:25px auto;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24)}.panel-body{position:relative;margin:0 25px}.panel-heading h2{background:#39a811;color:#fff;margin:0 auto 25px auto;font-weight:400;padding:15px;font-size:20px}.panel-body input{background:#ffffff;width:100%;padding:15px;border-radius:5px;border:1px solid transparent;font-size:16px;color:#000;outline:none;text-indent:60px;transition:all .3s}.panel-body input:focus{background:#fff;color:#000;border-color:#04b0db;outline:none;box-shadow:0 0 5px rgba(0,0,0,0.1)}.panel-body .input-group-btn{position:absolute;top:0;right:0}.panel-body button{border-radius:0 5px 5px 0;background:#04b0db;color:#fff;border:0;padding:17px 52px;font-weight:500;outline:none;transition:all .3s}.panel-body button:hover,.panel-body button:focus{background:#00ad0c;outline:none}#generatelink{margin:20px auto 0 auto}#generatelink button{background:#01a3a4;border-radius:5px;font-size:14px;padding:14px 32px}#generatelink button:hover,#generatelink button:focus{background:#028889;border-radius:5px;font-size:14px}#generatelink button .fa.fa-floppy-o,#generatelink button .fa.fa-check{margin:0 5px 0 0}.panel-body:before{content:'\f0c1';font-family:fontawesome;position:absolute;left:0;top:0;background:rgba(0,0,0,0.05);color:#aaa;padding:12px 20px;border-radius:5px 0 0 5px;border-right:1px solid transparent;transition:all .6s}.panel-body:active:before,.panel-body:focus-within:before{content:'\f061';background:#17aed4;color:#fff}#generatelink input{background:#ffeaa7;text-indent:0}#generatelink input:hover,#generatelink input:focus{background:#ffeaa7;border-color:transparent;box-shadow:none}#generateloading{margin:20px auto 0 auto;font-size:20px;color:#f39c12;font-weight:normal}
    .panel-body .input-group-btn{display:block;position:relative;overflow:hidden;margin:20px auto 0 auto}.panel-body button{border-radius:5px;width:100%}
    #timer{margin:0 auto 20px auto;width:80px;text-align:center}.pietimer{position:relative;font-size:200px;width:1em;height:1em}.pietimer > .percent{position:absolute;top:25px;left:12px;width:3.33em;font-size:18px;text-align:center;display:none}.pietimer > .slice{position:absolute;width:1em;height:1em;clip:rect(0px,1em,1em,0.5em)}.pietimer >.slice.gt50{clip:rect(auto,auto,auto,auto)}.pietimer > .slice > .pie{border:0.06em solid #c0c0c0;position:absolute;width:1em;height:1em;clip:rect(0em,0.5em,1em,0em);border-radius:0.5em}.pietimer > .slice > .pie.fill{-moz-transform:rotate(180deg)!important;-webkit-transform:rotate(180deg)!important;-o-transform:rotate(180deg)!important;transform:rotate(180deg)!important}.pietimer.fill > .percent{display:none}.pietimer.fill > .slice > .pie{border:transparent;background-color:#c0c0c0;width:1em;height:1em}
    
    /* Button */
    
    .text-center{text-align:center}.text-center button{margin:0 auto 20px auto;border-radius:5px;text-align:center;padding:12px 22px;box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);transition:all 0.3s cubic-bezier(.25,.8,.25,1)}.text-center button:hover,.text-center button:active,.text-center button:focus{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24)}.text-center button span{margin:0 5px 0 0}
    
    .panel-body{background:#fff;margin:0 auto;padding:25px;border-top:1px solid rgba(0,0,0,0.05)}
    
    .panel-body:before{display:none}
    
    .panel-heading h2{background:#fff;color:#222;margin:0 auto;font-weight:400;padding:15px;font-size:20px;text-align:center}
        

You may like these posts


12 Comments

  1. R Z Technical
    Nice working Bro
    • K K UPGRADER
      Glad to know 🙌
  2. Prashant Kumar
    Nice bro this article is very helpfull for me thankyou so much
  3. Thái Hồng Lâm
    put me a friend link, i booked it for you

    link: https://www.honglamblog.xyz/
    name: Hong Lam Blog
    • Kanak
      added
  4. MD: Ashikur Rahman
    where to put no5 and 6 code?
    • MD: Ashikur Rahman
      i have put this code on template editor before <*/head>
      and it's showing error
    • MD: Ashikur Rahman
      i got trouble with 5 number code. here is my blog that i tried to work with.
      https://kkupgrader-tip.blogspot.com/

      Generate Link options are showing. but link weren't generating. please help.
    • K K UPGRADER
      you mean links are generating,but not fetching on Post Pages??
    • MD: Ashikur Rahman
      the problem solved. but if i apply to default blogger them then it works perfectly.

      But if i install this template: https://www.templatesyard.com/2020/11/eventify-blogger-template.html
      then it create problems like. on footer and on post page (Get Link and Go To Link button) always show. even if i try to visit simply my blogsite homepage. i don't understand whats causing this.
  5. K K UPGRADER
    try adding this css

    .hide,.hidden{display:none}
  6. K K UPGRADER
    try adding this css

    .hide,.hidden{display:none}
Please provide your comments related to the above Content , comment politely and leave no spam. Thank you