Membangun Template Titik Tumbuh Khazanah: Dari Gagasan hingga Siap Dipublikasikan

Sebuah template blog sebenarnya bukan hanya persoalan warna, font, tombol, dan tata letak. Di balik tampilan yang sederhana terdapat struktur, logika, kompatibilitas, dan banyak keputusan kecil yang menentukan apakah sebuah blog terasa nyaman digunakan atau justru terasa berat dan membingungkan.

Titik Tumbuh Khazanah dibangun dari gagasan sederhana: menciptakan sebuah ruang digital untuk menyimpan gagasan, merawat pengetahuan, mendokumentasikan proyek, dan mencatat perjalanan belajar.

Menumbuhkan Gagasan, Merawat Khazanah.

Sebuah blog tidak harus menjadi besar untuk menjadi berarti. Ia cukup menjadi tempat yang baik untuk menyimpan sesuatu yang layak diingat.

1. Mengapa Membuat Template Sendiri?

Banyak template Blogger sudah tersedia dan dapat langsung digunakan. Namun ketika sebuah blog memiliki identitas dan kebutuhan yang khusus, template generik sering kali tidak cukup.

Titik Tumbuh Khazanah membutuhkan sebuah template yang memiliki beberapa karakter:

• ringan dan cepat dimuat;
• nyaman dibaca pada perangkat mobile;
• memiliki identitas visual yang kuat;
• mendukung HTML di dalam postingan dan halaman;
• tetap menggunakan engine Blogger;
• tidak bergantung pada banyak library eksternal;
• mudah dikembangkan pada masa mendatang.

Dari kebutuhan tersebut, proses pembangunan template dimulai.

2. Menentukan Identitas Visual

Sebelum menulis XML, identitas visual perlu ditentukan terlebih dahulu. Template kemudian dibangun mengikuti identitas tersebut.

Identitas utama Titik Tumbuh Khazanah menggunakan kombinasi:

• Deep Green sebagai warna utama.
• Soft Gold sebagai aksen.
• Warm Cream sebagai latar.
• Tipografi editorial untuk judul.
• Sans-serif yang bersih untuk isi.

Prinsip desain

Visual tidak dibuat untuk sekadar terlihat mewah. Setiap elemen harus mempunyai fungsi: membantu navigasi, memperkuat identitas, atau meningkatkan kenyamanan membaca.

3. Konsep Header

Header menjadi pintu masuk pertama bagi pengunjung. Karena itu, header Titik Tumbuh Khazanah dirancang untuk langsung memperkenalkan identitas blog.

Struktur visualnya terdiri dari:

• monogram TTK;
• nama Titik Tumbuh Khazanah;
• tagline;
• kategori utama;
• ornamen daun;
• aksen garis dan warna gold.

Namun ada satu prinsip teknis yang dijaga: elemen dekoratif tidak boleh membuat template menjadi berat.

Karena itu, ikon dan ornamen diarahkan menggunakan SVG inline dan CSS, bukan bergantung pada banyak gambar eksternal.

4. Membangun Struktur Blogger

Setelah konsep visual ditentukan, tahap berikutnya adalah membangun struktur XML Blogger.

Template harus tetap mengenali struktur inti Blogger seperti:

• Blog1;
• Post;
• Page;
• Label;
• Archive;
• PageList;
• Comments;
• Pagination.

Salah satu bagian yang sangat penting adalah isi postingan. Template tidak boleh mengambil alih isi artikel dengan sistem yang terlalu kompleks.

<div class="post-body">
  <data:post.body/>
</div>

Dengan cara tersebut, Blogger tetap bertanggung jawab terhadap isi postingan sementara template bertanggung jawab terhadap presentasinya.

Prinsip utama

Template mengatur bagaimana konten ditampilkan, bukan menggantikan sistem konten Blogger.

5. Membuat Artikel Mendukung HTML

Salah satu kebutuhan utama Titik Tumbuh Khazanah adalah kemampuan membuat artikel yang lebih kaya daripada paragraf biasa.

Misalnya sebuah artikel dapat menggunakan:

• heading;
• paragraph;
• list;
• blockquote;
• table;
• code block;
• kotak informasi;
• kotak tips;
• kotak peringatan;
• kutipan reflektif.

Contoh sederhana:

<div class="info-box">
  <strong>Catatan</strong>
  <p>
    Ini adalah informasi penting dalam artikel.
  </p>
