CARA MEMPERBAIKI LAYOUT BLOGGER YANG BERANTAKAN DAN MENGHILANGKAN TITIK TITIKNYA

Cara Menghilangkan Titik-Titik di Layout Blogger (Essentials, Contempo, DKK)

Jika kamu melihat titik-titik aneh muncul di layout Blogger saat membuka pengaturan Layout, terutama setelah menambahkan menu navigasi kustom, jangan panik. Hal ini umum terjadi, terutama pada template modern Blogger versi ke-3 seperti Essentials, Contempo, Soho, Emporio, dan Notable.

Perlu diingat, setiap template Blogger memiliki struktur HTML dan deklarasi CSS yang berbeda-beda. Jadi, solusi ini fokus pada template versi terbaru (v3) seperti Essentials dan Contempo.

Langkah-Langkah Menghilangkan Titik-Titik Layout

1. Buka dasbor Blogger kamu.
2. Pilih menu Theme (Tema).
3. Klik ikon panah ▼ di tombol "Customize", lalu pilih Edit HTML.
4. Cari kode: <b:template-skin><![CDATA[ — ini berada di bawah bagian CSS template.
5. Temukan dan hapus kode lama seperti ini:

   body#layout .hidden,
   body#layout .invisible {
     display: inherit;
   }
   body#layout .navigation {
     display: none;
   }
   body#layout .page,
   body#layout .sidebar_top,
   body#layout .sidebar_bottom {
     display: inline-block;
     left: inherit;
     position: relative;
     vertical-align: top;
   }
   body#layout .page {
     float: right;
     margin-left: 20px;
     width: 55%;
   }
   body#layout .sidebar-container {
     float: right;
     width: 40%;
   }
   body#layout .hamburger-menu {
     display: none;
   }
   

6. Ganti dengan kode baru berikut ini:

CSS Layout Glossy Glass yang Baru

/*== New Layout Editor Styling start ==*/

body#layout {
  background: linear-gradient(135deg, #f4f8fb, #e0ecf7);
  font-family: 'Segoe UI', sans-serif;
  padding: 20px;
  position: relative;
}

/* Watermark branding di tengah atas */
body#layout:before {
  content: 'essentials glossy glass v1';
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  color: rgba(0, 0, 0, 0.1);
  font-weight: 600;
  text-transform: uppercase;
  font-style: italic;
  pointer-events: none;
}

/* Struktur layout glossy */
body#layout .page,
body#layout .sidebar_top,
body#layout .sidebar_bottom {
  display: inline-block;
  vertical-align: top;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 16px;
  margin: 10px;
  transition: all 0.3s ease;
}

body#layout .page {
  width: 55%;
}

body#layout .sidebar_top,
body#layout .sidebar_bottom {
  width: 40%;
}

/* Judul widget */
body#layout .section h4 {
  color: #004080;
  font-weight: bold;
  border-bottom: 2px solid #cce0f5;
  padding-bottom: 4px;
  margin-bottom: 10px;
}

/* Hilangkan titik-titik layout */
body#layout ul {
  display: none;
}

/* Perilaku layout umum */
body#layout .hidden,
body#layout .invisible {
  display: inherit;
}

body#layout .navigation,
body#layout .hamburger-menu {
  display: none !important;
}

/*== New Layout Editor Styling end ==*/

Setelah selesai, simpan template kamu. Sekarang layout akan terlihat lebih clean, glossy, dan yang paling penting: tanpa titik-titik mengganggu di layout editor Blogger.

Catatan

Titik-titik biasanya muncul karena penambahan elemen menu menggunakan selector seperti: body#layout ul yang tidak difilter dengan benar. Kode di atas akan menonaktifkannya dengan cara elegan.

Tips Tambahan jika kamu ingin memodifikasi HTML template kamu sendiri

Kalau kamu menggunakan template lain (bukan Essentials atau Contempo), kamu tetap bisa memperbaiki layout-nya. Caranya:

1. Buka Edit HTML.
2. Cari <b:template-skin><![CDATA[ Lalu salin semua bagian layout di bawahnya.
3. Buka ChatGPT, Pastekan kode kode yang kamu copy tadi ke kolom instruksi atau kolom percakapan chat GPT dan beri instruksi seperti ini: “Tolong perbaiki kode layout template Blogger berikut. Hilangkan titik-titik yang mengganggu di layout editor, buat tampilannya lebih simpel, mobile-friendly, dan glossy modern.”

Dengan bantuan AI, kamu bisa mengoptimalkan template lama agar tampil modern dan cepat. Selamat mencoba!