Cara Menghosting Java Script di Goole Drive Sendiri

Javascript

Membuat java script sendiri tentu memerlukan tempat hosting file tersebut. Sebenarnya sudah banyak tutorial di Google yang menjelaskan cara hosting file di Google Drive. Saya mencoba memperjelas dan memudahkan cara hosting file khususnya file js blogger untuk defer javascript dan keperluan lain.

Cara menghosting file js di Google Drive berikut adalah langkah-langkahnya.

1. Membuat File Java Script dengan Ekstensi .js

Menghosting file js di Google Drive, maka langkah pertamanya adalah menyiapkan file jsnya terlebih dahulu yang akan kita hosting. Contoh saja, berikut cara menghosting sebuah javascript seperti di bawah ini yang saya ambil dari tutorial memasang komentar Blogger, Disqus, dan Facebook. yang diperoleh dari blog kompiajaib.

 <script type='text/javascript'>
//<![CDATA[
var disqus_shortname="USERNAME DISQUS";
var disqus_url = disqus_blogger_current_url;

(function () {
    "use strict";
    var get_comment_block = function () {
        var block = document.getElementById('comments');
        if (!block) {
            block = document.getElementById('disqus-blogger-comment-block');
        }
        return block;
    };
    var comment_block = get_comment_block();
    if (!!comment_block) {
        var disqus_div = document.createElement('div');
        disqus_div.id = 'disqus_thread';
        comment_block.innerHTML = '';
        comment_block.appendChild(disqus_div);
        comment_block.style.display = 'block';
        var dsq = document.createElement('script');
        dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.body).appendChild(dsq);
    }
})();

!function(e,n,t){var o,c=e.getElementsByTagName(n)[0];e.getElementById(t)||(o=e.createElement(n),o.id=t,o.src="//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3",c.parentNode.insertBefore(o,c))}(document,"script","facebook-jssdk");

    var divs = ["disqus-box", "blogger-box", "facebook-box"];
    var visibleDivId = null;
    function toggleVisibility(divId) {
      if(visibleDivId === divId) {
        visibleDivId = null;
      } else {
        visibleDivId = divId;
      }
      hideNonVisibleDivs();
    }
    function hideNonVisibleDivs() {
      var i, divId, div;
      for(i = 0; i < divs.length; i++) {
        divId = divs[i];
        div = document.getElementById(divId);
        if(visibleDivId === divId) {
          div.style.display = "block";
        } else {
          div.style.display = "none";
        }
      }
    }

$(".commentbtn").click(function (e) {
$(this).addClass("btncurrent").siblings().removeClass("btncurrent");
});
//]]>
</script> 

Perhatian: Java script tidak semuanya ditulis dengan //<![CDATA[ di awal dan  //]]> di akhir kode javascript-nya.

Maka, dalam membuat file js yang diambil dari javascript di atas, silahkan copy kode di di antara kode <script type='text/javascript'>
//<![CDATA[
dan

//]]>
</script>

Contoh;

 <script type='text/javascript'>

//<![CDATA[

var disqus_shortname="USERNAME DISQUS";
var disqus_url = disqus_blogger_current_url;

(function () {
    "use strict";
    var get_comment_block = function () {
        var block = document.getElementById('comments');
        if (!block) {
            block = document.getElementById('disqus-blogger-comment-block');
        }
        return block;
    };
    var comment_block = get_comment_block();
    if (!!comment_block) {
        var disqus_div = document.createElement('div');
        disqus_div.id = 'disqus_thread';
        comment_block.innerHTML = '';
        comment_block.appendChild(disqus_div);
        comment_block.style.display = 'block';
        var dsq = document.createElement('script');
        dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.body).appendChild(dsq);
    }
})();

