Files

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
Aspek
Keterangan
Platform
Blogger (layout v3, widget v2)
Ukuran tema
±105 KB, CSS dan JavaScript tertanam
Pustaka pihak ketiga
Tidak ada (tanpa jQuery)
Tampilan
Responsif untuk ponsel, tablet, dan desktop
Mode warna
Terang, Gelap, dan Sistem
Bahasa antarmuka
Indonesia
Isi paket
Tema, konten demo (12 artikel + 2 halaman), 12 thumbnail, logo dan favicon, pratinjau, panduan
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/

Berhenti launching website sambil deg-degan takut ada yang kelupaan. Semua yang kamu butuh untuk merilis website cepat & siap-SEO — dalam satu spreadsheet.
Setiap mau launching website rasanya sama: belasan tab kebuka, ratusan hal harus diingat, dan tetap khawatir ada yang terlewat. Toolkit ini mengganti semua itu dengan satu file rapi.
File ini menuntun kamu langkah demi langkah: mulai dari hosting & keamanan, tema & desain, on-page dan technical SEO, copywriting yang menjual, sampai pengecekan akhir sebelum go-live. Tinggal ubah status tiap item ke ✅ Done, dan dashboard-nya otomatis menghitung progresmu. Tanpa plugin, tanpa login, langsung pakai.
Mau untuk website sendiri atau garapan klien, ini checklist yang bakal kamu pakai ulang di setiap proyek.
Isi paket:
✅ 6 checklist, 110+ item — Domain & Hosting, Tema & Desain, On-Page SEO, Technical SEO, Copywriting, dan QA Pra-Launch
📊 Dashboard otomatis — progress bar tiap bagian, update sendiri saat kamu mengisi
🎯 Label prioritas (High / Med / Low) biar tahu mana yang dikerjakan duluan
💡 Tips pakar — arahkan kursor ke tiap item untuk baca catatan singkat
✍️ Bonus: Swipe File Rumus Copywriting — AIDA, PAS, BAB, template headline, bank CTA & power words
🔁 Bisa dipakai berkali-kali — gandakan untuk tiap website baru
Bisa pakai di Excel, Google Sheets & LibreOffice. Download instan, tanpa plugin.
Cocok untuk: freelancer, web designer, agensi, blogger, pemilik UMKM, dan siapa pun yang mau launching website tanpa ada yang terlewat.

Berikut .htaccess WordPress lengkap dengan 9 bagian konfigurasi:
WordPress Core — Rewrite rules standar agar permalink bekerja. Wajib ada.
Keamanan – Blokir File Sensitif — Melindungi wp-config.php, xmlrpc.php, file log/backup, dan memblokir eksekusi PHP di folder uploads (mencegah shell upload).
Keamanan – Proteksi Serangan — Blokir bot/scanner berbahaya, SQL Injection, XSS, dan akses langsung ke wp-includes. Juga menambahkan security headers seperti X-Frame-Options, X-Content-Type-Options, dan Permissions-Policy.
Kompresi Gzip — Mengecilkan ukuran transfer HTML, CSS, JS, font, dan SVG sebelum dikirim ke browser.
Browser Caching — Aset statis (gambar, CSS, JS, font) di-cache hingga 1 tahun. HTML tidak di-cache agar selalu fresh.
ETags & Keep-Alive — Menonaktifkan ETag (tidak efisien di shared hosting) dan mengaktifkan koneksi persistent.
Redirect HTTPS & www — Template siap pakai, tinggal hapus tanda # sesuai kebutuhan (HTTP→HTTPS, www atau non-www).
Batas Upload PHP — Konfigurasi opsional jika hosting mengizinkan override via .htaccess.
Error Page Kustom — Template redirect ke halaman error buatan sendiri.
Hal yang perlu disesuaikan:
HTTPS redirect → hapus tanda # di bagian [7] jika sudah pasang SSL
Blokir wp-login.php → isi IP Anda di bagian [2] untuk keamanan ekstra
xmlrpc.php → aktifkan blokir jika tidak pakai Jetpack atau aplikasi mobile WordPress
PHP limits → aktifkan bagian [8] jika perlu upload file besar

