Cara Membuat Safelink Di Blog Utama Dengan Mudah

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.

Mengingat banyak sekali yang request ingin membuat safelink di blog utama seperti di blog ini, maka pada akhirnya kami berkesempatan untuk menulis tutorial lengkapnya disini. harap dibaca dengan teliti karena artikel ini akan sedikit panjang.

Baca Juga :

• Membuat Search Bar Melayang Responsive Pure CSS

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.

Demo Safelink

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

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

1. 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 membuatnya, kemudian simpan laman tersebut lalu edit kembali 'dalam mode html'
2. Kami sudah menyiapkan template yang bisa Anda gunakan untuk layout laman safelink nya jadi hanya perlu copy paste kode script dibawah ini pada laman safelink yang sudah Anda buat.
   
   
   
   
   

    <div class='separator-text' style='text-align:center'> <div class='ads-top'> <!-- Isi Kode Adsense Anda --></div> <a class='button1' href='#golink'>Klik 2x untuk menuju link</a></div> <div class='separator-text'> <!-- Tulis Konten Artikel Anda Disini --></div>  <div id='golink' class='separator' style='text-align:center'> <div id='ads-left' class='ads-left'> <!-- Isi Kode Adsense Anda --></div> <div class='safelink' dir='ltr' trbidi='on'> <div> <span id='daplong' class='button1'>Please Wait...</span></div> <script>var currentURL=location.href; var str = currentURL; var res = str.replace("https://www.alamatblog.com/p/safelink.html?url=", ""); document.write('<button id="download" class="visit-link button1" onclick="changeLink();" style="display:none;">Menuju Link</button>')</script></div> <div id='ads-right' class='ads-right'> <!-- Isi Kode Adsense Anda --></div> </div><!-- end separator --> <div class='clear'> </div> 

   
   
   • Letakkan artikel dan kode Adsense Anda pada bagian yang sudah di tandai. Rekomendasi ukuran adsense yang sesuai adalah responsive untuk bagian atas dan 336x280 pada bagian kiri dan kanan safelink.
   • Jangan lupa untuk menyalin url/link laman yang sudah Anda buat diawal tadi dan ganti url pada kode diatas dengan url laman safelink Anda.
   • Anda juga bisa mengubah kalimat pada tombol link sesuai keinginan Anda dengan cara mengubah kaliman 'Menuju Link' yang sudah kami tandai.
   • Direkomendasikan blog Anda support 'https' karena hal ini akan berpengaruh dengan eksperience dari pengunjung.
3. 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. Perlu diperhatikan bagian kedua ini akan sedikit rumit jadi perhatikan dengan teliti karena jika sedikit saja ada kesalahan maka safelinknya tidak akan berfungsi.

Step 2 - Final

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

