Indigo Studio Blogger Template

55 menit lalu55 mnt

Indigo Studio Blogger Template

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

Lingkup	Perilaku
Di Blog Ini	Menyaring indeks secara langsung; di halaman pos muncul saran karya
Di Halaman Ini	Menyorot semua temuan; Enter dan Shift+Enter berpindah temuan
Di Web	Membuka pencarian Google di tab baru

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.

Kelas	Warna	Kegunaan
`info`	Indigo	Keterangan umum
`tip`	Hijau toska	Saran dan trik
`warning`	Kuning	Hal yang perlu diperhatikan
`danger`	Merah	Risiko atau langkah wajib
`success`	Hijau	Konfirmasi hasil
`download`	Indigo	Tautan unduhan dengan tombol `.infobox-btn` dan keterangan `.infobox-meta`

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

Di dasbor Blogger, buka Tema, klik panah di sebelah tombol Sesuaikan, lalu Cadangkan untuk menyimpan tema lama.
Pada menu yang sama pilih Pulihkan, lalu unggah indigo-studio-os-v1.1.0.xml.
Buka Setelan > Feed situs dan pastikan Izinkan feed blog bernilai Penuh.
Buka Tema > Edit HTML, tekan Ctrl+F, cari const CONFIG, lalu isi email, tautan CV, dan blok identity (lihat bagian Konfigurasi). Klik Simpan.
Buka Tata Letak dan isi gadget yang tersedia: Navigasi, Direktori Karya, Footer, dan Sumber Statistik.
Di gadget Postingan Blog, atur "Jumlah postingan di halaman utama"; angka ini menjadi jumlah karya per halaman indeks.
Beri label pada pos sesuai konvensi: label pertama sebagai kategori, Unggulan untuk karya unggulan, dan Peran: … untuk peran.
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

Label	Fungsi	Contoh
Label pertama	Kategori; menentukan kode karya dan Karya Terkait	`Desain Antarmuka` → `DES-14`
`Unggulan`	Masuk ke Karya Unggulan dan diberi bintang	`Unggulan`
`Peran: …`	Mengisi kolom Peran & Spesialisasi dan filter cepat	`Peran: Full-Stack`

Gadget di Tata Letak

Kotak	Gadget	Fungsi	Jika kosong atau dihapus
Menu Navigasi (Menubar)	Daftar Link	Menu dropdown di menubar; judul gadget menjadi nama menu	Menu tidak tampil
Direktori Karya (Label)	Label	Urutan (abjad/frekuensi), label yang tampil, angka jumlah, judul panel	Semua label otomatis
Gadget Sidebar	bebas	Tempat gadget tambahan	—
Konten Utama	Postingan Blog	Pos, halaman, komentar, jumlah pos per halaman	Wajib, terkunci
Footer: Tentang	Teks	Tagline footer	Tagline bawaan
Footer: Media Sosial	Daftar Link	Tombol sosial footer	Isi `CONFIG.social`
Footer: Navigasi	Daftar Link	Kolom navigasi footer; judul gadget menjadi judul kolom	Tautan bawaan
Sumber Statistik	Statistik	Angka TAYANGAN di meter; rentang waktu diatur di sini	Mode TAYANGAN hilang
Sumber Formulir Kontak	Formulir Kontak	Pengirim pesan modal Kirim Pesan	Cadangan `mailto:`

Objek CONFIG

Kunci	Bawaan	Fungsi
`email`	`email-anda@contoh.com`	Email cadangan yang tampil di modal kontak
`cvUrl`	kosong	Tautan PDF CV untuk tombol Unduh CV Ringkas
`social`	kosong	Tautan sosial cadangan bila gadget Media Sosial kosong
`identity.coverTitle`	judul blog	Bingkai atas sampul profil
`identity.coverWord`	`KARYA`	Kata besar di sampul (maks. sekitar 8 huruf)
`identity.coverEdition`	`EDISI PORTOFOLIO <tahun>`	Baris kecil sampul
`identity.bio`	teks contoh	Bio di kartu profil
`identity.heroTag`, `identity.tagline`	teks contoh	Label dan subjudul banner
`identity.status`	`Terbuka untuk Proyek Baru`	Status ketersediaan; kosongkan untuk menyembunyikan
`featuredLabel`	`Unggulan`	Nama label karya unggulan
`rolePrefix`	`Peran:`	Awalan label peran
`relatedCount`	`4`	Jumlah Karya Terkait; `0` menonaktifkan
`perPage`	`0`	`0` mengikuti gadget Postingan Blog; angka lain memaksa jumlah per halaman
`maxPosts`	`450`	Batas pos yang dimuat dari feed
`wordsPerMinute`	`200`	Kecepatan baca untuk estimasi
`codeMap`	5 contoh	Kode singkat per kategori; selain itu memakai 3 huruf pertama

