2.2 Blok Beranda, Sidebar, Footer, dan Artikel Terkait

Setelah bagian atas rapi, isi bagian tengah dan samping. Anda akan membuat blok berita per kategori, daftar di sidebar dan footer, artikel terkait, ikon sosial, dan formulir langganan email.

Dalam Materi Ini

1. 1Blok artikel beranda
2. 2Sidebar dan footer
3. 3Artikel terkait
4. 4Ikon media sosial
5. 5Formulir langganan email

Blok Artikel Beranda

Blok beranda adalah deretan artikel dari satu label, misalnya Berita Utama atau Pengumuman. Anda boleh memakai beberapa blok sekaligus.

Letakkan diTata Letak → Kartu Berita 3 Kolom (maksimal 4 gadget, paling cocok untuk grid) atau Content Section 1 (di atas daftar artikel utama) atau Content Section 2 (di bawahnya)

Menampilkan kumpulan artikel dari satu label sebagai blok di beranda. Judul gadget menjadi judul blok, dan tautan Lihat semua muncul otomatis bila label diisi.

Gambar 7. Memilih nilai $type sesuai bentuk tampilan yang diinginkan.

Kode siap tempel

{getPosts} $results={5} $label={Berita} $type={block1}

{getPosts} $results={5} $label={Berita} $type={block2}

{getPosts} $results={4} $label={Berita} $type={list1}

{getPosts} $results={6} $label={Berita} $type={grid2}

{getPosts} $results={4} $label={Pengumuman} $type={col-left}
{getPosts} $results={4} $label={Prestasi} $type={col-right}

{getPosts} $results={5} $label={Video} $type={video}

Langkah

1. Tambahkan gadget HTML/JavaScript di salah satu bagian di atas.
2. Isi Judul (misalnya Berita Utama) dan tempel satu kode di Konten, lalu Simpan.
3. Untuk dua blok berdampingan, buat dua gadget berurutan di bagian yang sama: yang pertama col-left, yang kedua col-right.

Arti tiap bagian kode

Bagian	Artinya
block1	Satu artikel besar plus daftar kecil (isi 5).
block2	Satu artikel besar plus kisi dua kolom.
list1	Daftar: gambar kecil di kiri, judul dan ringkasan di kanan.
grid1, grid2	Kisi kartu. grid2 adalah bawaan, gambarnya lebih tinggi. Isi 3 atau 6.
col-left, col-right	Dua blok setengah lebar berdampingan.
video	Untuk label video. $style={2} memakai latar biasa, tanpa itu latar gelap.
$results, $label	Jumlah artikel (bawaan 3) dan sumbernya (bawaan recent).

Gambar 1. block1

Gambar 2. block2

Gambar 3. list1

Gambar 4. grid2

Gambar 5. col-left dan col-right

Gambar 6. video (style bawaan)

Sidebar dan Footer

Sidebar dan footer berisi daftar pendek di kolom samping dan bagian bawah halaman.

Letakkan diTata Letak → Sidebar, atau Footer Left, Footer Center, Footer Right (masing-masing maksimal 3 gadget)

Menampilkan artikel (atau komentar terbaru) dalam kolom sempit. Cocok untuk Terbaru, Populer, atau Komentar Terbaru.

Kode siap tempel

{getPosts} $results={5} $label={recent} $style={2}

{getPosts} $results={5} $type={comments}

Langkah

1. Tambahkan gadget HTML/JavaScript di Sidebar atau kolom footer.
2. Isi Judul (misalnya Terbaru), tempel kode, lalu Simpan.
3. $results wajib diisi di bagian ini.

Arti tiap bagian kode

Bagian	Artinya
$style={1}	Satu artikel besar plus daftar.
$style={2}	Daftar dengan gambar kecil.
$style={3}	Kartu kecil dua kolom.
$type={comments}	Komentar terbaru. Tidak memakai $label.
Footer	Di footer, style 1 otomatis dipakai sebagai style 2.

Gambar 8. style 1

Gambar 9. style 2

Gambar 10. style 3

Gambar 11. Komentar terbaru

Artikel Terkait

Artikel terkait muncul di bawah tulisan supaya pembaca terus membaca.

Letakkan diTata Letak → Related Posts (1 gadget) → gadget HTML/JavaScript

Menampilkan artikel berlabel sama di bawah tulisan, untuk membuat pembaca membuka halaman lain. Artikel yang sedang dibuka tidak ikut ditampilkan. Hanya terlihat di halaman artikel.

Kode siap tempel

{getPosts} $results={3} $style={1}

Langkah

1. Isi Judul gadget dengan teks bagian, misalnya Baca Juga.
2. Tempel kode di Konten, lalu Simpan.

Arti tiap bagian kode

Bagian	Artinya
$results	Jumlah artikel (3 atau 4 cocok).
$style={1}	Kisi kartu.
$style={2}	Kisi kecil.
$style={3}	Daftar.

Gambar 12. style 1

Gambar 13. style 2

Gambar 14. style 3

Ikon Media Sosial

Ikon sosial dibuat dari daftar link biasa: Anda cukup mengisi nama dan alamat.

Letakkan diTata Letak → Topbar, Sidebar, Footer Left/Center/Right, atau About Section → gadget Daftar Link (Link List)

Mengubah daftar link biasa menjadi deretan ikon media sosial.

Kode siap tempel

Nama: getSocial     URL: #

Nama: facebook      URL: https://facebook.com/akun-anda

Nama: instagram     URL: https://instagram.com/akun-anda

Langkah

1. Tambahkan gadget Daftar Link di salah satu bagian di atas.
2. Tambah link pertama dengan Nama getSocial dan URL #. Ini penanda wajib dan tidak ditampilkan.
3. Tambah link berikutnya: Nama diisi nama ikon, URL diisi alamat profil Anda. Simpan.

Arti tiap bagian kode

Bagian	Artinya
Nama ikon	facebook, twitter, instagram, youtube, whatsapp, telegram, tiktok, linkedin, pinterest, github, email, rss, share
Teks di Sidebar	Tambahkan #Teks di akhir URL, misalnya https://facebook.com/akun#Facebook, agar tulisan tampil di samping ikon.

Formulir Langganan Email

Formulir ini mengumpulkan email pembaca lewat Mailchimp.

Letakkan diTata Letak → Sidebar atau Footer → gadget HTML/JavaScript

Menampilkan kolom email dan tombol berlangganan yang mengirim data ke Mailchimp.

Kode siap tempel

Judul gadget:  {getMailchimp} $title={Berlangganan} $text={Dapatkan berita terbaru di email Anda}

Konten gadget:  https://alamat-aksi-form-mailchimp

Langkah

1. Di Mailchimp, buka Embedded form dan salin alamat pada atribut action milik form.
2. Di Blogger, tulis kode di kolom Judul dan tempel alamat tadi saja di kolom Konten. Simpan.

Arti tiap bagian kode

Bagian	Artinya
$title	Judul formulir. Bila kosong dipakai teks bawaan.
$text	Kalimat penjelas di bawah judul.

LatihanBuat satu blok block1 untuk label utama blog Anda, satu daftar side2 di Sidebar, dan satu Related Posts. Pastikan nama label sama persis dengan di Blogger.