</div>

Dengan pendekatan ini, HTML artikel tetap sederhana karena styling dikerjakan oleh template.

6. Membangun Knowledge Map

Homepage kemudian diberi sebuah bagian bernama Knowledge Map.

Fungsinya bukan sekadar mempercantik halaman depan, tetapi memberikan jalur awal kepada pembaca untuk menjelajahi isi blog.

Kategori utama yang digunakan adalah:

• Catatan
• Khazanah
• Pendidikan
• Teknologi
• Proyek
• Arsip KMI Al-Mu'awanah

Pada tahap awal, bullet kategori sempat menghasilkan tampilan yang tidak diinginkan karena entity HTML tampil secara literal.

Misalnya:

•

justru terlihat sebagai teks.

Solusinya adalah mengganti pendekatan tersebut dengan pseudo-element CSS atau ikon SVG yang lebih terkendali.

7. Mengatasi Error XML Blogger

Salah satu bagian paling menarik dalam pembangunan template adalah ketika template pertama kali divalidasi oleh Blogger.

Muncul error:

InvalidVariableException

Invalid variable value for background position.

Setelah ditelusuri, masalah bukan berasal dari artikel atau data:post.body, melainkan dari deklarasi variable background Blogger.

Nilai:

top left;

dianggap tidak valid oleh validator Blogger karena tanda titik koma ikut menjadi bagian dari nilai variable.

Kemudian diperbaiki menjadi:

top left

Perubahan kecil tersebut menunjukkan satu hal penting: XML Blogger bukan sekadar XML biasa. Ia mempunyai aturan dan parser khusus yang harus dihormati.

8. Memperbaiki Header dan Footer

Setelah template berhasil melewati validasi, masalah berikutnya terlihat pada tampilan.

Terdapat ruang kosong pada bagian atas dan bagian bawah halaman. Selain itu, elemen bawaan Blogger seperti "Diberdayakan oleh Blogger" masih terlihat.

Pada tahap ini pendekatannya bukan menghapus engine Blogger secara agresif, tetapi memisahkan antara:

• struktur internal Blogger;
• tampilan publik Titik Tumbuh Khazanah.

Elemen native tetap dipertahankan ketika diperlukan untuk kompatibilitas, sementara tampilannya disesuaikan dengan desain TTK.

9. Membuat Footer Editorial

Footer kemudian dikembangkan menjadi bagian dari identitas blog.

Footer terdiri dari beberapa area:

• identitas TTK;
• Jelajahi;
• Tentang;
• Terhubung;
• kutipan;
• copyright.

“Setiap catatan adalah titik kecil yang kelak menjadi jalan.”

Dengan demikian footer bukan lagi sekadar tempat meletakkan copyright, tetapi menjadi penutup perjalanan pembaca di dalam halaman.

10. Membuat Ikon Tetap Ringan

Salah satu godaan ketika membuat template adalah memasukkan library ikon besar seperti framework ikon eksternal.

Untuk Titik Tumbuh Khazanah, pendekatan tersebut sengaja dihindari.

Ikon dapat dibuat menggunakan SVG sederhana.

<svg viewBox="0 0 24 24"
     aria-hidden="true">
  <path d="..." />
</svg>

Keuntungannya:

• tidak perlu request ke server eksternal;
• tidak membutuhkan library ikon;
• dapat diperbesar tanpa pecah;
• mudah diberi warna melalui CSS;
• lebih mudah disesuaikan dengan identitas TTK.

11. Pengujian Mobile

Template yang terlihat bagus pada desktop belum tentu nyaman pada smartphone.

Karena sebagian besar pembaca kemungkinan mengakses blog melalui perangkat mobile, pengujian dilakukan dengan memperhatikan:

• lebar konten;
• ukuran judul;
• jarak antar tombol;
• ukuran font;
• Knowledge Map;
• kartu artikel;
• footer;
• tidak adanya horizontal scrolling.

Prinsip mobile-first

Jika sebuah elemen sulit digunakan dengan satu tangan pada layar smartphone, desain tersebut masih perlu diperbaiki.

12. Perjalanan Versi Template

Template tidak langsung menjadi versi final. Ia berkembang melalui beberapa tahap.

