membuat safelink di blog utama dengan random post + generator

safelink random post manual untuk blogger

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat safelink di blog utama dengan random post + generator

kebanyakan tutorial safelink di blog utama yang beredar di internet mengenscript semua url di blog sehingga setiap berpindah halaman maka harus melewati safelink terlebih dulu.

menurut saya safelink seperti itu terlalu berlebihan, masa iya pengunjung harus melewati safelink setiap berpindah halaman, bisa - bisa orang akan malas untuk berkunjung kembali ke blog kita lagi.

sedangkan template safelink yang beredar mau itu versi gratis maupun berbayar juga menurut saya masih ada kekurangannya, karena bisa terkena invalid trafik dari google adsanse.

berbeda dengan safelink yang akan saya bagikan di sini, safelink ini tidak otomatis mengenscript semua url di blog kalian jadi manual menggunakan generator dan sudah otomatis random post.

jadi kalian tidak perlu membuat halaman atau postingan khusus untuk safelink, karena sudah otomatis mengacak semua postingan yang ada di blog kalian.

di sini saya disclaimer dulu script ini tidak 100% buatan saya, script ini hasil modifikasi saya dari sumber inspeksi https://safesmart-url.blogspot.com saya tidak tau siapa author aslinya, karena template tersebut banyak yang membagikannya dan mengganti nama designernya.

script ini sudah saya optimasi agar mudah di edit dan tidak memberatkan blog karena sudah saya compres dan menggunakan defer js, dan cara pemasangnya juga cukup mudah tidak ribet hanya perlu copas css html javascript selesai.

untuk demonya kalian bisa klik icon safelink yang ada di atas header blog ini, dan saya juga tidak yakin apakah akan terus memasangnya karena blog ini bukanlah blog dwonload, ok buat kalian yang ingin mencobanya mari simak caranya di bawah ini.

Membuat Safelink Di Blog Utama Random Post + Generator

catatan
sebelum memulai alangkah baiknya membackup template kalian terlebih dulu untuk menghindari hal - hal yang tidak di inginkan.

pastikan template kalian sudah terpasang jQuery jika belum ada, bisa salin kode di bawah ini dan letakkan di atas kode </head> atau &lt;!--</head>--&gt;&lt;/head&gt;

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

lanjut salin css di bawah ini dan letakkan di atas kode ]]></b:skin> atau di atas kode </style>

/* 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:80px;height:80px;clip:rect(0em,0.5em,1em,0em);border-radius:50%}.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}

dan letakkan kode icon safelink ini di tempat yang kalian inginkan, kalian bisa kelompokkan di bagian icon header.

jika menggunakan template median-ui v1.5 bisa meletakkannya setelah kode <!--[ Profile button ]--> lewati kode </b:if> pertama agar tidak tergapit 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>

lanjut mencari kode <data:post.body/> biasanya kode ini ada lebih dari 1, tergantung template yang kalian gunakan cari saja yang berada dalam post-entry atau postEntry jika tidak tau coba saja 1 1 jika salah tempat safelink tidak akan berjalan, kalau template median-ui hanya ada 1 saja kode seperti itu.

jika sudah ketemu silakan ikuti petunjuk di bawah ini

<!-- 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>

lanjut letakkan kode di bawah ini di atas kode <footer, sebenarnya bebas di mana saja selama masih di dalam tag body, saya pribadi lebih memilih meletakkannya di atas footer agar lebih rapi.

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

dan terakhir salin javascript di bawah ini dan letakkan di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; jika sudah jangan lupa untuk klik simpan.

bagian yang saya tandai bisa kalian edit sesuai kebutuhan atau bisa di biarkan saja.

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

ok jadi sekian cara membuat safelink di blog utama dengan random post + generator semoga bermanfaat dan terima kasih telah berkunjung.

source code:
https://safesmart-url.blogspot.com