Cara Mengubah Warna di Blogger dengan Kode HTML/CSS


Mengubah warna di Blogger paling efektif dilakukan dengan memodifikasi CSS (Cascading Style Sheets) di dalam template HTML blog Anda, atau melalui fitur CSS Lanjutan. Kode warna yang digunakan adalah format kode Hex (misalnya, #FF0000 untuk merah).

1. Mengakses Kode Template

Ikuti langkah-langkah berikut untuk membuka editor HTML/CSS:

  1. Masuk ke akun Blogger Anda.

  2. Di menu sebelah kiri, pilih Tema (atau Theme).

  3. Di bagian "Tema saya", klik Sesuaikan (Customize).

    • Pilihan A: Untuk menggunakan fitur mudah (tanpa kode HTML langsung): Di menu samping, pilih Lanjutan (Advanced). Di sini Anda dapat mencoba mengubah warna teks, tautan, latar belakang, dan elemen lainnya yang sudah disediakan opsinya.

    • Pilihan B: Untuk memasukkan kode CSS tambahan: Di menu Lanjutan, klik panah bawah dan pilih Tambahkan CSS (Add CSS). Tambahkan kode CSS Anda di sini.

    • Pilihan C: Untuk mengedit HTML Template secara langsung: Kembali ke menu Tema, di bagian "Tema saya", klik ikon Lainnya (titik tiga vertikal) lalu pilih Edit HTML (Edit HTML). Lakukan dengan hati-hati!


2. Mengubah Warna Menggunakan CSS (Disarankan)

Menggunakan CSS jauh lebih aman dan lebih mudah untuk mengontrol elemen tertentu.

Untuk Mengubah Warna Latar Belakang Seluruh Blog (Body Background):

Jika Anda menggunakan Edit HTML (Pilihan C), cari kode <body> atau kode CSS yang mengontrol latar belakang tubuh (body), biasanya di antara tag <style> atau di dalam bagian <b:skin>.

Contoh kode CSS untuk latar belakang:

CSS
body {
background-color: #f5f5dc; /* Ganti dengan kode Hex warna yang Anda inginkan (misalnya, #f5f5dc adalah warna Beige) */
}
  • Penerapan: Masukkan kode ini di bawah tag <style> atau di atas ]]></b:skin> jika mengedit HTML langsung, atau masukkan di menu Tambahkan CSS (Pilihan B).

Untuk Mengubah Warna Teks:

Contoh kode CSS untuk warna teks paragraf:

CSS
p {
color: #333333; /* Ganti dengan kode Hex untuk warna teks yang Anda inginkan (misalnya, #333333 adalah Abu-abu gelap) */
}

Untuk Mengubah Warna Tautan (Link):

Contoh kode CSS untuk tautan:

CSS
a:link {
color: #0000FF; /* Warna tautan normal (misalnya, Biru) */
}
a:hover {
color: #FF0000; /* Warna saat kursor di atas tautan (misalnya, Merah) */
}

3. Mengubah Warna Elemen Tertentu Lainnya

Untuk elemen spesifik seperti judul postingan, sidebar, atau footer, Anda perlu mengidentifikasi ID atau Class CSS elemen tersebut. Anda bisa menggunakan alat Inspeksi Elemen di peramban (klik kanan elemen > Inspect atau Inspect Element).

Contoh: Mengubah Warna Judul Postingan (jika ID-nya adalah post-title)

CSS
#post-title {
color: #008000; /* Ganti dengan warna Hijau yang diinginkan */
}

Penting: Selalu Cadangkan (Backup) template Anda sebelum melakukan pengeditan HTML secara langsung.

Daftar Kode Warna HTML (Hex) Singkat

WarnaKode Hex
Hitam#000000
Putih#FFFFFF
Merah#FF0000
Hijau#008000
Biru#0000FF
Kuning#FFFF00

Anda bisa mencari "HTML Color Picker" di Google untuk menemukan kode Hex warna lainnya.