Menyimpan CSS dan Javascript di Google Drive

Terkadang blogger atau web desainer mengalami masalah dengan kode CSS, javascript dan script penting lainnya untuk blog/site mereka. Untuk memperindah tampilan blog/site agar lebih menarik kadang mereka menambahkan beberapa javascript ke dalam blog mereka. Hal ini membuat beban blog/site semakin berat dan waktu loadingnya semakin lama.

Tetapi masalah ini bisa diatasi dengan menempatkan file CSS dan javascript di hosting tersendiri di luar template.  Cara ini akan mengurangi ukuran template dan loading blog/site pun semakin cepat. Selain itu dengan menempatkannya di hosting eksternal akan membuat template kelihatan lebih rapi dan mudah mengaturnya. Bayangkan kalau CSS dan semua file script menumpuk di satu template blog/site seperti gado-gado.

Tempat penyimpanan file yang paling baik menurut kami saat ini adalah Google Drive. Selain gratis, Google Drive memiliki reputasi yang baik, memiliki hosting load yang cepat dan memberikan space yang cukup besar dengan jatah bandwith tanpa batas sehingga tidak perlu khawatir blog/site anda mengalami error karena kehabisan jatah bandwith.

Cara menyimpan file CSS dan Javascript atau file lainnya di Google Drive

Pertama-tama siapkan file yang akan di simpan di Google Drive. Untuk menyiapkan file ini anda bisa menggunakan notepad.  Sebagai contoh bila ingin menyimpan file CSS dari template Blogger, copy kode css diantara  <b:skin><![CDATA[  dan  ]]></b:skin>.  Lihat contoh gambar di bawah,  arsiran biru merupakan bagian yang di copy.

Setelah di copy kemudian paste ke dokumen baru di notepad lalu simpan file CSS dengan ekstension css (*.css). Bila file yang disimpan  adalah file Javascript maka di save dengan ekstension js (*.js).

Langkah berikutnya adalah meng-upload file CSS yang sudah Anda siapkan tadi. Masuklah ke halaman Google Drive https://drive.google.com dan login dengan akun Google yang Anda miliki. Bila sudah masuk, klik tombol "CREATE" pada navigasi sebelah kiri dan buat sebuah folder untuk menyimpan file Anda nanti.

Kemudian masuk ke dalam folder yang baru dibuat dengan cara mengklik folder tersebut. Untuk mengupload file CSS atau javascript ke folder ini, klik tombol upload (terletak disebelah kanan tombol CREATE), kemudian klik option "Files" untuk mengambil file CSS/Javascript di drive komputer Anda.

Bila file selesai diupload klik link "Share" seperti yang terlihat pada gambar bawah.

Klik tombol "Change" untuk membuka option perubahan sharing file CSS/Javascript.

Ubahlah setting Link sharing file dari "Specific people" menjadi "Public on the web" karena file ini akan digunakan di blog/site yang nantinya bisa diakses oleh orang lain. Setelah itu klik tombol "Save"

Berikutnya Anda akan mendapatkan link untuk di-sharing. Copy link itu dan paste ke notepad untuk digunakan lebih lanjut.

Penggunaan link CSS dan Javascript di template Blogger
Nah sekarang tinggal memasukan link file tadi ke template Blogger. Ada sedikit perbedaan form link untuk file CSS dan file Javascript bila ingin digunakan di template Blogger.  Umumnya dari Link sharing dari Google drive berbentuk seperti ini.

https://drive.google.com/file/d/0B4wS9Xm07YZnSWVkTWtfbm9LcFE/edit?usp=sharing

Tetapi link di atas bukanlah link yang akan digunakan di template Blogger. Anda harus sedikit memodifikasi  dengan mengambil bagian kode yang berlatar belakang merah saja pada contoh link di atas. Dan menempelkannya dengan link googledrive.com seperti di bawah ini

https://googledrive.com/host/kode-background-merah-disini

Sehingga bila digabungkan maka link yang siap pakai akan terlihat seperti contoh di bawah ini.

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

Bentuk link untuk file CSS
Untuk link CSS maka link googledrive.com di atas harus ditempelkan ditengah link untuk stylesheet

<link href="googledrive-link-disini" rel="stylesheet"></link>

Bentuk link untuk file Javascript
Untuk Javascript maka link googledrive.com di atas harus ditempelkan ditengah link untuk script

<script src="googledrive-link-disini" type="text/javascript"></script>

Sebagai contoh karena kita sudah mengupload file CSS maka link google drive menjadi seperti ini

<link href="https://googledrive.com/host/0B4wS9Xm07YZnSWVkTWtfbm9LcFE" rel="stylesheet"></link>

Link CSS dan Javascript sekarang siap dimasukan ke template Blogger. Selanjutnya karena anda sudah memindahkan file CSS dari template Blogger ke hosting Google Drive, maka jangan lupa untuk menghapus CSS template Blogger antara  kode <b:skin><![CDATA[  dan  ]]></b:skin>.  Setelah itu save template untuk menyelesaikan proses ini.

Semoga membantu. Salam!