Zero

Pendahuluan

Tutorial ke-3 tentang desain blog, lagi-lagi saya nulisnya malem, jadi agak ngantuk ^^ Untuk pembahasan kali ini saya khususkan untuk mendesain Widget/ Sidebar pada WordPress. Setelah sekian kali blog walking, saya sering melihat blog teman-teman WordPresser yang jago banget masalah desain (desainnya bagus-bagus) namun saat dipasang di sidebar terkesan kacaw dan tidak beraturan, sangat disayangkan desain mahakarya seperti itu “nempel” di sidebar dengan tak beraturan. Bagi yang belum menguasai tentang pembuatan tabel, mohon baca tutorial ke 1, “Desain Blog bag. 1“. Mari kita mulai pembahasan kita kali ini…

Bab IVTabel Juga Untuk SidebarLagi lagi tabel, dikit dikit tabel…!! Jangan protes dulu… memang dalam acara mendesain web maupun blog, tabel memang sangat penting saya kira. Slicing image pada banner² serta header web juga menggunakan prinsip tabel, jadi tabel memang sangat amat berguna di kalangan desain, khususnya web/ blog.

Kali ini tabel untuk sidebar. Apa gunanya? Secara garis besar ya untuk merapikan, seperti biasa. Lihat contoh berikut:

Contact	Contact
A	B

Dalam contoh A image langsung di sisipkan dengan begitu saja hanya memakai tag <br> (shift + enter), dalam contoh B, lebih parah lagi, image langsung disisipkan begitu saja tanpa modif apapun. Lihat contoh C berikut:

Contact	Gimana, terasa bukan bedanya? Mari kita ulas bagaimana cara merapikan sidebar seperti contoh C berikut.
C

A. Pergunakan Tabel Sebagai Kanvas

Maksudnya adalah, sisipkan gambar atau apapun yang ingin ditaruh di sidebar dalam sebuah tabel, untuk hasil yang lebih optimal. Seperti contoh berikut:

Step 1

Buatlah 2 baris tabel

Pada baris Isi 1 dapat diisi judul, misalkan contact, menu, dll…

Step 2

Masukkan isi/ konten pada tiap tabel:

Contact

Pada baris Isi 2 tersebut dimasukkan lagi tabel dengan 2 baris 2 kolom. Ini sketsa lebih jelasnya:

Setelah ini tinggal Merapikan isi didalam tabel.

B. Atur Cellpad dan Cellspace

Untuk memberi kesan supaya tidak terlalu rapat, cellpad dan cell space harus diatur. Seperti ini:

Dalam hal ini yang saya beri cellspace adalah tabel pada Isi 2. Untuk bagaimana memberi cellspace maupun cellpad adalah sebagai berikut:

Sisipkan tag “cellpad” atau “cellspace” pada tag table.

<table cellpadding="0" cellspacing="5">atau ini screen shoot pada dreamweaver:

Terlihat kan mana kolom cellpad dan cellspace?

Dah, ini sudah cukup memberi bantuan apabila kalian mencoba kreatif dan mempunyai konsep yang kuat dapat kalian kembangkan sendiri. Seperti ini:

Contoh Menu	Contoh Contact	Variasi Lain

Bisa sesuai selera kan dalam mendesain widget kita? Sehingga widget/ sidebar jadi lebih cantik, tidak kaku dan dapat diatur sesuai keinginan kita.

Penutup

Mudah bukan dalam pembahasan kali ini? Agak sedikit tidak sistematis memang. Maklum lah, saya sendiri juga bingung harus memulai darimana dalam membahas.

ttd.

Loki Dan