Halaman Utama dan Halaman Baca

Data ini diambil dari Google 

Untuk membuat tata letak postingan berbeda untuk halaman utama dan halaman baca di Blogger, Anda bisa menggunakan CSS khusus untuk tag atau ID tertentu di template Anda. Caranya adalah dengan mengedit HTML template Blogger, mencari div dengan kelas untuk halaman utama (.main atau .Blog) dan halaman baca (.post), lalu menambahkan kode CSS untuk membedakan tampilannya. 

Berikut langkah-langkahnya:

1. Masuk ke Dashboard Blogger: Anda, pilih blog yang ingin diubah, lalu pergi ke menu Tema. 
2. Klik Sesuaikan dan kemudian Edit HTML. 
3. Cari bagian ]]></b:skin> atau </head> di dalam kode HTML template Anda. 
4. Masukkan kode CSS khusus: setelah kode tersebut untuk membedakan tampilan halaman utama dan halaman posting.
   • Untuk Halaman Utama (Beranda):

Kode

        /* Tata Letak Halaman Utama (Beranda) */
        .main {
          /* Atur gaya untuk beranda, misalnya kolom atau lebar */
        }

Untuk Halaman Baca (Single Post).

Kode

        /* Tata Letak Halaman Baca (Single Post) */
        .post {
          /* Atur gaya untuk halaman baca, misalnya tata letak yang berbeda */
        }

1. 1. Cari elemen spesifik

   di dalam <div class='post hentry'> untuk halaman baca atau div lain yang sesuai untuk halaman utama di dalam template Anda.
2. 2. Tambahkan gaya CSS

   seperti warna latar belakang, ukuran font, atau kolom yang berbeda pada kelas tersebut.
3. 3. Simpan template

   Anda dan periksa tampilan blog Anda di beranda dan halaman posting untuk melihat perbedaannya. 

Contoh Penggunaan CSS:

Mengubah Warna Latar Belakang.

Kode

    .main {
      background-color: #f0f0f0; /* Latar belakang abu-abu untuk beranda */
    }

    .post {
      background-color: #ffffff; /* Latar belakang putih untuk postingan */
    }

Mengubah Tata Letak Kolom.

Kode

    .main {
      display: flex; /* Menggunakan Flexbox untuk tata letak beranda */
      flex-wrap: wrap;
    }

    .post {
      width: 70%; /* Kolom lebih lebar untuk halaman baca */
      float: left;
      margin-right: 20px;
    }

Tips Penting:

• Gunakan kelas CSS yang ada di tema Anda

  agar lebih mudah diterapkan. Anda bisa memeriksa kode HTML tema Anda untuk menemukan nama-nama kelas yang relevan, seperti .main, .post-outer, atau .post-body.
• Gunakan Pratinjau

  untuk melihat perubahan sebelum mempublikasikannya agar tidak mengacaukan tampilan blog Anda.