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

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.

View File

Berikut .htaccess WordPress lengkap dengan 9 bagian konfigurasi:

1. WordPress Core — Rewrite rules standar agar permalink bekerja. Wajib ada.

2. Keamanan – Blokir File Sensitif — Melindungi wp-config.php, xmlrpc.php, file log/backup, dan memblokir eksekusi PHP di folder uploads (mencegah shell upload).

3. 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.

4. Kompresi Gzip — Mengecilkan ukuran transfer HTML, CSS, JS, font, dan SVG sebelum dikirim ke browser.

5. Browser Caching — Aset statis (gambar, CSS, JS, font) di-cache hingga 1 tahun. HTML tidak di-cache agar selalu fresh.

6. ETags & Keep-Alive — Menonaktifkan ETag (tidak efisien di shared hosting) dan mengaktifkan koneksi persistent.

7. Redirect HTTPS & www — Template siap pakai, tinggal hapus tanda # sesuai kebutuhan (HTTP→HTTPS, www atau non-www).

8. Batas Upload PHP — Konfigurasi opsional jika hosting mengizinkan override via .htaccess.

9. 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

View File

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

View File

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

1. Self-explanatory — calon murid dan orang tua dapat memahami seluruh proses persiapan tanpa harus bertanya, mengurangi beban kerja staf admin.

2. Mengurangi kesalahan pendaftaran — peringatan eksplisit tentang TKA = 0, pengganti ijazah, dan larangan memilih Jalur Mutasi untuk warga Luwuk.

3. Mudah dipindai (scannable) — pengguna dapat menemukan informasi spesifik dalam <10 detik berkat hierarki visual yang jelas (eyebrow, heading, body, callout).

4. Tampil profesional — tidak terlihat seperti website pemerintah generik bertabur tabel HTML mentah. Memberi kesan sekolah Anda sebagai institusi modern dan terorganisir.

5. 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.

6. Mobile-first ready — Halaman ini diuji responsif penuh tanpa scroll horizontal.

7. Konversi terfokus — satu tujuan utama (klik "Siap Mendaftar") dengan dua titik CTA strategis (atas hero & akhir halaman), tanpa distraksi.

8. 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

1. File SPTJM harus benar-benar di-upload

2. Format nomor WA sudah saya konversi ke 62... — silakan tes klik untuk pastikan terbuka

3. Logo "L" dalam crest saat ini hanya huruf — bisa diganti dengan logo asli sebagai SVG inline

4. Tanggal jadwal SPMB belum dicantumkan (kapan buka, kapan tutup) — bisa ditambah jika sudah ditetapkan

5. Verifikasi daftar wilayah — pastikan kelurahan/desa sudah lengkap dan ejaan benar

Demo: https://spmb.smansaluwuk.sch.id/

Itu saja, semoga bermanfaat!

View File