Menyimpan Kode B:Skin (CSS) Menggunakan Sumber Eksternal di Blogger

Sumber eksternal (external source) berarti data kode disimpan secara terpisah dari file utama XML template blog Anda. Pada struktur halaman HTML, pemanggilan file CSS luar ini biasanya dideklarasikan menggunakan tag <link>, sebagai contoh:

<link rel="stylesheet" href="my-external-style.css">

Secara bawaan (default), seluruh baris kode CSS pada tema Blogger (Blogspot) disimpan langsung di dalam satu file XML utama yang dibungkus oleh tag <b:skin>, dengan struktur seperti ini:

<b:skin>
  <![CDATA[
    /* Ratusan hingga ribuan baris kode CSS tema Anda */
  ]]>
</b:skin>

Jika Anda ingin memisahkan baris kode CSS tersebut agar dimuat dari sumber eksternal, Anda harus memotong (cut) seluruh teks kode yang berada di antara penanda <![CDATA[ dan ]]>, lalu menempelkannya (paste) ke aplikasi editor teks (seperti Notepad atau VS Code) dan menyimpannya dengan akhiran ekstensi .css.

Masalah Variabel CSS pada Tema Blogger Baru

Perlu diperhatikan bahwa pada tema-tema Blogger generasi terbaru (seperti Emporio, Soho, Contempo, Notable) atau tema kustom tertentu, di dalam tag <b:skin> biasanya tertanam baris CSS Variables bawaan sistem Blogger.

Jika struktur tersebut langsung dipotong, peramban tidak akan bisa menerjemahkan variabel tersebut secara eksternal.

Solusinya (Mengambil CSS yang Sudah Dirender):

1. Buka alamat blog Anda melalui browser.
2. Klik kanan pada area kosong halaman, lalu pilih Lihat Sumber Halaman (View Page Source).
3. Cari tag <style> bawaan Blogger, lalu salin seluruh teks kode CSS yang sudah matang dan tereksplanasi oleh server dari tag <style> tersebut hingga tag penutup </style>. Masukkan kode matang ini ke dalam file .css Anda.

Keuntungan Menggunakan File CSS Eksternal

• Manajemen Terpusat: Seluruh pengaturan gaya visual disimpan di dalam satu file khusus, sehingga struktur file XML template utama blog menjadi jauh lebih bersih dan ringan.
• Lebih Mudah Dirawat: Mempermudah proses perbaikan bug atau pembaruan tampilan.
• Meningkatkan Kecepatan Akses Halaman (Page Speed): Peramban pengunjung hanya perlu mengunduh file CSS ini satu kali saat kunjungan pertama. Untuk kunjungan berikutnya, peramban akan memuatnya langsung dari memori simpanan lokal (browser cache).
• Efisiensi Debugging Tinggi: Saat Anda melakukan eksperimen desain menggunakan fitur Chrome Inspection Tools, Anda bisa langsung menyalin hasil modifikasi dari panel inspeksi untuk memperbarui file CSS eksternal Anda tanpa takut merusak struktur widget XML Blogger.

Panduan Menghosting File CSS & JS di Google Drive

Anda bisa memanfaatkan ruang penyimpanan Google Drive untuk menghosting file .css atau .js kustom Anda secara gratis.

Syarat Wajib Keamanan (HTTPS): Jika blog Blogger Anda diakses menggunakan protokol aman HTTPS, maka file eksternal yang dihosting wajib dipanggil menggunakan tautan HTTPS juga (awalan https:// atau //). Jika tautan dipanggil menggunakan HTTP biasa, peramban akan memblokirnya karena dianggap sebagai masalah mixed content.

1. Masuk ke akun [Google Drive](https://drive.google.com/) Anda.
2. Klik tombol Baru (New) › pilih Upload File.
3. Pilih file .css atau .js Anda dari komputer, lalu klik Open untuk memulai proses unggah.
4. Setelah file sukses terunggah, klik kanan pada file tersebut dan pilih opsi Bagikan (Share) › Bagikan (Share).
5. Pada jendela opsi berbagi yang muncul, klik opsi Lanjutan (Advanced) atau langsung cari bagian Akses Umum.
6. Ubah setelan akses dari Dibatasi (Restricted) menjadi "Siapa saja yang memiliki link" (Anyone with the link) atau Publik di Web, lalu simpan pengaturan.
7. Perhatikan URL bagikan yang dihasilkan, lalu salin Kode ID File unik Anda (kumpulan karakter acak panjang di dalam URL tersebut).

Cara Memasang Tautan File Eksternal di Blogger

Setelah mendapatkan ID File dari Google Drive, Anda harus menyusunnya ke dalam format URL direct link (tautan langsung) agar file dapat dibaca utuh sebagai aset kode oleh browser, bukan sebagai halaman preview dokumen.

Ganti teks yang ditandai kuning (KODE_ID_FILE_ANDA) dengan ID unik yang Anda dapatkan dari Google Drive:

1. Format Pemanggilan untuk File CSS (Style Sheet)

<link href='//drive.google.com/uc?export=view&amp;id=KODE_ID_FILE_ANDA' rel='stylesheet' type='text/css'/>

2. Format Pemanggilan untuk File JavaScript (JS)

<script src='//drive.google.com/uc?export=view&amp;id=KODE_ID_FILE_ANDA' type='text/javascript'/>

Langkah Akhir Pemasangan:

Masuk ke dasbor Blogger Anda › Tema › Edit HTML. Tempatkan baris kode <link ... /> atau <script ... /> yang sudah Anda buat di atas, lalu letakkan di area antara tag pembuka <head> dan tag penutup </head> di template Anda. Klik Simpan.