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

Vulpine UI membawa tampilan web modern ke blog Blogger Anda: hero bergradien ungu, kartu artikel berbayang lembut, dan zona bawah gelap yang elegan. Semua blok, dari pengumuman hingga footer, diatur lewat menu Tata Letak. Tidak perlu mengedit HTML untuk penggunaan sehari-hari.

Yang Anda dapatkan:

• 🌗 Mode gelap: tombol tema, mengikuti setelan perangkat, tanpa kedipan putih

• 🔎 Live search: hasil muncul saat mengetik, lengkap dengan thumbnail

• 📑 Daftar isi otomatis: bersarang, menyorot bagian yang sedang dibaca

• 💡 Infobox kode pendek: ketik [tip], [peringatan], [info] langsung di editor

• ⭐ Lencana Penulis di komentar berutas

• 🔗 Salin tautan bersih tanpa parameter pelacak, plus tombol bagikan ke WhatsApp, Telegram, X, Facebook, LinkedIn

• 📱 Callout kode QR untuk melanjutkan baca di ponsel

• 📰 Bacaan terkait, breadcrumb berlabel, estimasi waktu baca

• 🖼️ Lightbox gambar, tombol salin kode, video dan tabel responsif

• ✉️ Formulir kontak bawaan Blogger, pesan langsung ke surel Anda

• 🚀 Ramah SEO: data terstruktur BlogPosting dan BreadcrumbList

• ♿ Aksesibel: navigasi papan ketik, label ARIA, menghormati "kurangi gerakan"

• 🧩 Tata Letak terorganisir: dasbor dibagi lima zona berlabel jelas

Isi paket: file template (.xml), dokumentasi HTML lengkap berbahasa Indonesia, panduan cepat, postingan contoh, logo dan favicon, tangkapan layar.

Persyaratan: blog Blogger.com (blogspot atau domain sendiri). Bahasa antarmuka: Indonesia.

Lisensi: 1 pembelian = 1 blog. Boleh dimodifikasi, kredit footer boleh dihapus. Dilarang dijual ulang atau dibagikan ulang.

Demo langsung: https://vulpine-ui.blogspot.com

View File

Indigo Studio OS v1.0.0 adalah tema Blogger untuk portofolio dan jurnal personal yang tampil seperti aplikasi media desktop klasik: karya tersusun sebagai tracklist, label menjadi "direktori", dan setiap pos punya kode seperti DES-14.

Tema ini cocok untuk pengembang, desainer, guru, dan penulis modul yang ingin satu blog berfungsi sebagai portofolio sekaligus jurnal. Semua data berasal dari Blogger sendiri: pos, label, komentar, formulir kontak, dan statistik. Tidak ada layanan pihak ketiga yang perlu didaftarkan.

Mockup tampilan

Tata letak menyesuaikan tiga ukuran layar: desktop menampilkan sidebar dan semua kolom, tablet menyembunyikan sidebar di balik tombol Direktori, dan ponsel memprioritaskan judul dan isi artikel. Mockup memakai konten contoh.

Desktop (1440 px): indeks Tracklist dengan sampul karya terpilih di kartu profil, paginasi, dan footer.

Tablet (820 px): Grid Kartu dua kolom bergambar.

Ponsel (390 px): halaman pos dengan penulis, tombol Komentar dan Bagikan; banner profil disembunyikan agar artikel langsung terlihat.

Rincian fitur

Fitur dikelompokkan per area layar; semuanya aktif tanpa plugin tambahan.

Indeks karya

• Tracklist: tabel bernomor dengan kode karya, judul, peran, kategori, tahun, waktu baca, dan jumlah komentar. Klik judul langsung membuka karya; klik bagian lain baris memilih karya dan menampilkan sampulnya.

• Grid Kartu: kartu bergambar dengan ringkasan; gambar diambil dari gambar pertama pos (termasuk gambar eksternal dan thumbnail YouTube).

• Paginasi mengikuti setelan "Jumlah postingan di halaman utama" di gadget Postingan Blog, dengan nomor halaman dan pintasan [ ].

• Tampil instan: daftar pos dari server muncul lebih dulu, lalu diperkaya oleh feed JSON.

• Sampul karya terpilih: di mode Tracklist, kartu profil di sidebar berganti menjadi gambar karya yang dipilih; tombol × mengembalikan profil.

• Direktori Karya (sidebar): semua portofolio, Karya Unggulan, dan label; urutan dan pilihan label diatur dari gadget Label.

• Filter cepat peran dan tahun di bilah alat.

Pencarian tiga lingkup

Menubar dan meter sistem

• Menu Start, Tampilan, Portofolio (semua, unggulan, terbaru, acak, per tahun), Opsi, Navigasi (dari gadget), dan Bantuan.

• Meter sistem di kanan atas, klik untuk berganti: TAYANGAN (gadget Statistik), KOMENTAR (total blog atau pos ini), BACA (progres membaca pos), GAIN (skala huruf).

