Record The Journey and Thoughts

Friday 21 September 2007

Dynamic Layout (Ala Lady)


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 800x600


gambar header pada resolusi layar 1024x768


8 Comments:

  1. blognya mbak keren ni aku juga sebenarnya pingin utak atik layout kayak punya mbak tapi gak ada
    waktu bgt mbak.... ntar aku bolehkan tanyak2 mbak kalo mau ngerubah layout

    ReplyDelete
  2. wahhh asik nih..ntar kalo ada masalah dengan utak-atik layout..tanya lady elen aja dahhh...pasti beres dahhhh ;)

    ReplyDelete

  3. @didiet: halah biasa aja diet :) insyaallah dijawab kok pertanyaannya :)

    @mrbam: halah, dikau kan masternya :P

    ReplyDelete
  4. Hobi koq gonta ganti layout :p
    hehehe..
    Kalo aku memperbaiki yg ada aja udah susah.

    ReplyDelete
  5. mbak L'd emang TOP aBis
    kapan2 konsultasi layout yah ^^v

    ReplyDelete

  6. @agam: bukan hobi, lagi..
    lbh tepat keisengan :P

    @ale: halah, jd konsultan? :D

    ReplyDelete
  7. ini ada adsensenya gmn sih caranya di app, dah daftarin malah di reject terus

    ReplyDelete

Silakan isi kolom komentar dengan mencantumkan ID Anda
(Twitter, FB, IG, eMAIL). Terimakasih