Mungkin sebagian besar pembaca artikel ini sudah mengetahui apa itu safelink, tapi sebagai pengingat akan dijelaskan kembali di sini. Safelink merupakan sebuah halaman pada situs web atau blog yang difungsikan untuk mendeteksi apakah tautan yang dituju aman atau tidak dari virus dan malware, singkatnya safelink adalah halaman sebelum pengguna pergi ke halaman yang dituju.
Safelink biasanya terdapat pada blog/website dengan tema download, namun yang sering ditemui adalah safelink tersebut tidak dalam blog utama dengan domain yang berbeda. Ada beberapa kekurangan dari safelink jenis ini tapi tidak akan dibahas disini. Memikirkan berbagai macam manfaat yang bisa dimaksimalkan dari safelink, maka kami mencoba berkesperimen dengan memuat laman safelink yang tetap berada di blog utama dan bekerja dengan sempurna.
Skenario dan Manfaat Safelink
Cara kerjanya hampir sama dengan safelink lain hanya saja laman safelinknya tetap berada di domain utama. Skenarionya ketika pengunjung ingin mendownload file tertentu dalam blog, mereka akan diarahkan ke laman tertentu dari blog tersebut sebelum akhirnya menuju ke laman download file tersebut.
Ada banyak manfaat yang bisa didapat dari safelink versi ini beberapa diantaranya adalah :
- Tidak perlu membuat blog baru dan membeli domain baru
- Lebih mudah untuk di kostumisasi
- Tetap dalam blog Utama, artinya otomatis menambah angka pengunjung di blog utama
- peningkatan pagerank blog karena pengunjung meningkat
- Mengurangi bounce rate dari blog utama
- Sarana penempatan adsense untuk menambah penghasilan blog.
- 100% Aman karena masih dalam satu domain dengan blog utama
Kekurangan dari safelink ini adalah mengubah semua link eksternal menjadi encode dan diarahkan ke laman safelink, termasuk link sosial media atau link blog lain (bukan situs download) , satu-satunya cara adalah Anda harus menambahkan setiap situs yang tidak ingin diarahkan ke safelink didalam daftar situs perkembangan.
Tutorial Safelink di Blog Utama
tutorial ini akan dibagi menjadi dua bagian, bagian pertama membuat halaman/laman safelinknya dan bagian kedua mengedit source atau kode blognya. Kami menggunakan blogger karena tutorial ini juga lebih cocok untuk pengguna blogger, untuk pengguna layanan lain yang bisa menyesuaikan dengan tutorial ini.
Langkah 1-Membuat Halaman Safelink
Pertama-tama buatlah sebuah laman blogger tidak harus halaman statis, laman posting pun bisa digunakan untuk safelink ini. Kami berasumsi Anda sudah mengerti dan bisa membuat laman tersebut, lalu edit dalam ' Tampilan HTML ' dengan cara icon pensil pada bagian bawah selanjutnya klik saat laman laman.
Kami sudah menyiapkan template yang bisa Anda gunakan untuk layout laman safelink nya jadi hanya perlu copy paste kode HTML di bawah ini pada laman safelink yang sudah Anda buat.
<div class='ad-placement'>
<!--[ Your_ad_code_here ]-->
</div>
<div class='safelink-button' id='safelink'>
<div style='text-align: center'>
<div class='button outline' id='safelink-wait'>Please wait...</div>
<script>/*<![CDATA[*/ var currentURL = location.href; var str = currentURL; var res = str.replace('https://your_blog_address.com/p/safelink.html' + '?url=', " "); function changeLink(){ var decodedString = Base64.decode(res); window.open(decodedString, '_blank')}; document.write('<a href="#getLink" id="safelink-download" class="button">Create link</a>'); var linkDL = document.getElementById("safelink-download"); var notif = document.getElementById("safelink-wait"); var time = 5; var textTime = document.createElement("span"); linkDL.parentNode.replaceChild(textTime, linkDL); var id; id = setInterval(function () { time--; if (time < 0) { textTime.parentNode.replaceChild(linkDL, textTime); clearInterval(id); notif.style.display = "none"; linkDL.style.display = "inline-block"; } else { textTime.innerHTML = "Link will appear in " + time.toString() + " second"; }}, 1000); /*]]>*/</script>
</div>
</div>
<div class='safelink-content'>
<!--[ Write_your_content_here ]-->
</div>
<div class='safelink-create' style='text-align:center'>
<div class='ad-placement'>
<!--[ Your_ad_code_here ]-->
</div>
<div id='getLink'>
<a class='button' href='javascript:;' onclick='changeLink();' rel='noreferrer noopener' target='_blank'>Get link</a>
</div>
<div class='ad-placement'>
<!--[ Your_ad_code_here ]-->
</div>
</div>
Keterangan:
- artikel dan kode Adsense Anda pada bagian yang sudah di tandai. Rekomendasi ukuran adsense yang sesuai adalah ukuran .
- Jangan lupa untuk merekam url/link laman yang sudah Anda buat diawal tadi dan ganti url " https://your_blog_address.com/p/safelink.html " yang sudah ditandai, dengan laman safelink Anda.
- Anda juga bisa mengubah kalimat pada tombol link sesuai keinginan Anda dengan cara mengubah ' Get link ' dan ' Please wait... ' dan teks lainnya yang sudah ditandai.
- Angka 5 pada kode diatas adalah parameter waktu (detik) yang ditampilkannya link tujuan, Anda dapat mengubahnya lebih cepat atau lebih lambat. Anda juga bisa mengkostumisasi teks waktu yang tampil dengan mengubah bagian ' Link will appear in ', ' second '.
- Direkomendasikan blog Anda mendukung ' https ' karena hal ini akan berpengaruh dengan pengalaman pengunjung serta mempengaruhi skrip fungsi.
Simpan kembali laman Anda baikan jika ada pesan eror ' HTML Anda tidak bisa diterima: Tag putus: BUTTON ' atau sebagainya dengan cara klik tutup pada noifikasi , sampai disini tahap pertama sudah selesai dan silahkan lanjut ketahap kedua.
Langkah 2-Penambahan Beberapa Kode CSS dan Javascript
Silahkan edit template anda dalam mode ' edit HTML ' penjelasan singkatnya silahkan klik tema dan klik edit html seperti pada gambar dibawah ini; Jika perlu backup terlebih dahulu template Anda untuk menghindari kesalahan.
Menambahkan Kode CSS
Kode CSS berfungsi untuk menampilkan tata letak pada laman safelink yang dibuat pada tahap awal.
/* Safelink */
:root {
--link-outline-color: #48525c ;
--link-bg-color: #204ecf ;
}
.button{display: inline-flex;align-items: center;margin: 15px 15px;padding: 10px 20px;outline: 0;border: 0;border-radius: 2px;color: #fefefe;background-color: var(--link-bg-color);font-size: 14px;white-space: nowrap;overflow: hidden;max-width: 100%;line-height: 2em}
.button.outline{color: var(--link-outline-color);background-color: transparent;border: 1px solid #ebeced}
.button.outline:hover{border-color: var(--link-bg-color)}
.safelink-button, .safelink-create > *{margin: 1.8em 0}
.safelink-button span{display: block;font-size: 12px}
#getLink{margin: 5px 0}
#getLink .button{display: none}
#getLink:target .button{display: inline-flex}
Anda bisa membuat bagian ini setengah mengubah ukuran teks pada link atau sebagainya
Pada Blogger kode CSS ditandai dengan tag <b:skin>...</b:skin>
. . Jika kesulitan untuk menempatkan kode CSS di atas Anda bisa mencari kode </head> dan menempatkan kode CSS nya tepat di atas kode </head> dengan catatan harus menggunakan kode <style>...</style> . Hasilnya kurang seperti ini:
<style>
<!--[ Isi Kode CSS diatas ]-->
</style>
</head>
Javascript untuk Redirect ?m=1
Cari kode </head> pada blog Anda dan letakkan kode dibawah ini tepat diatas kode </head> :
<b:if cond='data:view.isPage'>
<script>/*<![CDATA[*/ var uri = window.location.toString(); if (uri.indexOf("?m=1","?m=1") > 0) {var clean_uri = uri.substring(0, uri.indexOf("?m=1"));window.history.replaceState({}, document.title, clean_uri); }; var protocol = window.location.protocol.replace(/\:/g,''); if(protocol == 'http'){ var url = window.location.href.replace('http','https'); window.location.replace(url);}
/*]]>*/</script>
</b:if>
Kode bekerja untuk menghapus kode ' &m=1 ' yang biasanya muncul ketika laman diakses melalui seluler, karena jika kode ' &m=1 ' tidak dihapus maka safelink tidak akan berfungsi ketika pengunjung mengaksesnya memalui platform mobile. Kode ini juga berfungsi untuk pengunjung pengunjung melalui ' http ' ke ' https '. Jika blog Anda belum disetting support ' https ' maka Anda bisa menghapus bagian yang sudah ada di blok warna pada kode diatas:
var protocol = window.location.protocol.replace(/\:/g,''); if(protocol == 'http'){ var url = window.location.href.replace('http','https'); window.location.replace(url);}
Kode Javascript untuk Encode Url
Script ini berfungsi untuk mengubah semua link eksternal pada blog menjadi Base64, setelah menambahkan script dibawah ini semua link eksternal akan otomatis di encode menjadi seperti contoh dibawah ini
https://unplug.jagodesain.com/p/safelink.html?url=aHR0cHM6Ly93d3c2NS56aXBweXNoYXJlLmNvbS92L3F3V1FhTDdWL2ZpbGUuaHRtbA
Cara paling mudah untuk menempatkan kode javascript adalah dengan menempatkannya sebelum tag </body> . temukan tag tersebut biasa ada pada bagian bawah template lalu tempelkan kode Javascript di bawah ini tepat sebelum tag </body>.
<b:if cond='data:view.isSingleItem'>
<script>/*<![CDATA[*/ var Base64 = {_keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789", encode: function (input) {var output = ""; var chr1, chr2, chr3, enc1, enc2, enc3, enc4; var i = 0; input = Base64._utf8_encode(input); while (i < input.length) {chr1 = input.charCodeAt(i++); chr2 = input.charCodeAt(i++); chr3 = input.charCodeAt(i++); enc1 = chr1 >> 2; enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); enc4 = chr3 & 63; if (isNaN(chr2)) {enc3 = enc4 = 64;} else if (isNaN(chr3)) {enc4 = 64;} output = output + this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) + this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);} return output; }, decode: function (input) {var output = ""; var chr1, chr2, chr3; var enc1, enc2, enc3, enc4; var i = 0; input = input.replace(/[^A-Za-z0-9\+\/\=]/g, ""); while (i < input.length) {enc1 = this._keyStr.indexOf(input.charAt(i++)); enc2 = this._keyStr.indexOf(input.charAt(i++)); enc3 = this._keyStr.indexOf(input.charAt(i++)); enc4 = this._keyStr.indexOf(input.charAt(i++)); chr1 = (enc1 << 2) | (enc2 >> 4); chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); chr3 = ((enc3 & 3) << 6) | enc4; output = output + String.fromCharCode(chr1); if (enc3 != 64) {output = output + String.fromCharCode(chr2);} if (enc4 != 64) {output = output + String.fromCharCode(chr3);} } output = Base64._utf8_decode(output); return output;}, _utf8_encode: function (string) {string = string.replace(/\r\n/g, "\n"); var utftext = ""; for (var n = 0; n < string.length; n++) {var c = string.charCodeAt(n); if (c < 128) {utftext += String.fromCharCode(c);} else if ((c > 127) && (c < 2048)) {utftext += String.fromCharCode((c >> 6) | 192); utftext += String.fromCharCode((c & 63) | 128);} else {utftext += String.fromCharCode((c >> 12) | 224); utftext += String.fromCharCode(((c >> 6) & 63) | 128); utftext += String.fromCharCode((c & 63) | 128); }} return utftext;}, _utf8_decode: function (utftext) {var string = ""; var i = 0; var c = c1 = c2 = 0; while (i < utftext.length) {c = utftext.charCodeAt(i); if (c < 128) {string += String.fromCharCode(c); i++;} else if ((c > 191) && (c < 224)) {c2 = utftext.charCodeAt(i + 1); string += String.fromCharCode(((c & 31) << 6) | (c2 & 63)); i += 2;} else {c2 = utftext.charCodeAt(i + 1); c3 = utftext.charCodeAt(i + 2); string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)); i += 3;}} return string; }}; var protected_links = ""; var a_to_va = 0; var a_to_vb = 0; var a_to_vc = ""; function auto_safelink() {auto_safeconvert();}; function auto_safeconvert() {var a_to_vd = window.location.hostname; if (protected_links != "" && !protected_links.match(a_to_vd)) {protected_links += ", " + a_to_vd;} else if (protected_links == "") {protected_links = a_to_vd;} var a_to_ve = ""; var a_to_vf = new Array(); var a_to_vg = 0; a_to_ve = document.getElementsByTagName("a"); a_to_va = a_to_ve.length; a_to_vf = a_to_fa(); a_to_vg = a_to_vf.length; var a_to_vh = false; var j = 0; var daftarPostingan = [ "https://your_blog_address.com/p/safelink.html" ]; var randomPostingan = daftarPostingan[Math.floor(Math.random()*daftarPostingan.length)]; var a_to_vi = ""; for (var i = 0; i < a_to_va; i++) {a_to_vh = false; j = 0; while (a_to_vh == false && j < a_to_vg) {a_to_vi = a_to_ve[i].href; if (a_to_vi.match(a_to_vf[j]) || !a_to_vi || !a_to_vi.match("https")) {a_to_vh = true;} j++; } if (a_to_vh == false) {var encryptedUrl = Base64.encode(a_to_vi); a_to_ve[i].href = randomPostingan + "?url=" + encryptedUrl; a_to_ve[i].rel = "noopener noreferrer"; a_to_vb++; a_to_vc += i + ":::" + a_to_ve[i].href + "\n";} } var a_to_vj = ""; var a_to_vk = ""; if (a_to_vj) {a_to_vj.innerHTML += a_to_vb;} if (a_to_vk) {a_to_vk.innerHTML += a_to_va;} }; function a_to_fa() {var a_to_vf = new Array(); protected_links = protected_links.replace(" ", ""); a_to_vf = protected_links.split(","); return a_to_vf;}; /*]]>*/</script>
<!--[ Protect link from encode ]-->
<script>protected_links = "facebook.com, instagram.com, twitter.com"; auto_safelink(); </script>
</b:if>
Secara default semua link eksternal akan diarahkan ke laman safelink, tambahkan beberapa situs seperti laman facebook blog Anda dan sebagainya pada bagian ' protected_links ', pisahkan dengan koma ( , ) jika ingin menambahkan beberapa situs wisata.
tag <b:if cond='data:view.isSingleItem'> berfungsi untuk membuat skrip hanya tampil di halaman posting dan statis, tidak akan tampil di halaman lain.
Jika sudah anda tambahkan silahkan Klik Simpan Tema pada template Anda.
menambahkan Lebih dari 2 Laman Safelink
Anda bisa sedikit memodifikasi skrip di atas agar dapat menampilkan lebih dari dua laman safelink yang akan dipilih secara acak. Caranya adalah mengubah pada bagian kode:
var daftarPostingan = [ "https://your_blog_address.com/p/safelink.html" ];
Tambahkan url baru pisahkan dengan tanda koma ( , ) sehingga kodenya menjadi seperti di bawah ini; Anda juga bisa menambahkan beberapa laman safelink lain
var daftarPostingan = [ "https://your_blog_address.com/p/safelink.html", "https://your_blog_address.com/p/safelink-2.html" ];
Sampai disini Laman safelink Anda sudah selesai selesai dibuat, jika Anda mengikuti semua langkah dengan benar maka kami jamin laman safelinknya bekerja dengan baik. Silahkan uji coba dengan cara klik link download di blog Anda. Jika ada pertanyaan atau bagian yang kurang difahami silahkan tuliskan pertanyaan melalui kolom komentar yang sudah disediakan