Kira-kira enam bulan setelah melakukan migrasi ke danielnugroho.com, kami melakukan perubahan pada home page/ halaman utama website. Halaman utama yang dulunya masih berupa potongan-potongan artikel blog digantikan dengan halaman utama yang baru, dengan tampilan yang lebih ofisial. Ada juga gambar-gambar yang mewakili sub-sub tema yang ada, yang dapat membantu teman-teman dalam membaca website kami.

Proses transformasi ke home page baru tidak semudah yang saya bayangkan. Perlu 2 hari kerja, sekitar 16 jam untuk melakukan perubahan. Transformasi halaman ini sebenarnya sudah lama kami rencanakan, dari sekitar bulan Januari lalu. Saya sudah mulai menambahkan beberapa script dan css, memasukkan slider (gambar yang bisa berubah-ubah setiap waktu), tulisan artikel terbaru (recent post), dan tulisan artikel terkait (related post). Saya juga menambahkan ajax menu (yang mirip menu bersusun di windows) dan multi tab (menu bersusun). Namun pekerjaan harus terhenti sejenak karena saya kembali ke Indonesia untuk berlibur selama satu bulan.

Barulah setelah kembali ke Jepang, saya memulai proses transformasi ke home page baru ini. Saya fokus dalam pembuatan script dan css. Dan akhirnya pada tanggal 5 April 2013, 3 tahun setelah blog ini mulai dibuat, kami memiliki home page baru. Semuanya hanya berkat Tuhan saja.

Pada artikel kali ini, saya ingin menuliskan proses membuat ke static home page untuk blogger dari awal hingga selesai. Artikel ini bisa menjadi informasi tambahan bagi teman-teman. Silahkan membaca.

1. Membuat format baru untuk static page

Static home page untuk blogger dimulai dari membuat sebuah page dalam blogger yang nantinya akan dijadikan home page. Home page itu adalah halaman utama blog atau website dan biasanya muncul dengan tampilan berbeda dari post lainnya di blogger. Namun dalam mode default, biasanya menu di sebelah kiri dan kanan pasti muncul dan mengganggu ketika ingin membuat sebuah home page. Oleh karena itu langkah pertama adalah menghilangkan menu di kiri kanan dan membuat format baru pada page.

Caranya bisa teman-teman baca di sini: membuat format baru untuk static home page
Kalau teman-teman sukses mengikuti langkah-langkahnya, teman-teman akan mendapati sebuah page dengan format yang berbeda. Page dengan lebar penuh tanpa ada menu di sidebar, header, atau footer. Ini langkah awal membuat static home page untuk blogger.

2. Membuat page berformat 4 kolom

Awalnya saya membuat 4 kolom dengan cara konvensional, yakni dengan menggunakan property <table>. Membagi baris jadi bagian kiri dan kanan, lalu yang kanan dibagi dua lagi, dan dibagi dua lagi. Hasilnya memang jadi 4 kolom, namun susunan kolomnya kurang rapi. Dalam penyuntingan juga sulit, karena harus mengecek script yang kompleks dan memakan waktu jadinya. Untuk itu saya menganjurkan untuk membuat 4 kolom dengan menggunakan css (cascading style sheet) document. Cara ini jauh lebih mudah dan praktis. Teman-teman tidak perlu membuang waktu percuma untuk mengecek script satu per satu.

Caranya dapat teman-teman baca di sini: membuat page berformat 4 kolom. Ketika sudah terbuka page-nya, teman-teman bisa klik kanan pada halaman itu dan pilih inspect element / properties untuk melihat bagaimana cara membuat kolom.

Recommended for you