Panduan praktis untuk membuat halaman kosong bersih (blank canvas page) di Blogger, mirip dengan fitur canvas pada Elementor.
Secara bawaan, tema Blogger selalu memuat elemen header, sidebar, navigasi, dan footer di setiap halaman.
Untuk mendapatkan tampilan bersih tanpa elemen bawaan tema (seperti canvas Elementor), Anda harus membuat Template Halaman Kustom (Custom Page Template) di dalam pengaturan HTML tema Anda.
Langkah-langkah untuk mewujudkannya:
Langkah 1: Modifikasi Kode HTML Tema (Theme Editor)
1. Cadangkan Tema:
Sebelum mengubah kode, pastikan Anda mencadangkan tema (*Backup*) terlebih dahulu untuk menghindari error.
2. Buka Editor HTML:
- Masuk ke dashboard [Blogger.com](https://www.blogger.com).
- Pilih menu Tema (Theme).
- Pada tombol di samping "Sesuaikan", klik ikon panah kebawah, lalu pilih Edit HTML.
3. Cari Kode Tag Halaman (Blogger Page Conditional):
Di dalam editor kode, tekan `Ctrl + F` (atau `Cmd + F` di Mac) untuk mencari kode yang mengatur tampilan halaman.
Cari kode seperti `<b:if cond='data:blog.pageType == "item"'>` atau cari tag pembatas elemen seperti `<header>` dan `<div id='sidebar-wrapper'>`.
4. Sisipkan Pengondisian (Conditional Tag):
Tujuannya adalah memerintahkan Blogger agar menyembunyikan header, sidebar, dan footer khusus untuk URL atau laman tertentu.
Contoh implementasi untuk menyembunyikan header dan footer pada URL tertentu:
- Bungkus bagian header tema Anda dengan kode pengecualian URL:
<b:if cond='data:blog.url != "https://URL-BLOG-ANDA.blogspot.com/p/blank-page.html"'>
<!-- KODE HEADER BAWAAN TEMA ANDA DI SINI -->
<header>...</header>
</b:if>
- Lakukan hal yang sama untuk membungkus bagian sidebar dan footer agar tidak muncul di URL tersebut.
Langkah 2: Buat Halaman Kosong Menggunakan Custom Page Template (Metode CSS Cleanse)
Cara yang jauh lebih rapi dan aman tanpa merusak struktur tema utama adalah dengan menyisipkan CSS khusus yang menonaktifkan semua elemen dekoratif hanya pada laman tertentu melalui editor Laman Statis.
1. Buat Laman Baru:
Di dashboard Blogger, pilih menu Laman (Pages), lalu klik Laman Baru.
2. Buka Tampilan HTML Laman:
Ubah mode editor dari Tampilan Menulis (Compose) ke Tampilan HTML (ikon pensil di sudut kiri atas editor laman).
3. Masukkan Kode CSS Blank Canvas:
Salin dan tempel kode berikut di baris paling atas editor HTML laman tersebut:
<style>
/* Menyembunyikan Header, Sidebar, Navigasi, dan Footer bawaan template */
header, nav, #header-wrapper, .sidebar, footer, .comments, .post-footer {
display: none !important;
}
/* Memperlebar area konten menjadi layar penuh (Full-width Canvas) */
.post, .main, .content, .post-body {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body {
background-color: #ffffff; /* Ubah warna latar belakang sesuai selera */
margin: 0;
padding: 0;
}
</style>
<!-- TULIS KONTEN / BUILD DESIGN ANDA DI SINI -->
<div style="padding: 20px; font-family: sans-serif;">
<h1>Halaman Kanvas Kosong</h1>
<p>Mulai desain halaman Anda di sini dengan HTML/CSS kustom.</p>
</div>
4. Publikasikan / simpan:
- Klik Publikasikan.
- Buka link laman tersebut di tab baru. Halaman blog Anda kini bersih total dari elemen bawaan tema dan berfungsi layaknya canvas page murni.
Tips Tambahan untuk Desain ala Elementor
Karena halaman ini murni berupa kanvas kosong, Anda bisa memanfaatkan Page Builder berbasis web pihak ketiga (seperti GrapesJS atau mendesain langsung menggunakan grid/flexbox CSS di dalam mode HTML Blogger) untuk merancang Landing Page, Sales Page, atau halaman presentasi yang estetik tanpa batasan tema.