Desain Blog

Cara Mencari Source Code

2006-08-30T00:32:00.000+07:00

Apa boleh bikin, banyak permintaan tertuju kepada kami untuk memperlihatkan source code format penulisan (CSS) blog ini. Kami memang sengaja tak menampilkannya di sini sebab kode tersebut bisa dilihat oleh siapapun. Tak terkecuali Anda.

Anda bisa dengan mudah membuka skrip HTML situs ini lewat menu [View] [View Source] di browser Anda. Selainnya, tekan [Ctrl] + [F] dan carilah dengan kata kunci .css. Anda dapat melihat hasilnya pada gambar berikut

Nah, kini Anda tinggal menyalin alamat URL di belakang href=" dan bukalah dalam web browser. Selanjutnya, salin isi CSS tersebut dan pelajarilah. Mudah, bukan?

Ingat, jika Anda menyalin isi CSS, cantumkan kreditasi pembuat CSS.

Bosan Blog? Cicipi CMS

2006-07-31T16:53:00.000+07:00

Bosan dengan layanan blog? Cobalah sewalah domain dan hosting, lantas salinlah mesin blog di bawah ini. Inilah yang disebut CMS (Content Management System), mesin yang memudahkan Anda mengelola situs.

WordPress
pMachine
MovableType
TextPattern
BlogCMS
Serendipity
Nucleus
Geeklog
LifeType
LoudBlog (semacam sound blog atau podcast)

Ralat Situs

2006-07-11T16:53:00.000+07:00

Jika Anda telah membeli buku "Trik Mempercantik Blog", cobalah buka halaman 109. Pada bahasan situs 3daysafter.net tertulis situs lain milik Rian Triharyana dengan alamat ~~www.rtrihatna.com~~. Yang benar seharusnya www.rtriharyana.com.

Demikian pula situs Deny Sri Supriyono, seharusnya deepblue.indika.net.id, bukan ~~deepblu.indika.net.id~~.

Alternatif Peta

2006-07-11T15:00:00.000+07:00

Blog ini memakai layanan Feedmap untuk memperlihatkan keterkaitan dengan blog lain dalam rupa peta. Jika Anda ingin menampilkan peta saja, tanpa memperlihatkan blog tetangga, cobalah Wikimapia.

Dari situs itu, coba cari lokasi Anda. Pada lokasi dan posisi zoom yang pas, klik menu [Wikimapia] [Map on your page]. Ketika muncul petak pada peta, ubah ukurannya sesuai bidang penempatan peta dalam blog. Salin tulisan <iframe> hingga </iframe> di atasnya. Selanjutnya, Anda tinggal menempelkan kode tersebut ke dalam blog. Contoh jadinya seperti berikut:

Menyoal Buku "Trik Mempercantik Blog"

2006-07-11T14:08:00.000+07:00

Terima kasih. Banyak pengunjung mengunjungi blog ini. Percayalah, kami selalu berusaha memberikan yang terbaik untuk Anda. Setiap pertanyaan Anda akan kami jawab. Tentu, kami sudah menyediakan media khusus untuk itu. Silakan kirim pertanyaan ke e-mail kami.
Yang pasti, semua panduan dalam buku Trik Mempercantik Blog sudah kami praktikkan sebelumnya. Mohon maaf jika semua panduan itu terasa panjang dan melelahkan. Toh tak semua isinya harus diterapkan sebab justru bikin sumpek blog. Silakan pilih mana bagian yang paling Anda suka.
Semua panduan tersebut juga dapat Anda bikin dari aplikasi editor web apapun. Dreamweaver, Front Page, bahkan Notepad pun dapat Anda pakai asal Anda memahami konsep HTML.

Sideblog Menghilang?

2006-06-08T11:08:00.000+07:00

Waduh, payah nih. Mulai tanggal 5 Juni kemarin, layanan Sideblog.com lenyap dari peredaran. Ketika situsnya di akses, yang muncul justru tulisan yang menyatakan bahwa domain situs itu sudah kedaluwarsa. Ampun, deh..

Pembaca yang budiman *halah*, maafkan kami jika ternyata layanan "embel-embel" blog itu tak tampil di situs ini. Maklumilah bila subjudul "Siaran Anyar" di kolom tengah menjadi kosong melompong. Kami segera mencarikan penggantinya deh. Salaaamm...ciaaoooo.

Tipografi

2006-06-01T10:32:00.000+07:00

Mengatur ukuran, jenis, serta pewarnaan huruf sangat penting ketika mendesain web. Dengan mempelajari tipografi, Anda dapat membuat pengunjung menjadi lebih nyaman membaca blog. Situs www.mollio.org bisa Anda jadikan acuan.
Silakan juga merujuk ke situs Typophile untuk mendapatkan beberapa link terkait dengan tipografi.

Hindari Padding pada DIV

2006-05-30T10:34: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. Akibarnya, 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-05-17T10:26: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-04-16T10:23: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-04-08T10:23: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 DesainBlog

2006-03-16T10:18:00.000+07: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.