Buatkan kode lengkap template Blogger (Blogspot) dalam satu file XML utuh yang valid dan siap pakai. Template ini harus mereplikasi tata letak (layout) minimalis modern yang sangat responsif, ringan, dan SEO-friendly sesuai spesifikasi berikut:
1. KARAKTERISTIK UTAMA & SEO:
• Struktur data XML valid sesuai standar terbaru Blogger tanpa eror.
• Tanpa library berat (seperti jQuery atau Bootstrap). Gunakan vanilla CSS murni agar pemuatan super cepat.
• Meta tag esensial untuk SEO, viewport seluler, dan keterbacaan modern sudah terpasang.
1. DESAIN Latar Belakang & Tipografi (CSS):
• Background utama: Pola kotak-kotak transparan warna abu-abu muda lembut (grid pattern) menggunakan CSS linear-gradient.
• Skema warna: Dominan putih murni untuk kartu/konten, abu-abu sangat muda untuk latar belakang, dan aksen warna hijau toska/teal cerah (seperti warna tombol "Go" dan teks judul utama).
• Tipografi: Bersih, menggunakan font sans-serif modern (seperti Inter atau Roboto).
1. HEADER & NAVIGASI:
• Bagian atas kiri menampilkan Logo/Nama Blog (misal: "Banana") dengan ikon minimalis.
• Bagian atas kanan menampilkan menu navigasi horizontal (Home, About, Contact) dan ikon pencarian (Search glass).
1. AREA HERO / INTRO (Hanya Tampil di Beranda):
• Terdapat teks besar tebal berwarna hijau toska untuk judul utama (Contoh: "Ide, Cerita, dan Inspirasi").
• Di bawahnya ada sub-judul deskripsi blog berukuran lebih kecil dengan warna abu-abu gelap.
1. TATA LETAK UTAMA & POSTINGAN (MAIN CONTENT & ASIDE):
• Gunakan struktur layout yang responsif: Di layar desktop, area konten utama berada di sebelah kiri dan Sidebar (Aside) berada di sebelah kanan. Di layar HP (mobile), Sidebar otomatis bergeser turun ke bawah postingan.
• Beranda (Homepage / Index): Postingan tampil dalam bentuk Grid (2 Kolom di desktop). Setiap kartu postingan berlatar putih bersih dengan sudut melengkung halus (rounded corners). Kartu hanya menampilkan Gambar Utama besar (Thumbnail placeholder) di atas, serta Judul Artikel dan baris info kecil (Nama penulis & tanggal) di bagian bawah. Tanpa teks ringkasan (snippet).
• Halaman Artikel (Item Page): Saat postingan dibuka, render artikel secara penuh dengan rapi. Pastikan gambar utama di beranda tidak muncul dobel di dalam isi artikel menggunakan tag kondisional Blogger <b:if cond='data:view.isItem'>.
1. SIDEBAR (ASIDE):
• Terletak di sisi kanan (pada desktop). Berisi elemen-elemen berbentuk kotak putih minimalis dengan sudut melengkung:
◦ Kotak "Tentang": Berisi teks deskripsi singkat profil blog.
◦ Kotak "Arsip": Menampilkan arsip blog berbasis tahun/bulan dengan jumlah artikel di sisi kanan.
◦ Kotak "Newsletter": Berwarna latar hijau muda transparan dengan kolom input email ("email@kamu.com") dan tombol "Go" berwarna hijau toska solid di ujung kanan.
1. FOOTER:
• Terbagi menjadi 3 kolom struktural di layar lebar:
◦ Kolom 1: Branding logo "<Banana/>" dan deskripsi singkat di bawahnya.
◦ Kolom 2: Navigasi vertikal (Home, About, Contact, Privacy).
◦ Kolom 3: Media sosial (Ikon minimalis berbentuk lingkaran untuk platform seperti X, Github, dll).
1. FORMAT OUTPUT:
• Berikan kodenya langsung dalam satu file XML utuh dari <?xml version="1.0" encoding="UTF-8" ?> hingga </html>. Pastikan tag struktur Blogger seperti <b:section> dan <b:widget> sudah terpasang dengan benar di area utama, sidebar, dan footer agar komponen dapat diatur via dasbor tata letak Blogger.
Posting Komentar