Tutorial Membuat Safelink di Blog

 Safelink adalah website bertujuan untuk mengarahkan pengunjung ke suatu halaman tertentu sebelum di alihkan pada link tuju

Jika Kalian Ingin Membuat Safelink Kalian Bisa Lihat Tutorial Dibawah Ini

Cara Membuat Safelink Di Web Blog

Pastikan template kalian sudah Memakai script JQuery, jika belum Memakai JQuery Kalian Bisa Copy Code Script Dibawah Ini Dan Tempelkan Diantara Tag  </head>atau </head>

 .wcSafeShow{position:relative;width:35px;height:35px;display:flex;margin:auto} .safeWrap{position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.5);z-index:999999;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.panel-primary{background:#fff;text-align:center;display:block;overflow:hidden;width:100%;max-width:80%;padding:0 0 25px 0;border-radius:5px;margin:15% 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:#102767;color:#fff;margin:0 auto 25px auto;font-weight:400;padding:15px;font-size:20px}.panel-body input{background:rgba(0,0,0,0.04);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:#102767;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:#102767;color:#fff;border:0;padding:17px 52px;font-weight:500;outline:none;transition:all .3s}.panel-body button:hover,.panel-body button:focus{background:#102767;outline:none}#generatelink{margin:20px auto 0 auto}#generatelink button{background:#102767;border-radius:5px;font-size:14px;padding:14px 32px}#generatelink button:hover,#generatelink button:focus{background:#102767;border-radius:5px;font-size:14px}#generatelink input{background:rgba(0,0,0,0.05);text-indent:0}#generatelink input:hover,#generatelink input:focus{background:#102767;border-color:transparent;box-shadow:none}#generateloading{margin:20px auto 0 auto;font-size:20px;color:#102767;font-weight:normal}.panel-body:before{content:'\279C';background:rgba(0,0,0,0.05);position:absolute;left:0;top:0;color:#888;padding:17px 20px;border-radius:5px 0 0 5px;border-right:1px solid transparent;transition:all .6s}.panel-body:focus-within:before{content:'\279C';background:#102767;color:#fff}.bt-success{display:inline-flex;align-items:center;margin:15px 15px;padding:10px 20px;outline:0;border:0;border-radius:2px;color:#fefefe;background-color:#102767;font-size:14px;white-space:nowrap;overflow:hidden;max-width:100%;line-height:2em}.bt-success:hover{color:#102767;background-color:transparent;border:1px solid #102767}.hidden,.bt-success.hidden{display:none}.wcSafeClose{display:inline-flex;align-items:center;margin:15px auto -15px;padding:5px 15px;outline:0;border:0;border-radius:2px;color:#fefefe;background-color:#102767;font-size:14px;white-space:nowrap;overflow:hidden;max-width:100%;line-height:2em}.copytoclipboard{margin:10px auto 5px}#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}.wcSafeShow svg{fill:none!important;stroke:#48525c;stroke-linecap:round;stroke-linejoin:round;stroke-width:1;width:22px;height:22px}#generateloading svg{width:22px;height:22px;fill:#102767}.btn-primary svg,.darkMode .btn-primary svg{fill:none;stroke:#fff;stroke-width:1.5;width:22px;height:22px;vertical-align:-5px;margin-right:10px}@media screen and (max-width:768px){.panel-body .input-group-btn{display:block;position:relative;overflow:hidden;margin:20px auto 0 auto}.panel-body button{border-radius:5px;width:100%}}@media screen and (max-width:480px){.panel-primary{margin-top:30%}} .darkMode .panel-primary{background:#2d2d30;color:#fefefe}.darkMode .panel-body input,.darkMode .panel-body input:focus{background:#2d2d30;color:#fefefe}.darkMode .wcSafeClose{color:#fefefe}

Kemudian letakan kode safelinknya di tempat yang kalian inginkan.

Jika anda memakai template Median UI 1.5 silahkan salin kode dibawah ini dan letakan diatas kode <!--[ Search button ]-->tepat di bawah kode tombol dark mode

 

 <div class='wcSafeShow'><svg class='line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g transform='translate(3.500000, 2.000000)'><path d='M8.4845,19.6057 C10.8195,19.6057 16.1565,17.2837 16.1565,10.8787 C16.1565,4.4747 16.4345,3.9737 15.8195,3.3577 C15.2035,2.7417 11.9935,0.7507 8.4845,0.7507 C4.9755,0.7507 1.7655,2.7417 1.1505,3.3577 C0.5345,3.9737 0.8125,4.4747 0.8125,10.8787 C0.8125,17.2837 6.1505,19.6057 8.4845,19.6057 Z'/><polyline points='5.8859 9.8748 7.7779 11.7698 11.6759 7.8698'/></g></svg></div>

Selanjutnya kalian copy kode dibawah ini dan letakan kode ini tepat di atas tag <data:post.body/>

<div id='timer'/><div style='text-align: center'><button class='bt-success hidden' disabled='' id='wcGetLink'>Get Link</button></div><!-- letakkan di bawah kode <data:post.body/> --><div style='text-align: center'><button class='bt-success hidden' disabled='' id='gotolink'>Go to Link</button></div>

 Selanjutnya copy dan letakan kode di bagian tag <footer tapi setiap tag footer juga berbeda, tergantung bagaimana pembuat template membuatnya. intinya kalian cari saja tag footer seperti itu.

<div class='safeWrap hidden'><div class='panel-primary'><div class='panel-heading'><h2>Generate Link</h2></div><div class='panel-body'><input autocomplete='off' 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-primary' id='btngenerate' oninvalid='this.setCustomValidity(&apos;Please Enter valid link&apos;)' required='required' type='button'><svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M18.865 5.1238C19.302 5.2768 19.594 5.6888 19.594 6.1518V12.9248C19.594 14.8178 18.906 16.6248 17.691 18.0248C17.08 18.7298 16.307 19.2788 15.486 19.7228L11.928 21.6448L8.364 19.7218C7.542 19.2778 6.768 18.7298 6.156 18.0238C4.94 16.6238 4.25 14.8158 4.25 12.9208V6.1518C4.25 5.6888 4.542 5.2768 4.979 5.1238L11.561 2.8108C11.795 2.7288 12.05 2.7288 12.283 2.8108L18.865 5.1238Z'/><path class='svg-c' d='M9.32251 11.9177L11.2145 13.8107L15.1125 9.91269'/></svg>Generate</button></span><div class='hidden' id='generateloading'><svg viewBox='0 0 50 50' x='0px' y='0px'><path d='M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z'><animateTransform attributeName='transform' attributeType='xml' dur='0.6s' from='0 25 25' repeatCount='indefinite' to='360 25 25' type='rotate'/></path></svg></div><div class='hidden' id='generatelink'><input id='resulturl' onclick='this.focus();this.select()' readonly='readonly' type='text'/><button class='copytoclipboard' data-clipboard-action='copy' data-clipboard-target='#resulturl' id='copytoclipboard'>Copy URL</button></div></div><a class='wcSafeClose' href='javascript:void'>Close</a>

Kemudian yang terakhir salin kode di bawah ini dan letakan tepat diatas kode </body>

<script>//<![CDATA[var setTimer=10; //waktu detikvar setColor='#102767'; //warna loading timervar setText='Harap Tunggu...'; //pesan pada tombolvar setCopyUrl='Salin URL'; // generator salinvar setCopied='URL Tersalin'; //generator tersalin// global script version 1.1 open source codedocument.addEventListener ("DOMContentLoaded", globalscript);function globalscript(){let script=document.createElement('script');script.defer=true;script.src="https://cdn.jsdelivr.net/gh/choipanwendy/safelink-v1.1@main/wcsafelink.js";document.body.append(script)};//]]> </script>

Silahkan dicoba dan lihat hasilnya , semoga artikel ini bermanfaat.

*****TERIMA KASIH *****