Nitro adalah tema Blogger bergaya reader / dokumentasi dengan tata letak tiga kolom: sidebar navigasi gelap di kiri, daftar artikel (Daftar Isi) di tengah, dan area baca yang lapang di kanan. Dirancang untuk blog informasi dan panduan yang mengutamakan keterbacaan, kecepatan, dan navigasi yang mulus. Dikembangkan oleh Lalu Abd. Rahman.
Fitur dan kelebihannya:
Tata letak 3 kolom adaptif — sidebar, daftar isi, dan konten yang menyusut rapi menjadi satu kolom di perangkat seluler, lengkap dengan menu hamburger dan overlay.
Mode Terang & Gelap — sakelar tema di topbar dengan preferensi tersimpan otomatis di perangkat pengunjung.
Panel sticky — sidebar, daftar artikel, dan blok widget kanan tetap diam saat konten digulir, sehingga navigasi selalu terjangkau.
Daftar Isi otomatis — TOC di dalam pos dibuat dari heading H2/H3 dengan smooth scroll, ditambah estimasi waktu baca dan penanda tanggal terbit/diperbarui.
Pencarian instan — filter artikel sisi-klien yang langsung menyaring daftar tanpa memuat ulang halaman.
Widget kaya — kartu profil penulis, postingan populer bernomor, dan statistik blog (total pos, komentar, tayangan) yang ditarik dari feed Blogger.
Typografi premium — keluarga IBM Plex (Sans, Serif, Mono, Arabic) untuk antarmuka, badan tulisan, kode, dan teks RTL.
Performa & efisiensi — daftar artikel pada halaman pos dibatasi 30 entri terbaru, komentar dimuat lazy lewat IntersectionObserver, dan thumbnail rusak disembunyikan otomatis.
SEO terintegrasi — Open Graph, Twitter Card, kanonik, serta data terstruktur JSON-LD (WebSite + BlogPosting) agar tampilan berbagi dan hasil pencarian lebih kaya.
Sentuhan detail — breadcrumb dinamis, scrollbar tipis seragam di semua peramban, halaman 404 dan kontak khusus, serta gaya lengkap untuk tabel, kutipan, blok kode, kotak info/peringatan, dan tombol.
Demo

