Laras Blogger Template

Laras Blogger Template

Laras adalah tema Blogger berbahasa Indonesia untuk blog editorial, jurnal pribadi, media komunitas, dan situs sekolah atau lembaga yang mengutamakan tulisan. Seluruh proporsinya disusun dengan rasio emas (φ ≈ 1,618), sesuai namanya: laras berarti selaras.

Ringkasan

1. Desain “Selaras” berbasis rasio emas

• Sorotan beranda 61,8 : 38,2. Satu artikel utama dan empat artikel pendamping. Kedua kolom selalu rata bawah, berapa pun panjang judul artikel utama.

• Gambar 1,618 : 1 di semua kartu artikel, sehingga thumbnail tampil seragam dan proporsional.

• Area utama dan sidebar berbanding φ² : 1.

• Skala huruf berjenjang √φ (17 → 21,6 → 27,5 → 44,5 → 72 px) dengan jarak baris 1,618.

• Jarak antar-elemen mengikuti deret Fibonacci (8, 13, 21, 34, 55, 89 px).

• Spiral emas di pengantar beranda, dibentuk dari kotak-kotak Fibonacci dan tergambar sekali saat halaman dibuka.

• Tipografi editorial: Newsreader untuk judul dan isi artikel, Schibsted Grotesk untuk menu dan keterangan. Jika font gagal dimuat, tema otomatis memakai Georgia dan font sistem.

• Palet: teal Laras, aksen kuningan, dan latar putih kehijauan yang lembut di mata.

2. Mode terang, gelap, dan sistem

• Pembaca memilih Terang, Gelap, atau Sistem lewat tombol di header.

• Pilihan tersimpan di browser dan langsung berlaku sejak halaman mulai dimuat, tanpa kedipan warna.

• Mode Sistem mengikuti pengaturan perangkat, termasuk ketika pengaturan itu berubah saat halaman terbuka.

• Pilihan tersinkron di semua tab yang terbuka. Warna bilah browser di ponsel ikut menyesuaikan.

3. Beranda

• Pengantar beranda dengan kalimat pembuka besar dan deskripsi. Isinya bisa diubah dari Tata Letak.

• Sorotan lima artikel terbaru.

• Artikel terbaru dalam dua kolom, dengan navigasi ke halaman berikutnya.

• Blok kategori tanpa batas jumlah. Setiap blok menampilkan artikel dari satu label:

• dimuat saat mendekati layar, agar beranda tetap cepat

• tanpa duplikat: blok melewati artikel yang sudah tampil di bagian atas

• menampilkan tombol “Coba lagi” bila koneksi gagal

• Sidebar: artikel populer bernomor, daftar topik dengan jumlah artikel, dan kotak catatan editorial.

• Jumlah komentar tampil di setiap kartu artikel.

4. Halaman artikel

• Daftar isi otomatis dari subjudul. Bagian yang sedang dibaca ikut ditandai, dan daftar isi bisa dilipat.

• Estimasi waktu baca dan bilah kemajuan membaca di bagian atas layar.

• Breadcrumb Beranda → Kategori → Artikel.

• Meta artikel: penulis, tanggal terbit, waktu baca, dan jumlah komentar yang dapat diklik ke diskusi.

• Tombol berbagi: bagikan lewat menu bawaan ponsel, salin tautan, dan WhatsApp.

• Artikel terkait dari label yang sama, tanpa duplikat dan tanpa artikel yang sedang dibuka.

• Blok kode dengan tombol “Salin kode”.

• Tabel lebar otomatis dapat digeser di ponsel.

• Tombol kembali ke atas.

• Tampilan cetak yang bersih: menu, sidebar, dan komentar disembunyikan saat dicetak.

5. Komentar

• Memakai komentar berutas asli Blogger: login, moderasi, dan notifikasi tetap dikelola Blogger.

• Tombol Balasan membuka dan menutup utas, lengkap dengan jumlah balasan.

