Cara Mudah Menghosting File JS Di Google Drive

Cara Mudah Menghosting File JS Di Google Drive

Bola Hero Gawai

Cara Mudah Menghosting File JS Di Google Drive

Cara Mudah Menghosting File JS Di Google Drive
Sebenarnya sudah banyak tutorial di Google tentang cara hosting file di Google Drive, namun sepertinya masih ada blogger yang belum mengerti betul cara upload file di Google Drive. Untuk itu kini saya mencoba memperjelas dan mempermudah cara hosting file khususnya file js untuk kepentingan blog seperti untuk defer javascript dan lainnya.

Untuk menghosting file js di Google Drive silahkan ikuti langkah-langkahnya di bawah ini.

1. Langkah Pertama
Untuk menghosting file js di Google Drive, tentunya langkah pertama yang harus dilakukan adalah menyiapkan file js yang akan kita hosting. Sebagai contoh, kita akan menghosting sebuah javascript seperti di bawah ini yang saya ambil dari tutorial memasang komentar Blogger, Disqus, dan Facebook.


<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: Ada juga kode javascript yang ditulis tanpa kode //<![CDATA[ di awal dan kode //]]> di akhir kode javascript-nya.

Untuk membuat file js dari javascript di atas, silahkan copy kode di di antara kode


<script type='text/javascript'>
//<![CDATA[

dan kode


//]]>
</script>

atau jika kode javascript-nya tanpa kode //<![CDATA[ di awal dan kode //]]> di akhir kode javascript, silahkan copy kode javascriptnya di antara kode <script type='text/javascript'> dan </script>. Sehingga dari kode javascript di atas, silahkan copy kode javascript seperti yang saya marking di bawah ini.


<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>

Kemudian paste di NOTEPAD. Lalu klik menu File di Notepad dan pilih option Save As, berikan nama file dengan ekstensi *.js misalnya kita beri nama contoh.js kemudian klik tombol Save. Saya contohkan pada video di bawah ini, silahkan lihat dengan full screen agar lebih jelas.


Nah pada langkah pertama ini kita sudah memiliki sebuah file js untuk kemudian kita upload di Google Drive.

2. Langkah Kedua
Setelah kita memiliki file js, maka pada langkah kedua ini kita akan menghosting file js tersebut di Google Drive.

Silahkan akses Google Drive dan login dengan akun Google Anda.

Kemudian silahkan buat folder baru khusus untuk hosting file-file js dengan klik tombol NEW di kiri atas kemudian pilih option Folder dan silahkan namai folder-nya dengan Hosting JS.

Setelah folder berhasil dibuat, silahkan klik kanan pada folder tadi dan pilih option Share, lalu pada dialog box yang muncul silahkan klik Advance di pojok kanan bawah dialog box. Kemudian pada dialog box berikutnya silahkan klik Change pada option Private - Only you can access dan pilih On - Public on the web lalu klik tombol Save.

Kemudian 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. Sebagai contoh, URL-nya akan seperti di bawah ini.

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

Kode yang saya warnai merah pada URL di atas adalah kode yang kita perlukan untuk langkah selanjutnya. Lalu buat URL seperti di bawah ini.

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

Silahkan ganti KODE ID FOLDER dengan kode yang saya kasih warna merah dari langkah sebelumnya di atas sehingga menjadi seperti di bawah ini.

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

Simpan URL yang barusan dibuat karena akan kita perlukan pada langkah selanjutnya. Kita namai URL tadi dengan nama URL Folder Hosting JS.

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

Nah untuk memanggil file yang kita hosting tadi, kita tinggal menambahkan nama file js yang kita upload tadi pada URL Folder Hosting JS yang kita buat pada langkah sebelumnya di atas sehingga akan seperti di bawah ini.

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

Nah URL tersebut yang kita sebut sebagai URL hosting js di Google Drive. Selanjutnya tinggal mengganti nama file js saja untuk memanggil file js lainnya yang diupload pada folder tersebut.

Selesan, mudah bukan? Semoga bisa dimengerti.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

5 Comments Add Comment

tutorialnya lengkap dan berguna bagi saya kang, untuk meringankan bebab loading blog.

Balas

Semoga tutorialnya bisa dimengerti mas :)

Balas

makasih mas. jelas banget caranya. saya jadi tau sekarang. brati nama foldernya ngga ikut ke link js-nya yah mas?

Balas

pantesan kompi ajaib membumi di dunia bloging, abisnya pelayanannya super duper pisan atuh da, keluhan akibat ke o-on an saya sendiri ini, atas menghosting file JS di Google Drive langsung di suguhkan dalam bentuk artikel yang jelas, danta, dan sangat transparan pisan sampe tembus pandang deh pokokna mah.
sebab itu, nggak cukup tebang bilang haturnuhun, saya langsung kirim paket ubi cilembu ke Pangandaran deh nih kang...antosan we nya....:D

Balas
This comment has been removed by the author.
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×