Memiliki tampilan website yang cantik dan profesional tentu menarik perhatian. Bagi pemula, sering muncul pertanyaan: “Gimana sih caranya membuat website terlihat menarik dan profesional, tapi tetap mudah dinavigasi sehingga pengunjung betah berlama-lama?” Di sini, kita akan bantu jawabkan. Pada dasarnya, pengaturan tampilan website bisa dilakukan dengan customisasi tema yang kita pakai, sehingga tampilannya sesuai selera dan nyaman untuk pengunjung.Di artikel ini, kita akan bahas langkah demi langkah cara custom tema di Blogger lewat menu Theme Designer langsung dari dashboard Blogger. Panduan ini sangat cocok untuk pemula karena tidak perlu menyentuh kode HTML, cukup klik dan atur sesuai keinginan.
Sebelum masuk ke langkah-langkahnya, penting untuk memahami bahwa setiap tema WordPress biasanya sudah menyediakan berbagai opsi customisasi. Mulai dari warna, font, tata letak, hingga tampilan header dan footer, semuanya bisa disesuaikan agar website terlihat lebih profesional dan enak dilihat. Dengan memahami fitur-fitur ini, kita bisa membuat tampilan website unik dan sesuai dengan karakter brand tanpa perlu coding yang rumit.
Berikut beberapa langkah sederhana untuk mulai mengubah tampilan website melalui customisasi tema: pertama, masuk ke menu “Appearance” atau “Tampilan” → “Customize” di dashboard WordPress. Di sini, kamu bisa mengatur warna utama, font, background, hingga tata letak halaman. Kedua, cek widget dan menu navigasi, pastikan posisinya rapi dan mudah dijangkau pengunjung. Ketiga, manfaatkan preview langsung sebelum menyimpan perubahan, agar setiap penyesuaian terlihat pas dan konsisten di seluruh halaman website. Dengan langkah-langkah ini, tampilan website bisa segera berubah menjadi lebih profesional, nyaman, dan menarik bagi pengunjung.
👉 Baca juga: Cara Membuat Website Di Blogger Dari Nol
Sebelum Mulai — Persiapan Penting
- Backup tema saat ini — selalu simpan cadangan sebelum mengubah desain. Jika ada kesalahan, tema bisa dikembalikan ke versi sebelumnya.
- Siapkan logo & gambar — gunakan file PNG/JPG dengan ukuran sesuai. Logo 250–600 px lebar biasanya aman dan tajam tampilannya.
- Catat warna brand — siapkan kode hex (#xxxxxx) untuk warna utama, warna link, dan background agar tampilan konsisten.
- Pastikan akses — sudah login ke akun Google yang digunakan untuk Blogger dan bisa mengakses dashboard blog.
Gambaran Singkat: Bagian Tema yang Bisa Di-custom
- Tema Designer (Theme → Customize): ganti warna, font, background, dan tata letak dasar.
- Layout (Tata Letak): pindah/ubah widget (gadget), tambah menu, footer.
- Header: logo, judul, deskripsi singkat.
- Blog Posts: atur excerpt, metadata, dan jumlah posting di beranda.
- Advanced / CSS: masukkan CSS ringan untuk pengaturan lanjutan (opsional).
Langkah-Langkah Custom Tema — Detail & Praktis
👉 Baca juga:
Cara Instal Tema di Blogger
1. Masuk ke Menu Tema
Langkah awal, buka Dashboard Blogger → Tema. Setelah login, Anda akan melihat daftar blog yang terdaftar di akunmu.
Jika memiliki lebih dari satu blog, pastikan memilih blog yang ingin diubah tampilannya.
Langkah detail:
- Masuk ke Dashboard Blogger.
- Pilih nama blog → klik untuk masuk ke pengaturan blog tersebut.
- Di sidebar kiri → cari menu Tema (Theme).
- Ikonnya biasanya berbentuk seperti kanvas / layout website.
- Letaknya di bawah menu Tata Letak (Layout).
- Klik Tema, maka akan muncul preview tema aktif yang sedang dipakai blog.
Contoh tampilan:
- Di bagian atas biasanya ada preview tema aktif (desktop & mobile).
- Di bawahnya ada tombol Sesuaikan / Customize, Edit HTML, dan daftar tema bawaan Blogger.
- Jika sebelumnya sudah install tema pihak ketiga, preview yang tampil adalah versi terakhir yang dipasang.
Saran dari kami:
- Jangan langsung klik Edit HTML jika masih pemula. Menu ini lebih cocok untuk yang sudah paham coding CSS/HTML.
- Gunakan dulu opsi Sesuaikan (Customize), karena semua perubahan bisa dilihat secara live preview sebelum disimpan.
- Pastikan kamu backup tema terlebih dahulu, sehingga jika ada kesalahan, bisa restore ke tema awal.
2. Masuk ke Theme Designer
Setelah masuk ke menu Tema, langkah berikutnya adalah membuka Theme Designer untuk menyesuaikan tampilan blog secara lebih detail.
Langkah detail:
- Di halaman Tema, cari tombol Sesuaikan / Customize pada preview tema aktif.
- Klik tombol Sesuaikan / Customize → otomatis akan membuka Theme Designer.
- Di Theme Designer, kamu bisa melihat preview blog secara real-time untuk desktop dan mobile.
- Pada sidebar Theme Designer terdapat menu: Background, Layout, Advanced, dan lainnya yang bisa langsung diubah.
Contoh tampilan:
- Preview blog muncul di tengah halaman.
- Pada sisi kiri ada opsi menu untuk mengubah layout, warna, font, dan widget.
- Setiap perubahan langsung terlihat di preview tanpa perlu menyimpan dulu.
Saran dari kami:
- Gunakan Theme Designer untuk mencoba berbagai kombinasi warna, layout, dan font sebelum menyimpan perubahan.
- Preview di desktop dan mobile untuk memastikan tampilan konsisten di semua perangkat.
- Jika ragu dengan perubahan tertentu, catat atau screenshot dulu agar mudah dikembalikan ke versi sebelumnya.
3. Latar Belakang (Background)
Bagian Latar Belakang adalah tempat pertama yang akan kamu lihat saat membuka Theme Designer. Di sini kamu bisa mengatur gambar latar, perataan, scroll, dan warna tema utama agar blog terlihat rapi dan sesuai branding.
Langkah-langkah untuk pemula:
- Upload Gambar Latar
- Klik opsi Gambar Latar di tab Background.
- Pilih kategori gambar bawaan Blogger:
- Abstrak → motif abstrak, minimalis.
- Seni → ilustrasi atau lukisan.
- Bisnis → profesional, cocok untuk blog teknologi/startup.
- Perayaan, Hiburan, Keluarga, Makanan & Minuman, Lainnya → sesuai tema blog.
- Contoh: untuk blog teknologi → pilih kategori Bisnis atau Abstrak.
- Jika ingin gambar sendiri → klik Upload dari komputer.
- Perataan Background
- Pilih salah satu:
- Deretkan → background diulang beberapa kali.
- Jangan Deretkan → background muncul sekali.
- Deretkan Horizontal → diulang horizontal, tidak vertikal.
- Centang Scroll dengan Halaman jika ingin background ikut bergeser saat scroll.
- Contoh: background kota futuristik → centang Scroll agar terlihat natural saat digulir.
- Pilih salah satu:
- Tema Warna Utama
- Warna tema utama menentukan warna dasar blog, seperti background, header, link default.
- Contoh: blog teknologi → pilih biru muda atau abu-abu agar terlihat profesional.
- Jika background gelap → pilih teks terang agar mudah dibaca.
- Perubahan warna bisa langsung dilihat di preview sebelum disimpan.
Saran untuk pemula:
- Fokus dulu pada Gambar Latar → pilih kategori sesuai niche atau upload sendiri.
- Sesuaikan Perataan dan centang Scroll dengan Halaman agar background terlihat rapi.
- Pilih Tema Warna Utama yang sesuai dengan gambar dan branding blog.
- Gunakan preview untuk desktop dan mobile sebelum klik Apply to Blog.
- Warna elemen detail atau CSS bisa diatur nanti di tab Lanjutan / Advanced.
4. Lanjutan (Advanced) — Contoh Visual Theme Body & Colors
Setelah memilih gambar latar, bagian Theme Body dan Theme Colors menentukan tampilan elemen blog: background, teks, judul, sidebar, dan footer colors.
1. Theme Body — Mengubah Background & Teks
- Body Background Colors
- Buka panel Theme Body → klik Body Background Colors.
- Preview menampilkan seluruh background blog.
- Pilih warna terang untuk teks gelap atau gelap untuk teks terang.
- Centang Transparan jika ingin background mengikuti tema utama.
Background Terang
Teks gelapBackground Gelap
Teks terang - Warna Teks
- Klik Warna Teks di Theme Body.
- Preview menampilkan perubahan warna teks postingan dan widget.
- Sesuaikan kontras agar teks terbaca jelas di atas background.
- Centang Transparan jika ingin mengikuti warna tema utama.
2. Theme Colors — Step by Step Berdasarkan Preview
Di Theme Colors, kita mengatur warna elemen spesifik agar konsisten dengan branding. Semua perubahan langsung terlihat di preview desktop & mobile.
- Tab Theme Color
- Pilih warna utama blog (biasanya untuk link & judul default).
- Preview langsung menampilkan perubahan warna judul & link postingan.
- Contoh visual: Link & Judul
- Tab Dark Color
- Pilih warna elemen gelap seperti sidebar dark atau tombol.
- Preview menunjukkan perubahan di sidebar gelap.
- Contoh visual: Sidebar Dark
- Tab Warna Judul
- Pilih warna judul postingan dan widget.
- Preview langsung menampilkan perubahan warna judul di halaman dan sidebar.
- Contoh visual: Judul PostinganJudul Widget
- Title Color & Hover
- Pilih warna judul saat hover mouse.
- Preview langsung menunjukkan efek hover.
- Contoh visual: Judul NormalJudul Saat Hover
- Sidebar Title Dark & Light
- Pilih warna judul sidebar untuk tema gelap & terang.
- Preview menampilkan perubahan langsung di sidebar.
- Contoh visual: Sidebar DarkSidebar Light
- Footer Color
- Pilih warna footer blog.
- Preview menampilkan perubahan di bagian paling bawah halaman.
- Contoh visual: Footer
Tips Pemula:
- Ubah satu per satu berdasarkan preview agar efeknya langsung terlihat.
- Gunakan centang Transparan jika ingin elemen mengikuti tema utama.
- Preview desktop & mobile selalu dicek sebelum klik Apply.
- Jika belum puas → ubah warna sampai nyaman dilihat dan sesuai branding.
5. Tambahkan CSS (Opsional)
Bagian Tambahkan CSS di Theme Designer memungkinkan menambahkan kode CSS kustom untuk mengubah tampilan blog lebih spesifik, misal font, warna, border, efek hover, atau layout tambahan. Untuk pemula, ini opsional tapi berguna jika ingin tampilan lebih unik.
Langkah-langkah untuk pemula:
- Buka Tab Tambahkan CSS
- Di Theme Designer → pilih Lanjutan / Advanced → scroll ke bawah → klik Tambahkan CSS.
- Kotak editor CSS akan muncul di sebelah kanan (Preview akan berubah saat kode diketik).
- Menambahkan kode CSS sederhana
- Contoh mengubah font judul blog:
h1, h2, h3 { font-family: Arial, sans-serif; } - Contoh mengubah warna link saat hover:
a:hover { color: #007bff; }
- Contoh mengubah font judul blog:
- Preview langsung
- Setiap perubahan CSS akan muncul di preview blog.
- Jika tidak sesuai → bisa hapus atau ubah kode tanpa memengaruhi tema utama.
- Simpan perubahan
- Jika sudah puas dengan tampilan → klik Apply to Blog.
- Jika belum yakin → bisa dicoba beberapa kali sampai nyaman.
Saran pemula:
- Gunakan CSS opsional untuk penyesuaian kecil seperti font, warna link, atau efek hover.
- Preview selalu digunakan untuk melihat hasil sebelum Apply to Blog.
- Jangan langsung menghapus kode utama tema, cukup tambahkan di kotak Tambahkan CSS.
- Mulailah dari contoh sederhana, setelah terbiasa baru eksplorasi CSS lebih lanjut.
6. Gadget
Bagian Gadget di Theme Designer memungkinkan menampilkan widget tambahan di blog, seperti bio penulis, menu halaman, dan arsip postingan. Untuk pemula, fokus pada tiga opsi utama:
Langkah-langkah untuk pemula:
- Mengenai Saya (About Me)
- Centang opsi Tampilkan Mengenai Saya agar bio penulis muncul di sidebar atau footer.
- Isi deskripsi singkat tentang blog atau penulis, misal: “Blog ini membahas tips teknologi dan startup.”
- Contoh tampilan: Mengenai Saya
Blog ini membahas tips teknologi dan startup.
- Halaman (Pages)
- Centang opsi Tampilkan Halaman agar menu navigasi halaman muncul di blog.
- Halaman bisa berupa Home, Tentang, Kontak, dsb.
- Contoh tampilan menu: Menu Halaman: Home | Tentang | Kontak
- Arsip Blog (Blog Archive)
- Centang opsi Tampilkan Arsip Blog agar daftar postingan per bulan/tahun muncul.
- Memudahkan pengunjung menelusuri postingan lama.
- Contoh tampilan arsip: Arsip Blog
September 2025
Agustus 2025
Juli 2025
Saran Pemula:
- Centang semua opsi gadget ini agar blog terlihat lengkap dan profesional.
- Gunakan Preview untuk melihat tampilan sidebar/menu/arsip di desktop dan mobile.
- Urutan aman: Mengenai Saya → Halaman → Arsip Blog.
- Isi bio dan nama halaman sesuai branding blog agar pengunjung lebih mudah mengenal blog.
Kesimpulan
Secara singkat, sebelum melakukan custom tema Blogger, pemula sebaiknya selalu melakukan backup data tema terlebih dahulu agar bisa mengembalikan tampilan awal jika terjadi kesalahan. Setelah itu, langkah pertama dalam custom tampilan adalah mengatur latar belakang dengan memilih gambar sesuai niche atau branding blog, menyesuaikan perataan, mengaktifkan opsi scroll dengan halaman, dan menentukan warna tema utama agar teks dan elemen blog tetap terbaca dengan jelas.
Selanjutnya, masuk ke bagian lanjutan / advanced untuk menyesuaikan Theme Body, termasuk background dan warna teks, serta Theme Colors untuk link, judul, sidebar, dan footer. Untuk yang ingin tampilan lebih unik, bagian Tambahkan CSS bisa digunakan secara opsional untuk menambahkan efek, font, atau styling tambahan.
Setelah itu, aktifkan gadget utama seperti Mengenai Saya untuk menampilkan bio penulis, Halaman untuk menu navigasi, dan Arsip Blog agar pengunjung mudah menelusuri postingan lama. Semua perubahan sebaiknya selalu dicek melalui preview desktop dan mobile sebelum akhirnya klik Apply to Blog agar tampilan terlihat rapi dan profesional.
Secara keseluruhan, urutan aman untuk pemula adalah: mulai dari backup tema, kemudian custom background, lanjut ke advanced / theme body & colors, tambahkan CSS jika perlu, aktifkan gadget, dan terakhir preview & apply. Dengan mengikuti alur ini, pemula dapat melakukan kustomisasi tema dengan aman, rapi, dan sesuai branding blog.
FAQ — Pertanyaan Umum Custom Tema Blogger
Terima kasih telah berkunjung ke Kalbertps.com. Jika ada pertanyaan atau masukan, Anda dapat menghubungi kami melalui halaman Contact.
Semoga panduan ini bermanfaat dan membantu Anda dalam menyesuaikan tampilan blog.
— Admin Kalbertps.com
Comment