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.