Cara Membuat Safelink Diblog Utama ( Random Artikel )
Safelink yang saya bagikan kali ini sangat sederhana dan tidak berbelit - belit sehingga visitor website kita pun tidak kabur karna sebelum dialihkan pada link tujuan berikutnya dengan hitungan detik maka muncul lah tombol untuk pergi ke halaman yang dituju
Cara Membuat Safelink Diblog Utama Random Artikel
- Pastikan blog kamu sudah tepasang JQueri jika belum maka sebaiknya memasang nya karna kalau tidak memasang nya maka safelink tidak akan berjalan dengan baik, silahkan cari kode ini </head> dan pastekan kode di bawah ini tepat di bawahnya
<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/> - Selanjutnya pastekan kode CSS dibawah ini diatas kode ]]></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} - Selanjutnya kita akan memasang tombol icon safelink nya disini saya memasang nya pada menu navigasi
<li class='break'>
<a class='link wcSafeShow' href='javascript:void' itemprop='url'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><path d='M179.38391,179.442a5.02556,5.02556,0,0,0,7.5831.5436l3.01715- 3.02a5.031,5.031,0,0,0-7.11042-7.1173l-1.72983,1.72145' transform='translate(-169.39568 -166.4353)'></path><path d='M183.40745,177.42863a5.02556,5.02556,0,0,0-7.5831-.5436l-3.01715,3.02a5.031,5.031,0,0,0,7.11042,7.1173l1.71976-1.72145' transform='translate(-169.39568 -166.4353)'></path></g></svg>
<span class='name' itemprop='name' title='safelink converter'>Safelink Converter</span>
</a>
</li>Maka hasilnya akan seperti diblog ini VICADZGN.MY.ID - Jika kamu menggunakan template MEDIAN UI 1.6 silahkan cari kode berikut ini <!--[ Mobile additional menu(only shown in mobile view) ]--> dan pastekan pada submenu kamu seperti di bawah ini
</li>
.........................
<li class='br'>
<a class='a wcSafeShow' for='wcSafeShow' itemprop='url'>
<svg class='line' viewBox='0 0 24 24'><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'></path><polyline points='5.8859 9.8748 7.7779 11.7698 11.6759 7.8698'></polyline></g></svg>
<span class='n' itemprop='name'>Safelink</span>
</a>
</li>
..........................
</li>Maka hasilnya akan seperti diblog ini ARSADPEDIA.COM - Selanjut nya kita akan memasang tombol GET LINK silahkan kamu cari kode berikut <data:post.body/> dan pastekan kode dibawah ini tepat diatas nya
<!-- 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 silahkan kamu cari kode <foter karena setiap template class nya berbeda - beda Untuk pengguna template MEDIAN UI silahkan cari kode ini <!--[ Footer section ]--> dan letakan kode dibawah ini tepat di atas kede ini
<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('Please Enter valid link')' placeholder='Enter your link here...' required='required' type='url'/>
<span class='input-group-btn'>
<button class='btn-primary' id='btngenerate' oninvalid='this.setCustomValidity('Please Enter valid link')' 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> - Terakhir silahkan kamu cari kode ini </body> dan pastekan kode dibawah ini tepat di atas kode tersebut
<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> - Selesai
Demikianlah artikel kali ini semoga bermanfaat untuk dan jika masih bingun dalam penerapan nya silahkan tinggalkan komentar kamu dan saya akan membantu sebisa saya sekian dari saya sampai bertemu di atikel berikutnya see you.
Referensi:
www.wendycode.com
Posting Komentar untuk "Cara Membuat Safelink Diblog Utama ( Random Artikel )"