Blogger
CSS
Dashboard-Blogger
Desain-Blog
Font
Panduan-Pemula
Tutorial
Tutorial Blogger
Widget
Cara Mengubah Ukuran & Warna Font di Widget Blogger
Ana Writer
Penulis Blog
Bikin Blog Lebih Estetik: Cara Mudah Mengubah Ukuran & Warna Font di Widget Blogger
Halo Tappers... Punya blog dengan konten keren tapi tampilannya masih standar banget? Rasanya pasti ada yang kurang. Salah satu elemen yang paling sering dilihat pengunjung—selain artikel utama—adalah widget, terutama widget Popular Posts (Artikel Populer). Widget ini ibarat etalase toko yang memajang produk terbaik Tappers.
Sayangnya, pengaturan bawaan (default) dari Blogger terkadang membuat ukuran atau warna font widget ini terlihat kaku atau tidak senada dengan tema blog Anda. Tenang, Anda tidak perlu jadi hacker atau ahli coding untuk mengubahnya. Hanya dengan sedikit trik mudah, Tappers bisa menyulap tampilan widget Blogger jadi jauh lebih estetik dan profesional!
📌 Kenali Istilahnya: Kamus Kecil Blogger
Sebelum kita masuk ke tutorialnya, yuk pahami dulu beberapa istilah keren yang akan sering kita sebut nanti:
- Widget / Gadget: Elemen tambahan di tata letak blog (seperti kolom pencarian, daftar artikel populer, atau profil) yang berfungsi memperluas fitur blog.
- CSS (Cascading Style Sheets): Bahasa pemrograman sederhana yang digunakan untuk mengatur tampilan/desain sebuah website (ibarat baju dan kosmetik untuk blog Anda).
- Hex Code: Kode kombinasi angka dan huruf yang diawali tanda pagar (contoh: `#ffffff` untuk putih) yang digunakan untuk mendefinisikan warna di internet.
- Hover: Efek perubahan visual (seperti warna teks) yang terjadi ketika kursor komputer diarahkan ke atas suatu elemen web tanpa mengkliknya.
🛠️ Cara Mengubah Ukuran dan Warna Font Widget Blogger
Ada dua jalan ninja yang bisa Anda pilih. Jalan pertama (menggunakan kode CSS) adalah yang paling ampuh untuk semua jenis tema blog. Jalan kedua adalah cara instan tanpa kode khusus pengguna tema bawaan Google.
Metode 1: Menggunakan Jalur Custom CSS (Sangat Direkomendasikan)
Metode ini adalah cara paling efektif, terutama jika Anda menggunakan tema pihak ketiga (custom premium theme). Trik ini akan memaksa sistem blog mengikuti kemauan Anda.
Langkah-langkahnya:
- Masuk ke dasbor Blogger Anda.
- Di menu sebelah kiri, klik Tema (Theme).
- Klik tombol Sesuaikan (Customize) untuk masuk ke halaman Blogger Theme Designer.
- Pada panel kiri, pilih menu Tingkat Lanjut (Advanced).
- Klik menu dropdown, gulir ke bawah, lalu pilih Tambahkan CSS (Add CSS).
- Copy kode ajaib di bawah ini dan tempel (paste) ke dalam kolom yang tersedia:
/* 1. Mengubah Judul Widget (Contoh: Tulisan "Popular Posts") */.PopularPosts h2, .PopularPosts h2.title {font-size: 20px !important; /* Ubah angka untuk ukuran huruf */color: #2c3e50 !important; /* Ubah kode hex untuk warna huruf */}/* 2. Mengubah Judul Artikel di Dalam Widget */.PopularPosts .item-title a {font-size: 15px !important;color: #333333 !important;text-decoration: none;}/* 3. Efek Hover: Warna Judul Saat Disentuh Kursor */.PopularPosts .item-title a:hover {color: #e74c3c !important;}/* 4. Mengubah Teks Ringkasan Artikel (Snippet) */.PopularPosts .item-snippet {font-size: 13px !important;color: #7f8c8d !important;}
Tips Kreatif:
Jika bingung mencari kode warna (`#333333`, dll), ketik saja "HTML Color Picker" di Google. Anda bisa memilih warna apa saja secara visual dan menyalin kodenya di sana.
Metode 2: Lewat Fitur Bawaan Blogger (Tanpa Ribet Kode)
Jika blog Anda masih setia menggunakan tema asli bawaan Blogger (seperti tema Contempo, Soho, atau Emporio), Google sudah menyediakan tools instan.
Langkah-langkahnya:
- Pergi ke menu Tema klik Sesuaikan.
- Pilih menu Tingkat Lanjut (Advanced).
- Cari menu bernama Teks Gadget (Gadget Text) atau Judul Gadget (Gadget Title).
- Di sana Anda tinggal mengubah jenis font, ukuran, dan warnanya lewat tombol klik yang ramah pengguna.
- Klik Simpan di pojok kanan bawah.
Catatan: Jika metode kedua ini tidak mengubah apa pun di blog Anda, artinya tema Anda sudah dimodifikasi berat. Silakan langsung gunakan Metode 1.
💡 Kesimpulan
Mengubah tampilan font pada widget Blogger bukan cuma soal estetika, tapi juga soal kenyamanan membaca (readability). Widget Popular Posts yang rapi, bersih, dan kontras warnanya pas akan memikat pengunjung untuk berlama-lama di blog Anda dan mengklik artikel lainnya. Metode Custom CSS tetap menjadi pilihan terbaik karena fleksibilitasnya yang tinggi.
🏁 Penutup
Nah, ternyata mempercantik blog itu tidak seseram yang dibayangkan, bukan? Selamat mencoba bereksperimen dengan warna dan ukuran font yang sesuai dengan branding blog Tappers. Jika Tappers menemui kendala atau kodenya tidak bekerja di tema Anda, jangan ragu untuk meninggalkan pertanyaan di kolom komentar di bawah, ya! Happy blogging!
📚 Sumber & Referensi
- Blogger Help Center: Customize your blog's theme.
- W3Schools Online Web Tutorials: CSS Fonts & Colors Guide.