• Indikator aktivitas (eq) di dok bawah: diam saat tidak ada interaksi, bereaksi saat menggulir, memilih, berpindah halaman, dan memuat feed.

Halaman pos

• Kode karya, kategori, estimasi baca, nama dan avatar penulis, tanggal, label, dan peran utama.

• Tombol Bagikan (menu berbagi bawaan di ponsel) dan baris berbagi: WhatsApp, Telegram, X, Facebook, LinkedIn, Email, Salin Tautan.

• Karya Terkait: 4 kartu berdasarkan label dan peran yang sama.

• Komentar berutas bawaan Blogger dengan tombol Balas dan editor bertema gelap.

• Tipografi artikel: judul bagian bernomor, kutipan, blok kode, tabel yang dapat digulir, gambar yang tidak melebar.

Infobox (sejak v1.1.0)

Enam kotak sorotan untuk isi pos, disisipkan lewat tampilan HTML editor pos.

<div class="infobox tip">
  <div class="infobox-title">Tips</div>
  <p>Isi kotak.</p>
</div>

Kontak dan footer

• Modal Kirim Pesan memakai gadget Formulir Kontak Blogger; pesan masuk ke email pemilik blog.

• Footer berisi tentang, media sosial, navigasi, dan status sistem (jumlah karya, label, pembaruan terakhir, status ketersediaan).

Aksesibilitas dan kinerja

• Ikon inline SVG dalam satu sprite; tanpa pustaka ikon eksternal.

• Kontras warna memenuhi WCAG AA (tombol aktif 5,1:1), navigasi penuh dengan keyboard termasuk menubar, label ARIA pada tombol ikon, dan dukungan reduced motion.

• Opsi tampilan: skala huruf, garis grid kontras tinggi, baris rapat, efek scanline, sembunyikan bilah identitas (logo, nama blog, tagline, status, tombol Kirim Pesan) yang tampil di atas indeks dan pos.

Instalasi

Pemasangan memakan sekitar 10 menit; langkah 3 wajib, karena indeks karya dibaca dari feed blog.

1. Di dasbor Blogger, buka Tema, klik panah di sebelah tombol Sesuaikan, lalu Cadangkan untuk menyimpan tema lama.

2. Pada menu yang sama pilih Pulihkan, lalu unggah indigo-studio-os-v1.1.0.xml.

3. Buka Setelan > Feed situs dan pastikan Izinkan feed blog bernilai Penuh.

4. Buka Tema > Edit HTML, tekan Ctrl+F, cari const CONFIG, lalu isi email, tautan CV, dan blok identity (lihat bagian Konfigurasi). Klik Simpan.

5. Buka Tata Letak dan isi gadget yang tersedia: Navigasi, Direktori Karya, Footer, dan Sumber Statistik.

6. Di gadget Postingan Blog, atur "Jumlah postingan di halaman utama"; angka ini menjadi jumlah karya per halaman indeks.

7. Beri label pada pos sesuai konvensi: label pertama sebagai kategori, Unggulan untuk karya unggulan, dan Peran: … untuk peran.

8. Buka blog, lalu periksa satu pos: nama penulis, tombol Bagikan, Karya Terkait, dan kolom komentar.

Jika Blogger menolak menyimpan tema, tidak ada yang berubah di blog; catat pesan galatnya dan lihat bagian Pemecahan masalah.

Favicon tema sudah aktif lewat baris <link … rel='icon'> di <head>. Untuk memakai favicon sendiri, hapus baris itu di Edit HTML, lalu unggah gambar di Setelan > Favicon, misalnya favicon/favicon.ico dari paket rilis.

Konfigurasi

Tema diatur dari tiga tempat: label setiap pos, gadget di Tata Letak, dan objek CONFIG di Edit HTML.

Konvensi label

Gadget di Tata Letak

Objek CONFIG

Pintasan keyboard

Pintasan aktif di luar kotak isian; tekan ? di blog untuk menampilkan daftar ini.

Pemecahan masalah

Komentar memakai sistem bawaan Blogger, jadi pengaturan moderasi, siapa yang boleh berkomentar, dan notifikasi tetap diatur dari Setelan > Komentar.

Catatan rilis dan batasan

Paket rilis indigo-studio-os-v1.1.0.zip berisi:

Batasan yang diketahui:

• TAYANGAN adalah total tayangan blog dari gadget Statistik; Blogger tidak menyediakan tayangan per pos.

• Indeks memuat paling banyak 450 pos dari feed (maxPosts).

• Nama penulis selalu tampil; sakelar "Tampilkan penulis" di gadget Postingan Blog tidak dibaca.

• Lisensi Komersial: satu pembelian untuk satu blog; menjual ulang atau membagikan berkas tema dilarang (lihat LICENSE.txt).

Mockup memakai konten contoh dan sudah mencerminkan tampilan v1.0.1. Saat memperbarui dari v1.0.0, salin dulu isian CONFIG lama sebelum memulihkan tema baru.

View File

Lihat article selengkapnya

Lihat article selengkapnya

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: https://nitro-blogger-template.blogspot.com/

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