Versi	Fokus
V1.0	Konsep dasar Titik Tumbuh Khazanah
V1.1	Perbaikan struktur dan ruang kosong
V1.3.1	Perbaikan deklarasi CSS dan kompatibilitas
V1.3.2	Perbaikan variable background Blogger
V1.3.3	Header dan footer publik
V1.3.4	Perbaikan bullet Knowledge Map
V1.3.5	Integrasi identitas visual, header, footer, dan ikon

13. Template Bukan Produk Sekali Jadi

Sampai pada tahap ini, template memang sudah dapat diarahkan menjadi template publik.

Namun sebuah template yang baik tidak berhenti ketika XML berhasil disimpan.

Ia harus terus diuji melalui penggunaan nyata.

Artikel pertama mungkin menemukan masalah yang tidak terlihat pada halaman kosong.

Artikel dengan tabel mungkin menemukan masalah lain.

Artikel dengan gambar besar mungkin membutuhkan optimasi berbeda.

Halaman dengan HTML kompleks juga perlu diuji.

Karena itu, publikasi bukan akhir dari pengembangan. Publikasi adalah awal dari tahap pengujian berikutnya.

14. Checklist Sebelum Dipublikasikan

Checklist publikasi Titik Tumbuh Khazanah

• XML template berhasil disimpan di Blogger.
• Homepage dapat dibuka.
• Postingan dapat dibuka.
• Page dapat dibuka.
• HTML dalam postingan bekerja.
• Menu navigasi bekerja.
• Label bekerja.
• Search bekerja.
• Archive bekerja.
• Gambar artikel tampil dengan baik.
• Tampilan mobile tidak terpotong.
• Tidak ada horizontal scrolling.
• Footer tampil dengan baik.
• Link Tentang, Kontak, Sitemap, Privacy, dan Disclaimer diuji.
• Favicon dan identitas blog sudah sesuai.
• Deskripsi blog sudah diatur.
• Deskripsi penelusuran postingan sudah diisi.
• Backup template sudah disimpan.

15. Publikasi

Setelah semua pengujian selesai, tahap terakhir adalah mempublikasikan blog kepada pembaca.

Namun publikasi sebaiknya dilakukan setelah kita memastikan bahwa tiga lapisan utama sudah berjalan:

1. Konten — artikel dan halaman sudah siap.
2. Struktur — navigasi dan sistem Blogger bekerja.
3. Presentasi — desain tampil konsisten pada desktop dan mobile.

Jika ketiganya sudah berjalan, maka template tidak lagi sekadar sebuah desain.

Ia telah menjadi rumah digital.

16. Dari Template Menjadi Khazanah

Pada akhirnya, tujuan pembangunan template ini bukan untuk membuat halaman yang sekadar terlihat indah.

Tujuannya adalah menyediakan tempat yang nyaman untuk menumbuhkan pengetahuan.

Template hanyalah wadah.

Isi sebenarnya adalah perjalanan yang akan terus ditulis: gagasan, pengalaman, pembelajaran, proyek, refleksi, dan berbagai hal yang layak disimpan.

Template adalah rumahnya.

Catatan adalah isinya.

Pertumbuhan adalah perjalanannya.

Penutup

Titik Tumbuh Khazanah dibangun bukan dalam satu langkah. Ia tumbuh melalui serangkaian percobaan, kesalahan, perbaikan, dan pengujian.

Dari sebuah gagasan tentang personal knowledge base, kemudian berkembang menjadi identitas visual, struktur Blogger, sistem artikel HTML, Knowledge Map, header, footer, ikon, dan akhirnya sebuah template yang siap digunakan.

Proses tersebut memberikan satu pelajaran penting:

Sesuatu yang baik tidak selalu lahir dalam sekali jadi.

Ia sering kali tumbuh dari perbaikan-perbaikan kecil yang dilakukan secara konsisten.

Dan mungkin, itulah alasan nama ini dipilih: Titik Tumbuh Khazanah.

Setiap tulisan adalah satu titik. Setiap proyek adalah satu titik. Setiap pengalaman adalah satu titik.

Ketika semuanya dikumpulkan, dihubungkan, dan dirawat, titik-titik tersebut perlahan menjadi sebuah jalan.

---

Catatan proyek: Artikel ini merupakan dokumentasi pengembangan template Blogger Titik Tumbuh Khazanah, mulai dari konsep visual, struktur template, debugging, pengembangan komponen, hingga tahap persiapan publikasi.