Halaman landing satu-page (single-page) bergaya editorial-modern yang berfungsi sebagai gerbang persiapan sebelum calon murid menuju portal pendaftaran resmi di halaman khusus. Halaman ini tidak menangani pendaftaran—fungsinya adalah memastikan calon murid dan orang tua memahami persyaratan, menyiapkan dokumen yang benar, dan memilih jalur yang tepat sebelum mengisi formulir online.
Filosofi Desain
Estetika "Editorial Akademik Modern" — perpaduan antara kesan resmi-institusional (cocok untuk lembaga pendidikan negeri) dengan tampilan kontemporer yang tidak terkesan birokratis.
Palet warna:
Ink (#0a1628) — biru tua nyaris hitam, memberikan kesan otoritas
Paper (#f5f1e8) — krem hangat seperti kertas berkualitas, jauh dari rasa "website pemerintah generik"
Gold (#c9a449) — emas tua sebagai aksen, simbol prestise akademik
Crimson (#8b2635) — merah tua untuk peringatan penting (Notice Luwuk)
Tipografi tiga lapis:
Fraunces (serif) — untuk judul, memberikan bobot dan karakter
Inter Tight (sans-serif) — untuk body text, optimal untuk keterbacaan
JetBrains Mono (monospace) — untuk label kecil dan eyebrow, kesan teknis-modern
Struktur & Konten (8 Bagian)
1. Header Sticky
Logo bulat dengan inisial "L", nama sekolah, dan navigasi cepat ke 4 bagian. Tetap menempel di atas saat di-scroll dengan efek blur backdrop.
2. Hero Section
Judul besar "Selamat datang, calon murid baru." dengan kata "datang" dalam italic emas
Stempel sirkular berputar di sisi kanan menampilkan "Anno MMXXVI · 04 Jalur Pendaftaran"
Teks SVG melingkar yang berputar 360° setiap 40 detik
Tombol CTA utama "Siap Mendaftar" dengan shadow emas yang bergerak saat hover
3. Penting Diperhatikan (latar gelap)
Grid 6 kartu informatif di latar biru tua:
WA Aktif (Orang Tua)
Unduh SPTJM (Word + PDF)
Nilai TKA
Pengganti Ijazah
Aturan 1 Jalur
Bantuan
Background memiliki teks raksasa "PERHATIAN" miring sebagai dekorasi subtil
4. Notice Khusus Luwuk
Banner crimson yang mencolok mengingatkan calon murid berdomisili di kecamatan Luwuk untuk tidak memilih Jalur Mutasi, dengan opsi alternatif yang jelas.
5. Penjelasan Jalur (Interaktif)
Sistem tab switcher untuk 4 jalur:
Domisili — dilengkapi blok Cakupan Wilayah dengan 42 kelurahan/desa dari 4 kecamatan dalam format pill/badge
Afirmasi — keluarga ekonomi tidak mampu + disabilitas
Prestasi — akademik & non-akademik
Mutasi — pindah tugas ortu + anak guru
Tab aktif mendapat latar gelap dengan animasi fade-in saat berpindah.
6. Persyaratan Umum
Dua kolom: Persyaratan dasar usia & ijazah, plus pengecualian (disabilitas, daerah 3T, dsb.).
7. Layanan Informasi
Badge "Jam Layanan · Senin–Jum'at · 08.00–15.00 WITA"
3 kartu kontak WhatsApp dengan efek hover (mengangkat + bayangan emas)
Tautan langsung ke wa.me yang membuka WhatsApp di perangkat
8. Final CTA + Footer
Section gelap dengan tombol emas raksasa "SIAP MENDAFTAR" sebagai konversi utama
Footer dengan kredit IT Admin
Fitur Teknis
Interaktivitas
Tab switcher untuk 4 jalur (vanilla JavaScript, tanpa library)
Smooth scroll untuk navigasi anchor
IntersectionObserver untuk reveal-on-scroll
Animasi rotasi stempel menggunakan CSS keyframes
Responsif Mobile
Breakpoint pada 900px (hero grid jadi 1 kolom)
Breakpoint pada 700px (tab jalur jadi 2 kolom, cakupan jadi 1 kolom)
Breakpoint pada 600px (padding berkurang, badge jam jadi vertikal)
Pertahanan overflow horizontal global: html { overflow-x: hidden }, body { max-width: 100vw }
Aksesibilitas
Semantic HTML — <header>, <section>, <nav>, <footer> yang benar
Contrast ratio memenuhi WCAG AA pada semua kombinasi teks/latar
Focus states pada tombol dan link
Tautan eksternal menggunakan target="_blank" rel="noopener"
Bahasa dokumen ditandai <html lang="id">
Performa
File tunggal — semua CSS dan JS inline dalam satu HTML
Tanpa framework — tidak butuh React, Vue, atau library JS
Tanpa gambar — semua visual menggunakan CSS dan SVG inline
Font dari Google Fonts dengan preconnect untuk loading cepat
Ukuran file ±42 KB (sangat ringan)
Tidak butuh backend — bisa di-host di mana saja (cukup folder statis), di Blogger (Blogspot) juga bisa
Detail Visual yang Membedakan
Tekstur kertas dari repeating-linear-gradient halus
Radial gradient ambient di sudut-sudut halaman
Pseudo-element raksasa sebagai dekorasi background (PERHATIAN, tanda seru)
Shadow ofset emas pada CTA — bukan shadow soft generik, melainkan kotak emas tegas yang bergerak
Pill bertanda KEL/DESA untuk membedakan jenis wilayah administratif
Keunggulan Utama
Self-explanatory — calon murid dan orang tua dapat memahami seluruh proses persiapan tanpa harus bertanya, mengurangi beban kerja staf admin.
Mengurangi kesalahan pendaftaran — peringatan eksplisit tentang TKA = 0, pengganti ijazah, dan larangan memilih Jalur Mutasi untuk warga Luwuk.
Mudah dipindai (scannable) — pengguna dapat menemukan informasi spesifik dalam <10 detik berkat hierarki visual yang jelas (eyebrow, heading, body, callout).
Tampil profesional — tidak terlihat seperti website pemerintah generik bertabur tabel HTML mentah. Memberi kesan sekolah Anda sebagai institusi modern dan terorganisir.
Mudah dipelihara — semua konten dalam HTML murni. IT admin dapat memperbarui nama kontak, jam layanan, atau menambah wilayah dengan editor teks biasa, tanpa CMS atau build tools.
Mobile-first ready — Halaman ini diuji responsif penuh tanpa scroll horizontal.
Konversi terfokus — satu tujuan utama (klik "Siap Mendaftar") dengan dua titik CTA strategis (atas hero & akhir halaman), tanpa distraksi.
Tahan revisi — struktur modular dengan komentar <!-- BAGIAN --> memudahkan pencarian dan penggantian konten di masa depan.
Kebutuhan Hosting
Web server statis apa pun: GitHub Pages, Cloudflare Pages, Netlify, Vercel (gratis), hosting cPanel sekolah, atau Blogger
Hanya 1 file HTML + 2 file SPTJM (.docx & .pdf bisa Anda unggah di Google Drive)
HTTPS wajib (semua platform yang disebut di atas memberikan gratis)
Yang Perlu Anda Konfirmasi / Siapkan
File SPTJM harus benar-benar di-upload
Format nomor WA sudah saya konversi ke 62... — silakan tes klik untuk pastikan terbuka
Logo "L" dalam crest saat ini hanya huruf — bisa diganti dengan logo asli sebagai SVG inline
Tanggal jadwal SPMB belum dicantumkan (kapan buka, kapan tutup) — bisa ditambah jika sudah ditetapkan
Verifikasi daftar wilayah — pastikan kelurahan/desa sudah lengkap dan ejaan benar
Demo: https://spmb.smansaluwuk.sch.id/
Itu saja, semoga bermanfaat!