• Tombol Tulis komentar langsung membuka formulir komentar utama.

• Tautan admin seperti “Hapus” hanya terlihat oleh pemilik blog.

6. Pencarian instan

• Kotak pencarian terbuka tanpa pindah halaman, dengan pintasan keyboard / atau Ctrl/⌘ + K.

• Hasil cepat muncul saat mengetik, dan kata kunci disorot pada judul serta cuplikan.

• Tekan Enter untuk hasil lengkap. Kata kunci juga disorot di halaman hasil pencarian.

• Di ponsel, tombol pencarian ada di dalam menu.

7. Halaman siap pakai

• Kontak: cukup buat halaman berisi <div id="laras-contact"></div>. Formulir Kontak asli Blogger muncul otomatis tanpa memasang gadget, dan pesan masuk ke email pemilik blog.

• 404 (tidak ditemukan): kotak pencarian, tombol kembali, tombol halaman sebelumnya, dan tiga artikel terbaru.

• Halaman statis (Tentang, Privasi, dan sebagainya) dengan daftar isi otomatis.

8. SEO

• Judul tab yang tepat untuk beranda, artikel, label, arsip, pencarian, dan 404.

• Satu H1 per halaman. Di beranda, H1-nya adalah nama blog.

• noindex, follow untuk halaman pencarian, arsip tanggal, dan 404.

• Data terstruktur JSON-LD:

• WebSite di beranda

• BlogPosting (judul, deskripsi, gambar, penulis, kategori, tanggal, jumlah komentar)

• BreadcrumbList

• Open Graph dan Twitter Card untuk pratinjau di media sosial dan aplikasi chat.

• Canonical, feed, dan sitemap tetap memakai sistem bawaan Blogger.

9. Kinerja

• Tanpa jQuery dan tanpa pustaka pihak ketiga.

• Gambar kartu dimuat bertahap (lazy-load) dan berukuran tetap, sehingga tata letak tidak bergeser.

• Permintaan feed digabung dan disimpan sementara selama lima menit.

• Skrip inti (tema dan pencarian) terpisah dari skrip lain, jadi tetap berfungsi walau ada kode gadget lain yang bermasalah.

10. Aksesibilitas

• Tautan “Langsung ke konten” untuk pengguna keyboard dan pembaca layar.

• Semua tombol dapat dioperasikan dengan keyboard, dengan penanda fokus yang jelas.

• Label dan status ARIA pada menu, tema, pencarian, daftar isi, dan komentar.

• Animasi otomatis nonaktif bila pengunjung mengaktifkan “kurangi gerakan” di perangkatnya.

• Kontras warna dijaga di mode terang maupun gelap.

11. Kustomisasi tanpa kode

• Warna aksen dan latar lewat Tema → Sesuaikan.

• Logo: pakai simbol bawaan dengan judul teks, atau unggah logo sendiri.

• 10 bagian Tata Letak yang diberi nomor: identitas, menu, pengantar, iklan atas, artikel, blok kategori, sidebar, iklan bawah, tautan footer, dan formulir kontak.

• Dua slot iklan (atas dan bawah) untuk AdSense atau kode HTML.

12. Isi paket

• tema/laras-v1.2.0.xml: berkas tema

• demo/laras-demo-id.xml: 12 artikel dan halaman Kontak serta Tentang (draf)

• demo/thumbnail/: 12 ilustrasi 1200×800 untuk artikel demo

• aset/: logo (SVG dan PNG), ikon, favicon

• pratinjau/: gambar pratinjau dan sampul

• dokumentasi/: FITUR, PANDUAN (MD dan HTML), CHANGELOG, LISENSI

Fitur yang bergantung pada Blogger (komentar, Formulir Kontak, feed, artikel populer) mengikuti ketersediaan layanan Blogger. Pencarian cepat, blok kategori, dan artikel terkait membutuhkan feed blog yang aktif dan publik.

Langsung lihat demonya:

https://laras-demo.lalu.pro/

View File