Cara Membuat Safelink Di Blog Utama Dengan Mudah Update!

Mungkin sebagian besar pembaca artikel ini sudah mengetahui apa itu safelink, tapi sebagai pengingat akan dijelaskan kembali di sini. Safelink merupakan sebuah halaman pada website atau blog yang difungsikan untuk mendeteksi apakah url/link yang dituju aman atau tidak dari virus dan malware, singkatnya safelink adalah halaman peralihan sebelum pengguna pergi kehalaman yang dituju.

Safelink biasanya terdapat pada blog/website dengan tema download, namun yang sering ditemui adalah safelink tersebut tidak dalam blog utama dengan domain 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 pada 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 visitor di blog utama
• Meningkatkan pagerank blog karena visitor 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 pengecualian

Tutorial Safelink Di Blog Utama

tutorial ini akan dibagi menjadi dua bagian, bagian pertama membuat page/laman safelinknya dan bagian kedua edit source atau kode blog nya. Kami menggunakan blogger karena itu tutorial ini juga lebih diutamakan untuk pengguna blogger, untuk pengguna layanan lain bisa menyesuaikan dengan tutorial ini.

Step 1 - Membuat Laman Safelink

Pertama-tama buatlah sebuah laman blogger tidak harus halaman static, laman posting pun bisa digunakan untuk safelink ini. Kami asumsikan Anda sudah mengerti dan bisa membuat laman tersebut, lalu edit dalam 'Tampilan HTML' dengan cara klik icon pensil pada bagian bawah judul pada saat mengedit laman

Kami sudah menyiapkan template yang bisa Anda gunakan untuk layout laman safelink nya jadi hanya perlu copy paste kode HTML dibawah 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:

• Letakkan artikel dan kode Adsense Anda pada bagian yang sudah di tandai. Rekomendasi ukuran adsense yang sesuai adalah ukuran .
• Jangan lupa untuk menyalin url/link laman yang sudah Anda buat diawal tadi dan ganti url "https://your_blog_address.com/p/safelink.html" yang sudah ditandai, dengan url laman safelink Anda.
• Anda juga bisa mengubah kalimat pada tombol link sesuai keinginan Anda dengan cara mengubah kalimat 'Get link' dan 'Please wait...' dan teks lainnya yang sudah ditandai.
• Angka 5 pada kode diatas adalah parameter waktu (detik) ditampilkannya link tujuan, Anda bisa mengubahnya menjadi lebih cepat atau lambat. Anda juga bisa mengkostumisasi teks waktu yang tampil dengan mengubah bagian 'Link will appear in ', 'second'.
• Direkomendasikan blog Anda support 'https' karena hal ini akan berpengaruh dengan eksperience dari pengunjung serta mempengaruhi fungsi script.

Simpan kembali laman Anda abaikan jika seandainya 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.

Step 2 - Menambahkan Beberapa Kode CSS dan Javascript

Perlu diperhatikan bagian kedua ini akan sedikit rumit jadi simak dengan teliti karena jika sedikit saja ada kesalahan maka safelinknya tidak akan berfungsi

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 pengeditan

Menambahkan kode CSS

Kode CSS ini berfungsi untuk menampilkan layout pada laman safelink yang dibuat pada tahap awal.

/* Safelink */
:root {
--link-outline-color: #48525c ;
--link-bg-color: #204ecf ; // Warna background tombol link
}

.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 mengedit bagian ini semisal mengubah ukuran teks pada link atau sebagainya

Pada Blogger kode CSS ditandai dengan tag <b:skin>...</b:skin>. Jika kesulitan untuk menempatkan kode CSS diatas Anda bisa cari kode </head> dan letakkan kode CSS nya tepat diatas kode </head> dengan catatan harus menggunakan kode <style>...</style>. Hasilnya kurang lebih seperti ini:

  <style>
    <!--[ Isi Kode CSS diatas ]-->
  </style>
</head>

Terkadang pada template tertentu tidak ditemukan kode </head>, sebagai gantinya anda bisa mencari kode seperti ini: &lt;/head&gt; atau &lt;!--<head/>--&gt;&lt;/head&gt;

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 diatas berfungsi untuk menghapus kode '&m=1' yang biasanya muncul ketika laman diakses melalui mobile, karena jika kode '&m=1' tidak dihapus maka safelink tidak akan berfungsi ketika ketika pengunjung mengaksesnya memalui platform mobile. Kode ini juga berfungsi untuk mengalihkan pengunjung melalui 'http' ke 'https'. Jika blog Anda belum disetting support 'https' maka Anda bisa menghapus bagian yang sudah 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);}

Blog yang disetting mode 'http' tidak akan berfungsi jika dibuka melalui 'https'.

Kode Javascript untuk Encode Url

Script ini berfungsi untuk merubah semua link eksternal pada blog menjadi Base64, setelah menambahkan script dibawah ini semua link eksternal akan otomatis di encode menjadi seperti pada 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>. Carilah 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>

Ubah bagian yang sudah ditandai pada kode diatas dengan url laman safelink Anda

Secara default semua link eksternal akan diarahkan ke laman safelink, tambahkan beberapa situs pengecualian seperti laman facebook blog Anda dan sebagainya pada bagian 'protected_links', pisahkan dengan koma (,) jika ingin menambahkan beberapa situs pengecualian.

tag <b:if cond='data:view.isSingleItem'> berfungsi untuk membuat script hanya tampil pada halaman posting dan statis, tidak akan tampil pada halaman lain.

Jika sudah anda tambahkan silahkan Klik Simpan Tema pada template Anda.

Menambahkan Lebih dari 2 Laman Safelink

Anda bisa sedikit memodifikasi script diatas agar dapat menampilkan lebih dari dua laman safelink yang akan dipilih secara random. Caranya adalah ubah pada bagian kode:

var daftarPostingan = [ "https://your_blog_address.com/p/safelink.html" ];

Tambahkan url baru pisahkan dengan tanda koma (,) sehingga kodenya menjadi seperti dibawah 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" ];

Ini bersifat opsional, anda bisa menambahkannya atau memutuskan untuk tetap menggunakan satu laman safelink saja

Sampai disini Laman safelink Anda sudah sepenuhnya selesai dibuat, jika Anda mengikuti semua step dengan benar maka bisa kami jamin laman safelinknya bekerja dengan baik. Silahkan uji coba dengan cara klik link download pada blog Anda. Jika ada pertanyaan atau bagian yang kurang difahami silahkan tuliskan pertanyaan melalui kolom komentar yang sudah disediakan.

Sudah di update!!
Artikel ini sudah diupdate agar lebih mudah digunakan dan sudah diuji coba di blog lain 100% work, jika Anda masih menemukan error kemungkinan ada yang salah dalam penerapan kode nya