Zero

Pendahuluan

Blog desain? Hmm… kayaknya sudah banyak yang jago deh… Namun masih ada mungkin yang bingung dan kurang menguasai tag HTML, sehingga Blog mereka terkesan kaku. So… dalam pembahasan kali ini akan saya ulas sedikit tips dan trik untuk mempercantik Blog temen temen, khususnya pengguna hosting WordPress yang sangat minim sekali memberi kebebasan masalah desain.

Bab I
Manfaatkan Tabel

Mengapa harus tabel? Ya, karena untuk desain web (maupun blog) fungsi tabel sangatlah fatal. Kita tidak membahas mengenai web (rumit ntar) namun blog, nah para blogger pengguna WordPress pasti tahu di saat mengedit post tidak ada fasilitas tentang tabel. Emank buat apa se? Nah, mari saya beri contoh… Lihat teks di bawah:

Nama : Loki Dan
Alamat e-mail : loki_dan7[at]yahoo[dot]co[dot]id
Id YM! : loki_dan7

Trus apa yang salah dengan tulisan di atas? Perhatikan baikbaik, agaknya tulisan tersebut akan terlihat lebih rapi jika dimasukkan ke dalam tabel, contoh:

Lebih menarik untuk dibaca bukan? Hmmm boleh boleh, gmana caranya? Ok, langsung aja yaph…

A.1. Cara Manual

Kalo temen temen ga punya editor web (Dreamweaver, Evrsoft First Page, dll) hanya bermodalkan “Notepad” bawaan Windows bisa koq. Ini contoh tag HTML nya

<table>
<tr>
<td>Nama</td>
<td>: Loki Dan </td>
</tr>
<tr>
<td>Alamat e-mail </td>
<td>: loki_dan7[at]yahoo[dot]co[dot]id</td>
</tr>
<tr>
<td>Id YM! </td>
<td>: loki_dan7</td>
</tr>
</table>

Binguuung…. kalo ga ngerti tag HTML emank bingung, tp ni gw beri penjelasan dikit…

Gimana, uda lumayan jelas kan dengan cara manual? Lanjuuutt….

A.2. Dengan Editor

Nah skarang bagi yang punya Dreamweaver. Knapa Dreamweaver? Karena editor ini yang paling umum dan lengkap masalah website editing. Langsung aja yah…

Step 1

Click tombol “table”, lihat gambar.

Lalu masukkan data:

Rows	: untuk menambah julah baris (seperti <tr&gt
Columns	: menambah jumlah kolom (<td&gt
Table width	: untuk panjang tabel*
Border thickness	: untuk memberi border, untuk manual bisa ditambahkan di dalam table (<table border=”0″&gt
Cell padding	: memberi jarak antara tabel dengan tulisan, untuk tag HTML nya di dalam tag tabel (<table cellpadding=”0″>
Cell spacing	: memberi jarak antara kolom dengan kolom, tag HTML di dalam tag tabel (<table cellspacing=”0″&gt

*saya tidak menyarankan menggunakan “table width” untuk pengguna WordPress, karena dapat menimbulkan error, yaitu hasil yang tidak sesuai dengan keinginan (acak-acakan). Biarkan browser yang menyesuaikan lebar tabel tersebut.

Step 2

Isikan tulisan apa yang mau ditaruh di tabel.

Step 3

Beres…. ^^

Lalu bagaimana menaruhnya dalam blog kita? Sabar… ni gw lanjutin

B. Copy Paste ke Blog

Copy paste… hhmm… ada kontroversi? Wekekeke… ini kan “copy paste” yang lain ceritanya ^^
untuk copy paste dengan cara “A.1.” dapat langsung di copy ke post editor bawaan WordPress, jangan lupa, ditaruh di menu “code” jangan “visual” ^^
Untuk pengguna cara “A.2.” code bisa diambil di tab “code” (lihat gambar

<– keliatan kan yang namanya “tab code”?  nah setelah itu copy code yang dimulai dari <table> sampai </table>

Huuuff…. beres de mengenai tabel….

Bab II
Gambar Dalam Tabel

Ini aku jadikan satu posting, karena masi ada hubungannya dengan tabel. Ngapain c make gambar dalam tabel segala? Seperti judul “Desain Blog bag. 1″ jadi ya untuk memperindah blog kita. Mari kita lihat contoh kasus ini:

My Photo

yang tadinya mau ngasi tau kalo “Itu tu foto gue”, jadi nya malah kliatan kaya’ header :p bagus sih bagus, namun coba bandingan dengan ini:

Lebih enak dilihat yang bawah bukan? Iya yah… ajarin donk… Ok ok, gw juga ga suka lama lama ^^ langsung aja, tariiiiikkk….

Step 1

Cara tersebut di atas sama halnya dengan membuat tabel (baca Bab I), jadi saya hanya menambahkan sedikit saja cara untuk menaruh gambarnya

Jadi pertama siapkan dulu tabelnya, minimal 2 kolom (satu untuk gambar, satu lagi untuk tulisan).

Step 2

Nah, di kolom kiri sisipkan gambar. yah seperti menyisipkan gampar untuk posting biasa…

Step 3

taruh tulisan di kolom kanan. Smua pasti bisa dooonk…

Step 4

Jadi to? Gmana, keren? Kalo kurang keren masuk ke bagian selanjutnya “Pengerenan Gambar Dalam Tabel” ^^

A. Gunakan Tag Vertical Align

Biasanya sih jadinya tulisan ga seperti yang kita harapkan. Contoh:

Nama: bla bla Kelas: bla bla No. Absen: bla bla *emank mau nulis lembar jawab ujian?

Pengen tulisan jadi rapi seperti ini:

Nama: bla bla Kelas: bla bla No. Absen: bla bla *emank mau nulis lembar jawab ujian?

Atur aja “Vertical Align” dalam tabel…

Step 1

Sudah siap kan mana yang mau di “make over” tabelnya? :p

Step 2

Di bagian kolom kanan sisipkan tag valign dalam tag <td> (baca Bab I)

<td valign="top">

*tag tersebut dapat diisi:

Step 3

Beres….

Penutup

Gampang banget kan? jelas lah, emank tingkat tutorial ini untuk pemula ^^ Ok de sekian dulu tutorial pertama gw. Saran, Kritik, dan Komentarnya yah…

ttd.
Loki Dan