Cara Host File Javascript dan CSS di Google Drive

Hai sobat semua, kali ini saya ingin berbagi tips cara menggunakan Google drive sebagai tempat host file Javascript atau yang lebih kita kenal dengan singkatan JS dan juga bisa digunakan sebagai tempat host file CSS (Cascading Style Sheet) dan kawan-kawan. Bagi sobat yang suka dan sering bermainan website dan blog maka istilah javascript dan css bukan lagi suatu yang asing lagi. Mengapa Google Drive? Ada banyak alasan, di antaranya; karena gratis selamanya, cepat (tidak loading lama ketika calling file), tidak ada iklan seperti iklan pop-up yang menyebalkan, dan yang paling menarik adalah kapasitas yang disediakan di akun gratis google drive kita hingga 15 GB dan terus bertambah! Dikarenakan beberapa alasan tersebut saya sangat termotivasi untuk menulis panduan Cara Host File Javascript dan CSS di Google Drive ini agar sobat semua tidak menyia-nyiakan kapasitas yang telah diberikan Google secara cuma-cuma.

javascript JS


Langkah pertama tentunya sobat harus memiliki file yang berekstensi / berformat JS, CSS, atau bisa juga yang lain, namun usahakan beberapa file dengan dua eksistensi tersebut. Jika sobat belum punya, saya sudah menyediakannya di post saya ini, jadi tenang saja. Langkah selanjutnya yaitu, sobat harus login ke akun google drive sobat, sobat bisa membuat email gmail dulu jika belum punya atau langsung login saja menggunakan email gmail yang sudah ada dengan mengakses alamat drive.google.com, ketika sobat memiliki email di gmail, maka secara otomatis sobat sudah bisa mengakses akun google drive milik sobat.

gambar css


Silahkan download file berikut sebagai bahan praktek (copy-paste di browser lalu tekan enter, simpan di komputermu):

https://drive.google.com/uc?export=download&id=0B084yB0qfQg-a0dNRVZNR0pBalk

https://drive.google.com/uc?export=download&id=0B084yB0qfQg-RFlaeE5yWTJDX3c

Sebagai catatan: tips Cara Host File Javascript dan CSS di Google Drive ini berbeda dengan cara membuat link direct download di google drive yang pernah saya buat beberapa waktu yang lalu. Tips ini memastikan sobat bisa menggunakan file js dan css yang telah di-host di google drive bisa berfungsi dengan semestinya, hal ini dikarenakan bentuk default url link yang disediakan oleh google drive hanya berfungsi sebagai link download (downloadable dan shareable link), dan akan kita bahas bagaimana cara mengubahnya menjadi link yang bisa mengeluarkan fungsi sesungguhnya dari file yang kita host. Di beberapa web penyedia file host gratis akan menampilkan ekstensi file di akhir URL (alamat situs) yang digunakan seperti http://www.alamatsitus.website/filekita.js, namun beda halnya dengan url dari google drive yang akan kita bahas, google drive hanya akan menampilkan id file, dan ini lah keunikan dari google drive. Jika sobat masih bingung, mending kita langsung praktek saja. Hehe


  • Sekarang langsung menuju drive.google.com dan klik tombol "new" dan Pilih file upload

file upload google drive


  • setelah memilih file, langsung klik file yang telah berhasil kita upload barusan, dan arahkan mata sobat ke menu yang berada di kanan atas lalu klik icon "get shareable link" seperti berikut ini:

get shareable link google drive


  • lalu klik pada bagian "sharing settings"

sharing settings google drive


  • dan pastikan sobat memilih opsi more -> public on the web -> sehingga menjadi "anyone on the internet can find and view" dan klik "copy link" lalu jangan lupa klik tombol "done". Perhatikan gambar berikut ini (paste di notepad atau wordpad):

public on the web google drive

anyone on the internet can find and view google drive


  • Sekarang sobat sudah memiliki link downloadable namun file yang terkandung dalam link tersebut belum bisa mengeluarkan fungsinya, berikut link url yang telah sobat peroleh (contoh):

https://drive.google.com/file/d/0B084yB0qfQg-a0dNRVZNR0pBalk/view?usp=sharing


  • Agar bisa berfungsi, maka sobat harus mengubah format url nya menjadi seperti berikut ini (penting: perhatikan id file yang telah saya tandai dengan warna biru):

https://googledrive.com/host/0B084yB0qfQg-a0dNRVZNR0pBalk/


  • URL di atas sudah bisa sobat gunakan dalam deretan tag html yang memanggil / call fungsi javascript seperti berikut ini:

<script src="https://googledrive.com/host/0B084yB0qfQg-a0dNRVZNR0pBalk/" type="text/javascript"></script>


  • Atau juga untuk yang file berekstensi css, maka bisa sobat gunakan dalam tag html yang berfungsi sebagai pemanggil fungsi css yang telah kita host seperti berikut ini:

<link href='https://googledrive.com/host/0B084yB0qfQg-RFlaeE5yWTJDX3c/' rel='stylesheet' type='text/css'/>


  • Selesai.


Sekilas terlihat ribet, namun jika sobat sudah sering mempraktekkan tips di atas, sobat hanya perlu waktu 1 hingga 3 menit untuk menyelesaikannya. Bahkan saya sendiri hanya butuh waktu kurang dari 1 menit, jika saya bisa tentu sobat juga bisa bukan?

Dengan sedikit perubahan format url yang telah kita peroleh maka sekarang fungsi yang terkandung dalam file yang telah kita host bisa kita panggil sehingga berfungsi dengan semestinya di website maupun di blog kita. Semoga tutorial sederhana tentang Cara Host File Javascript dan CSS di Google Drive ini bermanfaat bagi sobat semua. Terima kasih telah berkunjung kemari.

Tags: Upload java script google drive, hosting JS di drive google, fungsi javascript drive, upload js dan css web
Cara Mendapatkan Uang Tanpa Modal Lewat Hp
Cara Mendapatkan Uang Tanpa Modal Lewat Hp