Hallo semuanya selamat datang di blog Ruls z, Kali ini saya akan membagikan cara membuat safelink di blog utama dengan random post dan generator
Sudah banyak sekali yang membagikan tutorial buat safelink di blog utama yang dimana mereka mengencript url di blog sehingga ketika kita berpindah halaman maka kita harus melewati safelink terlebih dahulu.
Yang dimana menurut saya safelink seperti begitu terlalu berlebihan, yang dimana pengunjung harus melewati safelink setiap berpindah halaman atau membuka postingan lainnya, yang pasti pengunjung merasa tidak nyaman dan malas membuka blog kita lagi.
Dan juga untuk template safelink yang banyak beredar di internet mau itu gratisan atau yang berbayar masih ada kekurangan, yaitu bisa terkena invalid trafik dari Google Adsense
Berbeda dengan safelink yang Kami bagikan sekarang, karna safelink ini tidak otomatis mengscript url, jadi kita harus harus manual menggunakan generator yang akan otomatis random post.
Kalian tidak perlu membuat halaman baru seperti di safelink yang beredar di internet, karna safelink ini sudah otomatis mengacak postingan di blog kalian.
Membuat Safelink Di Blog Utama Dengan Random Post + Generator
sebelum memulai alangkah baiknya membackup template kalian terlebih dahulu untuk menghindari hal - hal yang tidak di inginkan.
Disini pastikan terlebih dahulu apakah di template kalian sudah terpasang jQuery jika belum terpasang silahkan salin kode di bawah ini dan letakkan di atas kode </head> atau <!--</head>--></head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
Kemudian lanjut salin css dibawah dan kalian letakkan di atas kode ]]></b:skin>
/* CSS Safelink ubah warna cari kode #f89000 */ .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:#f89000;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:#f89000;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:#f89000;color:#fff;border:0;padding:17px 52px;font-weight:500;outline:none;transition:all .3s}.panel-body button:hover,.panel-body button:focus{background:#f89000;outline:none}#generatelink{margin:20px auto 0 auto}#generatelink button{background:#f89000;border-radius:5px;font-size:14px;padding:14px 32px}#generatelink button:hover,#generatelink button:focus{background:#f89000;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:#f89000;border-color:transparent;box-shadow:none}#generateloading{margin:20px auto 0 auto;font-size:20px;color:#f89000;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:#f89000;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:#f89000;font-size:14px;white-space:nowrap;overflow:hidden;max-width:100%;line-height:2em}.bt-success:hover{color:#f89000;background-color:transparent;border:1px solid #f89000}.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:#f89000;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:#f89000} .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 kalian letakkan ikon safelink ini ketempat yang kalian mau, kalian bisa meletakkan di bagian header.
jika kalian menggunakan template median-ui v1.5 kalian bisa meletakkannya setelah kode<!--[ Profile button ]--> lewati kode </b:if> pertama.
<div class='wcSafeShow'><svg 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></div>
Lanjut kalian cari kode <data:post.body/> kalian bisa gunakan ctrl + f, bisanya kode ini ada lebih dari satu, tergantung template apa yang kalian gunakan coba kalian cari saja yang mengandung entry atau postEntry jika kalian tidak menemukan silah coba aja satu persatu, karna kalau kalian salah meletakkan kode ini maka safelink tidak akan berjalan, jika kalian menggunakan template median ui kode tersebut hanya ada satu.
Jika kalian sudah menemukan kode di atas silah ikuti langkah selanjutnya di bawah ini.
<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 kalian letakkan kode di bawah ini di atas kode footer, sebenar kalian bebas mau letakkan di mana saja asalkan masih di dalam tag body
<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>
Dan yang terakhir kalian salin javacript di bawah ini kemudian letakkan di atas kode </body> atau <!--</body>--></body> jika sudah semuanya jangan lupa kalian klik simpan.
<script> //<![CDATA[ /* Pengaturan safeLink */ var setTimer = 10; //waktu detik var setColor = '#f89000'; //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 function safeLDefer(){var d=document.createElement("script");d.src="https://cdn.jsdelivr.net/gh/choipanwendy/safelink-v1.1@main/wcsafelink.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",safeLDefer,!1):window.attachEvent?window.attachEvent("onload",safeLDefer):window.onload=safeLDefer; //]]> </script> Oke itulah artikel kali ini yang bisa kami bagikan, untuk semua kodenya saya ambil dari blognya mas wendy https://wendycode.com, jika kalian ingin reques artikel lainnya silahkan kalian komentar di bawah.