Belajar B: Loop dan B:if

Sumber ini diambil dari Google

Untuk membuat tata letak berbeda antara beranda dan halaman postingan di Blogger, Anda perlu mengedit HTML tema Anda. Anda bisa melakukannya dengan masuk ke Dashboard > Tema > Edit HTML. Kemudian, identifikasi kode bagian beranda (biasanya terdapat pada B:loop yang menampilkan postingan blog) dan kode bagian postingan baca (biasanya menggunakan B:if untuk menampilkan postingan lengkap). Anda dapat mengubah atau menambahkan kode CSS di sana untuk mengatur tampilan yang berbeda. 

Berikut adalah langkah-langkah yang lebih detail:

1. Masuk ke Dashboard Blogger: Buka blogger.com dan masuk ke akun Anda.
2. Pilih Blog: Di kiri atas, klik panah bawah dan pilih blog yang ingin Anda atur.
3. Buka Pengaturan Tema: Di menu sebelah kiri, klik "Tema" lalu klik tombol "Edit HTML".
4. Cari Kode HTML:
   • Untuk Beranda (halaman utama): Cari bagian yang menampilkan postingan blog, biasanya dalam tag <b:loop>. Ini adalah area tempat postingan ditampilkan sebagai cuplikan di halaman utama. 
   • Untuk Postingan Baca (halaman tunggal): Cari bagian yang menampilkan postingan lengkap. Anda bisa mencari kode yang mengandung itemprop='blogPost' atau b:if cond='data:blog.url == data:post.url'. Ini akan membawa Anda ke bagian di mana postingan lengkap ditampilkan. 
5. Edit Kode HTML/CSS:
   • Tata Letak Beranda: Untuk tata letak beranda yang berbeda, Anda mungkin perlu mengubah struktur HTML atau menambahkan kelas CSS khusus di dalam loop postingan.
   • Tata Letak Postingan Baca: Anda bisa menambahkan kelas CSS khusus ke elemen-elemen di dalam postingan tunggal untuk menata tampilannya. Contohnya, Anda bisa membuat sebuah div baru dan memberikan kelas CSS tertentu untuk mengatur tata letaknya. 
6. Tambahkan CSS: Setelah menemukan bagian postingan di HTML, Anda bisa menambahkan kode CSS ke dalam bagian <b:skin> atau membuat file CSS terpisah. Gunakan selector CSS yang spesifik untuk menargetkan elemen pada postingan tunggal atau halaman beranda. 
7. Simpan Perubahan: Setelah selesai mengedit, klik ikon simpan untuk menyimpan semua perubahan yang Anda buat pada tema. 

Contoh Skenario: 

• Untuk beranda:

  Anda ingin setiap postingan memiliki gambar besar di bawah judulnya. Di dalam b:loop, Anda bisa menambahkan sebuah div untuk gambarnya.
• Untuk halaman postingan:

  Anda ingin gambar tersebut ditampilkan lebih kecil dan tidak terlalu menonjol. Anda bisa memberikan kelas CSS berbeda pada div yang sama saat berada di halaman postingan tunggal, sehingga tampilannya lebih kecil.