What tutorial do you want for the next article! Request Here!

Cara menambahkan widget safelink di blog utama

Cara membuat widget safelink Di Blog Utama
cara menambahkan safelink di blog utama

Hallo semuanya pada kesempatan kali ini admin mau berbagi tutorial cara membuat safelink di blog utama dengan random post dan generator

disini saya disclaimer dulu script ini tidak 100% buatan saya tapi disini saya sudah memodifikasi dari sumber inspeksi https://safesmart-url.blogspot.com saya tidak tau siapa author asli dari blog ini .

script ini sudah saya optimasi agar mudah di edit dan tidak memberatkan blog/website dan cara pemasangan nya cukup mudah hanya perlu copas css & javascript sudah selesai

untuk demonya kalian bisa klik icon safelink yang ada di pinggir kanan icon profile atau icon dark mode,dan saya juga yakin saya pasti akan selalu pasang safelink karena blog saya adalah blog download template,dll. Buat kalian yang mau memasang safelink ini langsung aja simak caranya dibawah ini.

CARA MEMBUAT SAFELINK DI BLOG UTAMA + RANDOM POST

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

Pastikan Blog Kalian Sudah Terpasang jQuery Jika Belum Terpasang, Bisa Salin Kode Di Bawah Ini & letakan diatas kode </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'/>

lanjut salin kode css di bawah ini dan letakan diatas 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}

dan letakan kode safelink di tempat yang kalian inginkan, kalian bisa kelompokan dengan icon header

jika menggunakan template MedianUi-1.5 bisa meletakannya 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 lebih dari satu, tergantung template yang kalian gunakan cari saja yang berada di dalam post-entry atau postentry jika tidak bisa kalian coba satu per satu, salah tempat safelink tidak akan berjalan,Jika Kalian Memakai Template MedianUi-1.5 Hanya Ada satu Kode

Jika Sudah Ketemu Silahkan Ikuti Petunjuk Di Bawah Ini


<!-- Letakan Kode Di Atas <data:post.body/> -->

<div id='timer'/>
<div style='text-align: center'>
<button class='bt-success hidden' disabled='' id='wcGetLink'>
Get Link
</button>
</div>

<!-- Letakan Kode Di Bawah <data:post.body/> -->

<div style='text-align: center'>
<button class='bt-success hidden' disabled='' id='gotolink'>
Go to Link
</button>
</div>

lanjut letakan kode di bawah ini diatas footer

<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 taruh kode javascript di bawah ini dan letakan kode di atas </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<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
document.addEventListener ("DOMContentLoaded", globalscript);
function globalscript() {let script = document.createElement('script');script.defer = true;
script.src = "https://cdn.jsdelivr.net/gh/choipanwendy/[email protected]/wcsafelink.js";
document.body.append(script);};
//]]>
</script>

Sekian Cara Membuat Safelink Di Blog Utama + Random Post

Source Code:
https://safesmart-url.blogspot.com & https://blog-chopainwendy.com

Post Tags

blogger Widget

About the Author

Content Creator, Graphic Designer, UI / UX Designer

4 komentar

  1. Minta scrip duble clickny:
  2. not open in new tab
  3. <i rel='img'><i rel='quote'><i rel='code'>&lt;i rel=&#039;pre&#039;&gt;&lt;/i&gt;</i></i></i>
    1. Tes
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.