Tutorial Lengkap Membuat Halaman Statis di Blogger (About, Contact, Layanan, Landing Page)

Halaman statis (static page) di Blogger berbeda dengan postingan biasa karena kontennya tetap dan mudah diakses dari menu navigasi. Berikut panduan lengkap membuat halaman statis untuk About Us, Contact, Layanan, dan Landing Page.

A. Cara Membuat Halaman Statis di Blogger

Langkah 1: Login ke Blogger

1. Buka https://www.blogger.com

2. Masuk dengan akun Google Anda

3. Pilih blog yang ingin dikelola

Langkah 2: Buat Halaman Baru

1. Di dashboard Blogger, klik "Halaman" di menu sebelah kiri

2. Pilih "Halaman baru"

Langkah 3: Buat Konten Halaman

1. Judul Halaman:

   • Contoh: "Tentang Kami", "Kontak", atau "Layanan"

2. Isi Konten:

   • Gunakan editor seperti membuat postingan biasa

   • Tambahkan teks, gambar, video, atau tabel

   • Format dengan heading (H2, H3) untuk struktur yang rapi

3. Pengaturan Halaman (di sebelah kanan):

   • Komentar: Aktifkan/nonaktifkan

   • Template halaman: Pilih sesuai kebutuhan

4. Klik "Publikasikan" ketika selesai

B. Contoh Konten untuk Halaman Statis

1. Halaman About Us (Tentang Kami)

html

Copy

<h2>Tentang Kami</h2>
<p>[Ceritakan sejarah dan visi misi blog/website Anda]</p>

<h3>Tim Kami</h3>
<div style="display:flex; gap:20px;">
  <div>
    <img src="URL-FOTO" width="150" style="border-radius:50%">
    <p><strong>Nama Anggota</strong><br>Jabatan/Role</p>
  </div>
  <!-- Tambahkan anggota lain -->
</div>

Run HTML

2. Halaman Contact (Kontak)

html

Copy

<h2>Hubungi Kami</h2>
<p>Silakan isi form berikut atau hubungi melalui:</p>

<ul>
  <li>Email: email@anda.com</li>
  <li>WhatsApp: +628123456789</li>
  <li>Alamat: Jl. Contoh No. 123, Kota</li>
</ul>

<h3>Form Kontak</h3>
<form action="https://formspree.io/f/your-form-id" method="POST">
  <input type="text" name="name" placeholder="Nama Anda" required>
  <input type="email" name="email" placeholder="Email" required>
  <textarea name="message" placeholder="Pesan Anda"></textarea>
  <button type="submit">Kirim Pesan</button>
</form>

Run HTML

3. Halaman Layanan

html

Copy

<h2>Layanan Kami</h2>

<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;">
  <div style="border: 1px solid #ddd; padding: 20px; border-radius: 8px;">
    <h3>Desain Website</h3>
    <p>Kami membuat website profesional untuk bisnis Anda</p>
    <p>Mulai dari Rp 1.500.000</p>
  </div>
  
  <div style="border: 1px solid #ddd; padding: 20px; border-radius: 8px;">
    <h3>SEO</h3>
    <p>Optimasi website di mesin pencari</p>
    <p>Mulai dari Rp 800.000/bulan</p>
  </div>
  
  <!-- Tambahkan layanan lain -->
</div>

Run HTML

4. Halaman Landing Page

html

Copy

<div style="text-align: center; padding: 40px 0; background: #f5f5f5;">
  <h1>Kursus Online Berkualitas</h1>
  <p>Belajar langsung dari para ahli di bidangnya</p>
  <a href="#daftar" style="background: #4285f4; color: white; padding: 10px 20px; border-radius: 5px; text-decoration: none;">Daftar Sekarang</a>
</div>

<div id="daftar" style="max-width: 500px; margin: 0 auto;">
  <h2>Form Pendaftaran</h2>
  <!-- Isi form pendaftaran -->
</div>

Run HTML

C. Menambahkan Halaman ke Menu Navigasi

1. Kembali ke dashboard Blogger

2. Pilih "Tata Letak" > "Edit" di bagian Menu Navigasi

3. Klik "Tambahkan tautan"

4. Pilih "Halaman" dan pilih halaman yang sudah dibuat

5. Atur urutan menu sesuai keinginan

6. Klik "Simpan"

D. Tips Optimalisasi Halaman Statis

1. Gunakan Shortcode untuk menambahkan elemen khusus

2. Tambahkan CSS Custom di Theme > Edit HTML untuk desain lebih menarik

3. Aktifkan Komentar jika ingin mendapatkan feedback

4. Sisipkan Call-to-Action (tombol, form, dll)

5. Optimasi SEO dengan:

   • Deskripsi penelusuran

   • Kata kunci di judul dan konten

   • Gambar dengan alt text

E. Troubleshooting

Masalah: Halaman tidak muncul di menu
Solusi: Pastikan sudah mempublikasikan halaman dan menambahkannya ke menu navigasi

Masalah: Format tidak sesuai
Solusi: Gunakan mode HTML untuk penyesuaian lebih detail atau tambahkan CSS custom

Dengan mengikuti panduan ini, Anda bisa membuat berbagai halaman statis profesional di Blogger tanpa perlu coding yang rumit. Selamat mencoba!