Pintasan keyboard

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

Tombol	Aksi
`↑` / `↓`	Pilih karya sebelumnya atau berikutnya (berpindah halaman otomatis)
`Enter`	Buka karya terpilih
Klik judul	Buka karya langsung
Klik baris	Pilih karya dan tampilkan sampulnya (klik lagi: buka)
`[` / `]` atau PgUp / PgDn	Halaman indeks sebelumnya atau berikutnya
Tab ke menubar, lalu `↓`	Buka menu; `↑` `↓` Home End memilih, `←` `→` pindah menu, `Esc` menutup
`/`	Fokus ke kotak pencarian
`Enter` di kotak cari	Jalankan pencarian sesuai lingkup
`Shift` + `Enter`	Temuan sebelumnya (lingkup Di Halaman Ini)
`Esc`	Bersihkan pencarian, tutup menu, atau kembali ke indeks
`F7`	Tampilkan atau sembunyikan panel direktori
`F8`	Garis grid kontras tinggi
`F9`	Kerapatan baris (compact)
`?`	Buka bantuan pintasan

Pemecahan masalah

Gejala	Penyebab	Solusi
Indeks kosong atau "Feed tidak dapat dimuat"	Feed situs tidak Penuh	Setelan > Feed situs > Izinkan feed blog: Penuh
Gadget atau pos tidak tampil sama sekali	Tema diubah sehingga tidak ada section dengan "Tambahkan Gadget"	Jangan ubah `showaddelement='yes'` pada section Gadget Sidebar
Formulir kontak tidak mengirim	Gadget Formulir Kontak dihapus	Pulihkan gadget di kotak Sumber Formulir Kontak; tanpa gadget, modal memakai `mailto:`
TAYANGAN tampil "…" lalu hilang	Gadget Statistik dihapus atau tidak memberi angka	Tambahkan gadget Statistik ke kotak Sumber Statistik
Jumlah pos per halaman tidak sesuai	`perPage` diisi angka	Kembalikan `perPage: 0` agar mengikuti gadget Postingan Blog
Thumbnail grid tidak muncul	Pos tanpa gambar, atau gambar SVG/piksel pelacak	Sisipkan gambar JPG/PNG di awal pos
Label tidak muncul di Direktori	Gadget Label disetel "Label yang dipilih"	Ubah ke "Semua label" atau centang label yang diinginkan
Blogger menolak menyimpan tema	Ada tag XML yang rusak setelah disunting	Pulihkan berkas asli dari paket rilis, lalu ulangi perubahan

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

Catatan rilis dan batasan

Tanggal	Versi	Ringkasan
28 Oktober 2026	1.1.0	Komponen infobox (info, tip, warning, danger, success, download) dan penetapan Lisensi Komersial
28 Oktober 2026	1.0.1	Kontras AA, skala tipografi 8 langkah, navigasi keyboard menubar dan tracklist, klik judul langsung membuka karya, bio dan tombol kontak selalu terlihat, kotak cari gelap, tata letak ponsel satu baris, istilah seragam
27 Oktober 2026	1.0.0	Rilis publik pertama: indeks Tracklist/Grid, pencarian tiga lingkup, meter sistem, penulis, berbagi, Karya Terkait, gadget Tata Letak

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

Berkas	Isi
`indigo-studio-os-v1.1.0.xml`	Berkas tema
`README.md`	Ringkasan, mulai cepat, contoh infobox
`CHANGELOG.md`	Catatan rilis v1.1.0, v1.0.1, dan v1.0.0
`LICENSE.txt`	Lisensi Komersial (Indonesia dan Inggris)
`mockup/`	1 komposit, 5 tangkapan layar perangkat, 1 contoh infobox
`favicon/`	Favicon SVG, ICO (16/32/48 px), dan PNG 32, 180, 192, 512 px

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.

File Information

Submitter Lalu

Submitted 10/28/2026

Category Files

View File

Kutip

Indigo Studio Blogger Template

Featured Replies

Indigo Studio Blogger Template

Mockup tampilan

Rincian fitur

Pencarian tiga lingkup

Menubar dan meter sistem

Halaman pos

Infobox (sejak v1.1.0)

Kontak dan footer

Aksesibilitas dan kinerja

Instalasi

Konfigurasi

Konvensi label

Gadget di Tata Letak

Objek CONFIG

Pintasan keyboard

Pemecahan masalah

Catatan rilis dan batasan

Ayo ikut diskusi

Account

Navigation

Cari

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)