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>



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



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



<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'/>

 



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



<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>

  

    



4. 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.



    <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>

    



5. Here is the Html of Generator Panel



    <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>

    



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



   <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>  

    



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



    @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}