Tutorial Safelink Di Blog Utama

Tutorial Safelink Di Blog Utama

Tutorial Safelink Di Blog Utama
Friday, February 1, 2019

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.

    Tutorial Membuat Safelink - Template Safelink


    <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: INPUT' 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

Tutorial Membuat Safelink - Edit HTML Blogger
  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.
Tutorial Safelink Di Blog Utama
4/ 5
Oleh