1. CSS

   Kode CSS ini berfungsi untuk menampilkan layout pada laman safelink dan untuk menyembunyikan widget safelink agar tidak tampil pada blog.
   
   

    /* Safelink */ .button1{display: inline-block;padding: 6px 20px;margin: 15px 0 10px 0;border: 1px solid #ddd;font-size: 13px;color: #414141;border-radius: 30px;cursor: pointer;transition:  all 0.3s ease} .button1:hover{background-color: #EA6D23;border-color: #EA6D23;color: #fff} .ads-top{padding: 5px 0 15px 0;text-align: center} .ads-left,.ads-right{display: inline-block;float: left;margin: 5px 15px 0 0} .ads-right{float: right;margin: 5px 0 0 15px} .visit-link,#daplong{margin-right: 0;padding: 7px 30px;line-height: 25px;font-family: Lato, sans-serif;transition: all 0.3s ease-in-out} .visit-link{padding: 7px 50px} #HTML99,#HTML99 .widget-content{border: 0!important;margin: 0!important;padding: 0!important} /* Responsive */ @media screen and (max-width: 768px){.ads-left,.ads-right{display: block;float: none;margin: 5px 0 0;text-align: center}} 

   
   

2. Javascript

   Cari kode </head> pada blog Anda dan letakkan kode dibawah ini tepat diatas kode </head>:
   
   

    <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <script>/*<![CDATA[*/ var currentURL=location.href; var str = currentURL; var res = str.replace("//www.alamatblog.com/p/safelink.html?url=", ""); $(".visit-link").hide(); function changeLink(){var decodedString = Base64.decode(res); window.open(decodedString,'_blank')} function generate() {var linkDL = document.getElementById("download"), btn = document.getElementById("btn"), notif = document.getElementById("daplong"), direklink = document.getElementById("download").href, waktu = 5; var teks_waktu = document.createElement("span"); linkDL.parentNode.replaceChild(teks_waktu, linkDL); var id; id = setInterval(function () { waktu--; if (waktu < 0) { teks_waktu.parentNode.replaceChild(linkDL, teks_waktu); clearInterval(id); notif.style.display = "none"; linkDL.style.display = "inline-block"; } else { teks_waktu.innerHTML = "Link akan tampil dalam " + waktu.toString() + " Detik"; btn.style.display = "none";}}, 1000);} /*]]>*/</script> <script>/*<![CDATA[*/ var uri = window.location.toString(); if (uri.indexOf("%3D","%3D") > 0) { var clean_uri = uri.substring(0, uri.indexOf("%3D")); window.history.replaceState({}, document.title, clean_uri);} var uri = window.location.toString(); if (uri.indexOf("%3D%3D","%3D%3D") > 0) { var clean_uri = uri.substring(0, uri.indexOf("%3D%3D")); window.history.replaceState({}, document.title, clean_uri);} 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 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> 

   
   
   • Ubah url pada kode diatas dengan url laman safelink Anda serta hapus 'https:' pada url safelink Anda sebagaimana kode diatas, tujuannya Adalah agar pengunjung 'non-https' tetap bisa mengakses laman safelink Anda dengan otomatis redirect ke mode 'https'.
   • 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 akan tampil dalam '.
   • Baris kedua dari kode diatas berfungsi untuk menghapus kode '&m=1' yang biasanya muncul ketika laman diakses melalui mobile, 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;
     
     

      var protocol=window.location.protocol.replace(/\:/g,''); if(protocol=='http'){ var url=window.location.href.replace('http','https'); window.location.replace(url);} 

     
     Laman safelink yang disetting mode 'http' tidak akan berfungsi jika dibuka melalui 'https' dan berlaku sebaliknya mode 'https' tidak akan berfungsi jika dibuka melalui 'http'.
     
     

3. Buat Widget Baru

   Carilah bagian widget sidebar dari template Anda yang biasa ditandai dengan kode <b:section> atau <b:widget silahkan cari pada template Anda kode seperti ini. Tambahkan widget baru dengan cara copy paste code dibawah.
   
   Jika Anda kesulitan silahkan cari kode </b:widget></b:section> pada template Anda dan tempatkan kode dibawah ini tepat di tengah kode tersebut menjadi </b:widget>isi kode dibawah</b:section>
   
   

    <b:widget cond='data:view.isSingleItem' id='HTML99' locked='false' title='Safelink' type='HTML' version='1'>   <b:widget-settings>     <b:widget-setting name='content'/>   </b:widget-settings>   <b:includable id='main'>     <div class='widget-content'>       <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(/rn/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 encode=document.getElementById('encode'),decode=document.getElementById('decode'),output=document.getElementById('output'),input=document.getElementById('input');var User_ID="";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 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("http")) {a_to_vh=true;} j++;} if(a_to_vh==false) {var encryptedUrl=Base64.encode(a_to_vi);a_to_ve[i].href="https://www.alamatblog.com/p/safelink.html?url="+ encryptedUrl;a_to_ve[i].rel="nofollow";a_to_vb++;a_to_vc+=i+":::"+ a_to_ve[i].href+"n";}} var a_to_vj=document.getElementById("anonyminized");var a_to_vk=document.getElementById("found_links");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>       <script>/*<![CDATA[*/ protected_links = "facebook.com,fb.me,instagram.com,plus.google.com,twitter.com";auto_safelink(); /*]]>*/</script> <!-- Daftar link pengecualian -->     </div>   </b:includable> </b:widget> 

   
   
   • Letakkan kembali url laman safelink Anda pada bagian yang sudah ditandai.
   • 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.
   • cond='data:view.isSingleItem' membuat widget hanya tampil pada halaman posting dam statis, tidak akan tampil pada halaman lain.
     
     

4. HTML

   Untuk menjalankan script ini ketika blog di load, Cari Kode <body pada template Anda lalu tambahkan kode dibawah ini kedalam tag <body tersebut:
   
   

    //Sebelum <body>  //tambahkan onload='generate()' hingga kodenya menjadi <body onload='generate()'> 

   
   
5. Klik Simpan Tema pada template Anda.

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.

Sumber https://www.jagodesain.com/

Bagikan Artikel ini