!function(e,n,t){var o,c=e.getElementsByTagName(n)[0];e.getElementById(t)||(o=e.createElement(n),o.id=t,o.src="//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3",c.parentNode.insertBefore(o,c))}(document,"script","facebook-jssdk");

    var divs = ["disqus-box", "blogger-box", "facebook-box"];
    var visibleDivId = null;
    function toggleVisibility(divId) {
      if(visibleDivId === divId) {
        visibleDivId = null;
      } else {
        visibleDivId = divId;
      }
      hideNonVisibleDivs();
    }
    function hideNonVisibleDivs() {
      var i, divId, div;
      for(i = 0; i < divs.length; i++) {
        divId = divs[i];
        div = document.getElementById(divId);
        if(visibleDivId === divId) {
          div.style.display = "block";
        } else {
          div.style.display = "none";
        }
      }
    }

$(".commentbtn").click(function (e) {
$(this).addClass("btncurrent").siblings().removeClass("btncurrent");
});

//]]>

</script>

misalnya dengan nama java.js kemudian seimoan dengan mengklik tombol Save.

2.  Menghosting JS di Google Drive

Setelah memiliki file js, selanjutnya kita akan menghosting file js tersebut di Google Drive. anda tentu saja sudah memiliki Google Drive adalah prodak google yang dapat diakses gratis dengan email google kita.

Sekarang akses Google Drive anda dan login dengan akun Google Anda.

Setelah anda masuk, Kemudian buatlah folder baru khusus untuk hosting file-file js. caranya, klik tombol NEW di kiri atas lalu pilih option Folder dan silahkan anda beri nama folder-nya dengan Hosting JS.

Jika folder selesai dibuat, langkah selanjutnya adalah:

1. klik kanan pada folder yang anda buat tadi dan pilih option Share, 
2. Dialog box akan muncul, pada dialog box yang muncul, klik Advance di pojok kanan bawah dialog box tersebut.
3. Terakhir pada dialog box berikutnya, klik Change pada option Private - Only you can access dan pilih On - Public on the web lalu klik tombol Save.

3. Membuat URL Java Script

Setelah langkah penempatan java script pada google Grive selesai, sekarang tinggal mengkopi URL java script tersebut.

Pada dialog box berikutnya silahkan copy URL di bagian atas box yang biasanya otomatis sudah di-block jadi kita tinggal CTRL + C aja di keyboard lalu klik tombol Done pada dialog box tersebut dan paste URL tadi di notepad.

Contoh URL java sript

https://drive.google.com/folderview?id=0Bz4YdwRI3rnCNk85QzV3N01RbFU&usp=sharing

 Kode yang diwarnai pada URL di atas adalah kode yang diperlukan untuk langkah selanjutnya. Lalu buat URL seperti ini.

https://googledrive.com/host/KODE ID FOLDER

Silahkan ganti KODE ID FOLDER dengan kode yang yang telah diwarnai di ats tadi.

Simpan URL folder java script anda karena akan kita perlukan untuk langkah selanjutnya. Namai saja URL tadi dengan nama URL Folder Hosting JS.

4. Upload Java Script

Untuk meng upload file JS kita dalam ekstensi .js, silahkan klik 2 kali pada folder Hosting JS yang kita buat tadi di Google Drive. Setelah folder terbuka, silahkan upload file js yang sudah kita buat pada langkah pertama tadi dengan klik tombol merah NEW di pojok kiri atas dan pilih option File Upload.

Untuk memanggil file JS yang kita hosting di Google Drive tadi, kita tinggal menambahkan nama file js yang kita upload tadi pada URL Folder Hosting JS yang sudah anda buat tadi.

contoh:

https://googledrive.com/host/0Bz4YdwRI3rnCNk85QzV3N01RbFU/contoh.js

Dengan ini anda berhasil membuat URL tersebut yang kita sebut sebagai URL hosting js di Google Drive. Setelah itu, tinggal mengganti nama file js saja untuk memanggil file js lainnya yang diupload pada folder anda tersebut di Google drive.

UPDATE

Saat ini Google sudah menutup hosting file untuk Java Script pada Google Drive seperti di atas. Silahkan gunakan alternatif lain seperti Github atau Firebase.

Related Posts