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