Cara Mengatur Desain Tema Blogger (HTML) Menggunakan CSS

CSS (Cascading Style Sheets) adalah bahasa lembar gaya yang digunakan untuk mengatur persentase atau tampilan visual dari sebuah dokumen yang ditulis menggunakan bahasa markup seperti HTML. Sebagai narablog (blogger), memiliki pengetahuan dasar mengenai HTML dan CSS adalah sebuah kewajiban.

Desain tampilan blog dapat diubah dengan dua cara dasar: mengedit letak struktur elemen melalui kode HTML, atau memodifikasi gaya visualnya via CSS. Proses pencarian elemen dan uji coba desain ini akan jauh lebih mudah jika dibantu oleh alat inspeksi peramban desktop (Chrome DevTools / Inspector).

Panduan Memanfaatkan Chrome Dev Inspector

Fitur Inspect digunakan untuk membedah kode di balik layar situs secara langsung.

Cara Membuka: Klik kanan pada area atau elemen visual blog yang ingin Anda periksa, lalu pilih opsi Instpeksi (Inspect).

Di dalam panel Styles Inspector, Anda juga akan menemukan beberapa tombol kontrol GUI khusus:

:hov — Digunakan untuk memaksa elemen mengubah statusnya (force element state) menjadi :active, :focus, :hover, atau :visited guna melihat perubahan desainnya saat berinteraksi.
.cls — Digunakan untuk menambahkan atau menguji kelas (class) baru pada elemen yang sedang dipilih.
+ (New Style Rule) — Digunakan untuk mendeklarasikan aturan gaya baru dengan otomatis menggunakan elemen yang sedang disorot sebagai selektornya.

Sifat Penyimpanan: Semua aturan gaya baru yang Anda tambahkan melalui panel inspeksi ini akan ditampung sementara di dalam file virtual bernama inspector-stylesheet.css. Anda dapat menyalin hasil eksperimen tersebut dari tab Source Pane untuk dimasukkan secara permanen ke template asli blog Anda.

3 Metode Memasang Kode CSS pada Halaman Web

Terdapat tiga cara standar untuk menyisipkan lembar gaya CSS ke dalam struktur dokumen HTML:

1. Internal Style Sheet (Gaya Internal)

Deklarasi kode CSS yang ditulis langsung di dalam satu file halaman yang sama, dibungkus menggunakan tag <style> ... </style> dan biasanya diletakkan di dalam area <head>.

<head>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>

2. External Style Sheet (Gaya Eksternal)

Metode memisahkan seluruh kode CSS ke dalam file eksternal khusus (berpformat .css) tanpa menggunakan tag <style>. File ini kemudian dipanggil di dalam template utama menggunakan tag <link>:

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

Isi di dalam file `my-external-style.css`:

h1 {
    color: red;
}

3. Inline Style (Gaya Langsung)

Penulisan kode CSS yang disuntikkan secara instan langsung di dalam atribut bawaan elemen HTML yang bersangkutan.

<div style='background-color: red;'>Teks Konten</div>

Kelebihan Gaya Eksternal (Live Editing): Jika Anda menggunakan metode internal atau inline, Anda harus menyelaraskan dan menyalin kode secara manual satu per satu ke template setelah selesai mengedit. Namun, jika menggunakan CSS eksternal, Anda cukup mengeklik nama file .css tersebut di dalam panel Styles inspektor untuk melihat kode yang terupdate otomatis, menyimpannya, lalu mengunggahnya kembali ke server hosting Anda.

Mengenal Jenis-Jenis CSS Selectors (Selektor CSS)

Sebelum bisa mengubah gaya suatu elemen HTML, kita harus "memilih" (select) elemen tersebut terlebih dahulu. Berikut adalah contoh struktur HTML dasar dan 4 cara memilihnya menggunakan selektor CSS:

<div class='container' id='id-container'>
    <h1 class='heading' id='id-h1'>Ini adalah Judul Utama</h1>
    <p class='paragraph' id='id-p'>Ini adalah teks paragraf.</p>
</div>

1. Selektor Berdasarkan Elemen (Element Selector)

Memilih elemen secara global berdasarkan nama tag HTML aslinya.

div {
    margin: 10px;
}
h1 {
    font-size: 20px;
}
p {
    color: green;
}

2. Selektor Berdasarkan Kelas (Class Selector)

Memilih elemen berdasarkan nama atribut class. Satu kelas dapat dipasang pada banyak elemen sekaligus. Di dalam kode CSS, selektor kelas wajib ditandai dengan awalan tanda titik (.).

.container {
    margin: 10px;
}
.heading {
    font-size: 20px;
}
.paragraph {
    color: green;
}

3. Selektor Berdasarkan ID (ID Selector)

Memilih elemen berdasarkan atribut id. Atribut ID bersifat sangat unik; satu nama ID hanya boleh digunakan oleh satu elemen saja di dalam satu halaman. Di dalam kode CSS, selektor ID wajib ditandai dengan awalan tanda pagar (#).

#id-container {
    margin: 10px;
}
#id-h1 {
    font-size: 20px;
}
#id-p {
    color: green;
}

4. Memilih Banyak Elemen Sekaligus (Multiple Elements Selector)

Jika ada beberapa selektor berbeda yang memiliki aturan gaya CSS yang sama, Anda dapat menggabungkannya dalam satu baris deklarasi dengan dipisahkan oleh tanda koma (,).

.heading, .paragraph {
    font-size: 20px;
}

Referensi Dokumentasi Resmi

MDN Web Docs: [Panduan Lengkap Jenis Selektor CSS (Mozilla Developer)](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors).
MDN Web Docs: [Daftar Referensi Kamus Kode CSS Lengkap](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference).
Google Developers: [Panduan Memulai Melihat dan Mengubah CSS di Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/css/).

Cari Blog Ini

Blogger Theme Tutorial