Desain-Blog

Hindari Padding pada DIV

2006-06-13T23:16:00.000-07:00

Ya, hindari penggunaan padding (jarak dalam) pada layer (DIV) yang sudah disetel ukurannya. Ingat, pembacaan lebar layer antar-browser tidak selalu sama. Ada yang mengganggap padding jarak dalam layer, ada pula yang membacanya sebagai tambahan lebar layer. Akibatnya, lebar ukuran layer menjadi tidak sama.

Untuk mengakali hal ini, terapkan padding pada teks dalam layer. Teks tersebut bisa dikandangi dengan paragraf (<p></p>)Perlu dicatat, JANGAN MENETAPKAN LEBAR SEBERAPA PUN PADA TEKS TERSEBUT. Tujuannya satu, supaya tak ada penambahan ukuran pada teks itu.

Contoh penerapannya sebagai berikut:

<div style="width:200px;border:1px solid red">
  <p style="padding:5px">
  Ini ibu Budi. Itu bapak Budi. Kakak dan adik Budi mengikuti dari belakang. Di manakah kakek dan nenek Budi?
  </p>
</div>

Hasilnya akan seperti ini:

Ini ibu Budi. Itu bapak Budi. Kakak dan adik Budi mengikuti dari belakang. Di manakah kakek dan nenek Budi?

Menata Galeri Flickr

2006-06-13T23:15:00.000-07:00

Inilah hebatnya CSS. Dalam hal desain web, CSS sangat ampuh dalam menata halaman situs agar tampil rapi, lagi indah. Berbahagialah pula Anda karena kini makin banyak layanan hiasan blog, misal galeri foto, statistik online, dsb... dsb...

Salah satu layanan yang menarik dilanggani adalah Flickr, galeri foto yang kini digaet Yahoo!. Beruntung pula bahwa banyak orang yang mau berbagi ilmu tentang menata galeri Flickr, seperti Kusaeni, Thomas Arie, dan sebagainya.

Di sini, kami paparkan cara mereka menata ulang galeri tersebut. Begini, pada dasarnya, Flickr ditata dalam dalam sebuah layer> yang sudah disetel CSS-nya. Untuk mengubah tampilan galeri Flickr, Anda bisa memanfaatkan layer yang ada, bisa pula membuat layer baru.

Katakanlah Anda ingin menempatkan galeri itu pada layer tersendiri. Maka, Anda perlu membuat kandang untuk Flickr. Caranya seperti berikut:

<div id="flickr">
  Isi galeri Flickr
</div>

Sekarang, Anda tinggal menyusun CSS untuk kandang tadi. Misalnya begini:

#flickr { padding:0 10px }
#flickr img { width: 50px; height: 50px; border:0 }
#flickr a { padding: 5px; display: block; float: left;}
#flickr a:hover { background: #ddd; }

Karena gambar ditata melayang ke kiri (float:left), maka di bagian akhir Flickr mesti ditambahi sebuah pembatas dengan style clear:both atau clear:left. Misal:

<div id="flickr">
  Isi galeri Flickr
  <br style="clear:both"/>
</div>

Hasilnya? Silakan lihat tatanan galeri foto di blog ini.
Nah, selamat mencoba!

Mari Belajar CSS [01-Teori]

2006-06-13T23:14:00.000-07:00

Hayah... apa pula itu CSS? Singkatan dari cengengesan? Yang ngomong gitu pasti ngawur. CSS itu kependekan dari Cascading Style Sheets (CSS). *masih gak mudeng*

CSS adalah format penulisan yang mempresentasikan sebuah dokumen

Begini, pokoknya CSS adalah format penulisan yang mempresentasikan sebuah dokumen. Wah, malah tambah bingung. Ambil satu contoh, misal surat Pak RT kepada warga. Surat itu biasanya terdiri dari kepala surat (kop), isi surat, dan kaki (kayaknya tak ada kata sepadan selain footer :p ).

Nah, tiap bagian surat tadi bisa memiliki format penulisan aksara yang berbeda. Bagian kop misalnya, dicetak tebal. Bagian tubuh, diatur rata kiri. Teks awal paragraf meneluk sekitar 2 cm dari pojok kiri. Bagian kaki, tulisan diatur rata tengah, dengan huruf lebih kecil. Loh, itu kan hal biasa?

Betul, memang biasa. Sederhana. Namun, bayangkan usaha ketika Pak RT harus menulis banyak surat dengan format yang sama. *Gampang, tinggal copy/paste, ganti teks, lantas simpan dengan nama file berbeda* Itu memang lebih mudah. Masalahnya, cara itu tak menjamin ukuran file situs jadi enteng. Apalagi kalau tiap file dibikin secara individual.

Nah, dalam pembuatan web, CSS berperan mengatur style tiap halaman. Agar ukurannya tetap ringan, CSS dibuat pada bagian terpisah. Penggunaannya bisa dilakukan berulang-ulang pada setiap bagian. Misal, huruf tebal bisa diterapkan pada judul, kata penting, atau bagian lain yang perlu ditebalkan.

Untuk sementara itu dulu penjelasan soal CSS. Abis, yang nulis malah bingung sendiri sih :((

Ayo, Hias Blog-mu

2006-06-13T23:13:00.000-07:00

Desain blog menggunakan template? Hasilnya memang bisa bagus, tapi... itu mah biasa. Semua orang juga bisa. Tinggal pilih mana yang disuka, jadilah.

Membosankan. Kalau mau apik, sekaligus unik, buatlah desain sendiri. Bikinan pribadi. Orang lain boleh iri.

Tengoklah situs Didats, sang "buaya CSS" yang selalu berkupluk itu. Atau, bertandanglah ke Depok, tempat Mas Priyadi bermukim. Kurang puas? Mari belajar dari situs luar negeri. Stop Design, Mezzo Blue, atau Mandarin Design dapat dijadikan tempat acuan. Intinya, ada banyak jalan ke Roma...hayah...

Cara paling gampang bisa dilakukan dengan menyontek ragam desain web siap pakai di Taman Zen. Situs pengumpul web ber-CSS juga patut disambangi, antara lain CSS Import, CSS Beauty, CSS Drive, CSS Mania, CSS Vault, Style Gala, dan sebagainya.

Profil Desain Blog

2006-02-05T21:51:00.000-08:00

Kami sengaja membuat situs ini, sebagai media untuk memberikan pengetahuan soal merancang web, terutama blog. Bagi pemula, sesulit-sulitnya belajar HTML dan CSS, pasti ada cara gampang untuk menguasai semua pengodean itu.
Nah, mulai sekarang (dan semoga sampai nanti), kami bakal rutin mengisi blog ini. Anda lah pembaca kami, yang ingin mempelajari pembuatan situs secara sederhana, tapi mujarab.
Nantinya, jika Anda sudah mahir, kami mohon Anda untuk menyiarkan hasil karya Anda kepada blogger lain. Nah, selamat menikmati blog ini.