Membuat Safelink DI Blog Utama (Random Post + Generator)

Safelink adalah situs web atau blog yang dibuat dengan tujuan untuk mengarahkan pengunjung ke suatu halaman tertentu sebelum di alihkan pada link tujuan, Namun beberapa diantaranya ada juga safelink yang harus melewati iklan sebelum di alihkan pada tujuan.

Namun, saya rasa hal itu akan sangat menggangu pengunjung. saya sendiri menggunakan safelink pada blog utama dengan tujuan untuk meningkatkan visitor saja, sehingga tidak begitu terganggu dengan banyaknya redirect pada beberapa iklan.

Safelink yang saya bagikan ini sangat simple, hanya untuk meningkatkan visitor saja. karna sebelum kita dialihkan pada link tujuan, kita akan melewati dulu 1 post artikel yang ada di blog kita dengan hitungan detik barulah muncul tombol untuk mengakses link tujuan. 

Hal ini bertujuan agar tidak begitu menggangu pengunjung karna banyaknya pengalihan sebelum mengakses link yang akan dituju. Untuk pemasangannya pada blog utama silahkan ikuti langkah-langkah di bawah ini.

Cara Membuat Safelink Di Blog Utama

Pastikan template kalian sudah ada script JQuery, jika belum silahkan salin code di bawah ini dan letakan code tsb tepat diatas code </head> atau &lt;!--</head>--&gt;&lt;/head&gt;

<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>

Selanjutnya salin kode CSS dibawah ini dan letakan pada penyimpanan code CSS di dalam template blog anda. atau letakan saja tepat diatas code ]]></b:skin>

/* CSS Safelink ubah warna cari kode #102767 */
.wcSafeShow{position:relative;width:35px;height:35px;display:flex;margin:auto} /* atur margin untuk mengubah posisi icon */
.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%}}
  
/* CSS darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.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 code generator safelink di tempat yang anda inginkan, seperti contoh saya meletakannya pada bagian header di samping kanan tombol dark mode

Jika anda pengguna 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 cari code <data:post.body/> biasanya code seperti itu ada lebih dari satu, tergantung pada template yang kalian gunakan. Namun diusahakan untuk penempatan kedua kode di bawah berada di dalam post.


<!-- letakkan di atas kode <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 salin dan letakan kode di bawah ini berada pada tag html footer seperti ini <footer setiap tag footer juga berbeda, tergantung bagaimana pembuat template membuatnya. intinya cari saja tag footer seperti itu.

Untuk pengguna template Median UI 1.5 silahkan letakan kode tsb tepat diatas code <!--[ Footer section ]-->

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

Kemudian yang terakhir salin kode di bawah dan letakan tepat diatas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; jika sudah, jangan lupa untuk save

Pada bagian yang saya tandai bisa kalian edit dan di sesuaikan dengan kebutuhan kalin

<script>
//<![CDATA[
/* Pengaturan safeLink */
var setTimer = 10; //waktu detik
var setColor = '#102767'; //warna loading timer
var setText = 'Harap Tunggu...'; //pesan pada tombol
var setCopyUrl = 'Salin URL'; // generator salin
var setCopied = 'URL Tersalin'; //generator tersalin

// global script version 1.1 open source code
document.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 hasilnya, semoga artikel ini bermanfaat. Dan jangan lupa untu share artikel ini, jika ada masalah ketika pemasangan safelink silahkan berkomentar.

Membuat Safelink DI Blog Utama (Random Post + Generator)

Jasa Pembuatan Website

50 % off

Ingin membuat website atau blog dengan harga murah? Dapatkan harga terbaik dari kami sekarang juga!

Dapatkan Sekarang