Hallo sahabat blogger pada kesempatan kali ini saya akan berbagi tutorial cara membuat safelink otomatis random post dengan generate dengan mudah di blogger.
Pengalaman saya saat mencari tutorial membuat safelink di blog kebanyakan hanya melewati satu halaman saja sehingga ketika saat meleawti safelink tersebut hanya menjumpai satu halaman saja dan saya juga pernah ketemu dengan tutorial yang mengenscript semua url di blog yang artinya ketika mau berpindah halaman atau postingan maka harus melewati safelink dulu.
Menurut saya pribadi jika menjumpai safelink seperti itu sangat berbahaya karena pengunjung bisa - bisa malas datang ke blog kita dan safelink itu kurang efisien dan sangat membahayakan adsense. Sedangkan jika kamu menggunakan template safelink berbayar maupun template safelink yang gratisan yang sudah beredar di google menurut saya juga sangat berbahaya buat adsense karena bisa terkena invalid trafik dari google adsense.
Lantas bagaimana cara membuat safelink di blog dengan aman google adsense dan pengunjung tetap betah di blog kita ? Baik saya akan membagikan tutorial cara membuat safelink random post dengan generate, safelink yang saya bagikan ini tidak terpaku pada satu halaman saja dan tidak mengenscript semua url blog kalian, karena safelink ini menggunakan generate manual dan otomatis random post.
Untuk demonya silahkan klik tombol di bawah ini lalu pilih icon yang ada di atas sebelah kanan, lihat gambar di bawah ini:
Cara Membuat Safelink Auto Generate Random Post di Blogger
Sebelum ke tutorial saya akan jelaskan bahwa safelink ini sudah saya modifikasi dan tidak memberatkan kalian karena sudah saya compres menggunakan defer js dan safelink ini sangat mudah untuk kalian modifikasi.
Catatan
Untuk berjaga - jaga silahkan backup template kalian terlebih dahulu.
- Pertama silahkan kalian login ke blog kalian dan pilih tema lalu edit html
- Pastikan template kalian sudah terpasang jQuery, jika belum silahkan salin kode di bawah ini dan letakan tepat di atas kode </head> atau <!--</head>--></head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>- Jika sudah silahkan salin kode di bawah ini dan letakan 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}- Lanjut, silahkan kalian salin dan letakan kode icon safelink ini di tempat yang kalian mau / inginkan, agar lebih bagus silahkan letakan di bagian icon header.
Jika kalian menggunakan template median ui 1.5 silahkan letakan kodenya setelah kode <!--[ Profile button ]--> lewati kode </b:if> pertama supaya tidak terjepit tag conditional homepage.
<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>
- Sekarang cari kode <data:post.body/> biasanya kode <data:post.body/> ini lebih dari satu dan itu tergantung template yang kalian gunakan, jika menemukan kode <data:post.body/> lebih dari satu silahkan coba 1 per 1.
Jika sudah ketemu silahkan ikuti petunjuknya di bawah ini.
- Salin dan letakan kode di bawah ini 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>- Dan salin kode di bawah ini lalu letakan di bawah kode <data:post.body/>
<div style='text-align: center'>
<button class='bt-success hidden' disabled='' id='gotolink'>
Go to Link
</button>
</div>- Sehingga hasilnya seperti di bawah ini
<div id='timer'/>
<div style='text-align: center'>
<button class='bt-success hidden' disabled='' id='wcGetLink'>
Get Link
</button>
</div>
<data:post.body/>
<div style='text-align: center'>
<button class='bt-success hidden' disabled='' id='gotolink'>
Go to Link
</button>
</div>- Masih di edit html, sekarang cari kode Footer lalu letakan kode di bawah ini di atas kode Footer
Sebenarnya bebas mau di taruh dimana saja yang penting masih 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 silahkan salin kode bawah ini dan letakan di atas kode </body> atau <!--</body>--></body>
<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>- Simpan tema kalian dan selesai.
Untuk bagian yang saya tandai dengan warna kuning silahkan rubah dengan selera kalian
Seperti itulah tutorial Cara Membuat Safelink Auto Generate Random Post di Blogger jika kalian masih bingung dalam membuat safelink ini silahkan berkomentar di kolom komentar. Semoga bermanfaat dan terimakasih atas kunjungannya.