Dynamic Layout (Ala Lady)

Posted on 21 September 2007

8


Peristiwa kacaubalaunya blog ini yang berdampak pada berubahnya layout, membuat saya yang tadinya benar2 ga paham seluk beluk kode2 html pada template, sekarang jadi sedikit tau siasat membuat tampilan blog bisa fleksibel sesuai resolusi layar monitor yang sedang digunakan.

Kalo template sebelumnya selalu pake width 780/800 untuk ukuran (background) header, body, dan footer, sehingga bila dibuka pada resolusi monitor yang lebih tinggi, tampilan akan mengumpul di tengah dan menyisakan ruang kosong pada kanan kirinya, bahkan kadang condong ke kiri sehingga bagian kanan kosong. Sedangkan bila menggunakan template ukuran width 980/1024, terbuka pada monitor yang resolusinya rendah, akan sedikit repot dengan menggeser2 scroll ke kanan dan kiri.

Dengan bonek (bondo nekat) saya mencoba ngoprek2 kodenya. Bila berhasil syukur, bila ga berhasil innalilahi deh.. alias akan kembali pake template bawaan blogger aja, daripada fusinkk..

Saya mengganti ukuran lebar sidebar dan lainnya dengan menggunakan persen (%) bukan pixel (px). Bila menemukan ukuran lebar terbesar, biasanya pada body, header dan footer, misal width: 980px; maka saya hilangkan. Saya mencoba preview sebelum melakukan save template. Juga saya coba preview pada monitor resolusi tinggi untuk melihat apakah tampilan blog tidak mengumpul di tengah, keinginan saya tampilan haruslah dinamis/fleksibel. Bila sesuai harapan, maka langsung save template.

Untuk blog yang mempunyai gambar pada headernya, memang dilema bila menggunakan ukuran paling panjang (misal 1280px). Untuk itu silakan aja memakai ukuran standard (800 px) dan lebih manis kalo diberi background dengan warna senada. Sehingga bila pada resolusi tinggi, gambar ga akan muncul kecil di tengah sedangkan yang lainnya dinamis. Gambar akan tetap sesuai ukuran (tidak ikut memanjang), tapi dengan bantuan warna background yang senada, akan menjadikan gambar keliatan dinamis.

Kenapa bernafsu ingin layout yang dinamis? Ya lebih nyaman dilihat aja bila dibuka di berbagai resolusi layar monitor. Meski mungkin layout dan perpaduan warna belum sempurna namun ga perlu lagi menggeser2 scroll ato mengerutkan dahi bila tampilan mengecil. Ingin sempurna? Apa sih di dunia ini yang sempurna? Ga ada kan? Tapi berusaha menjadi lebih baik boleh kan, meski dengan cara yang amat sederhana

Ternyata keisengan kali ini selain membawa petaka (karena mengorbankan energi, waktu) juga membawa hikmah (dengan menemukan hal baru) Oya, bila hobi ngoprek2 layout, jangan lupa selalu menyimpan kodenya (kopas) sebelum dibedah

Berminat menjadi dokter bedah template?


gambar header pada resolusi layar 800×600

gambar header pada resolusi layar 1024×768

Posted in: Weblog