Zero


Widget Rapi?
May 27, 2007, 7:30 am
Filed under: Tutorial
Judul Tutorial : Desain Blog bag. 3
Tingkat : Pemula
Lain-lain : Desain blog dengan hosting WordPress

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
d
c
b
a
Contact  dcba

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

d c
b a
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

Isi 1

Isi 2

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

Step 2

Masukkan isi/ konten pada tiap tabel:

Contact

d c
b a

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

Contact

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:

Contact

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:

a 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:

d c
b a

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

Advertisements

10 Comments so far
Leave a comment

Lagi lagi tabel, dikit dikit tabel…!!

lagi-lagi gw yang comment pertamax…
gud job broo….

keep blogging…! 😀

http://warnetforum.com

Comment by takien

Pasti Om dulu… up to date terus ni ngikutin blog gw :p

Comment by Loki Dan

Keep writing, bro!

Kok nggak nulis di http://panduan.wordpress.com ?

Comment by Shan-in Lee

Hwehehe… akhirnya…
Bagus juga nih blog-mu. Sori yah baru sempet berkunjung. Soalnya akihr-akhir ini terkendala koneksi nih 😛

Boleh ku-link kan?

Comment by p4ndu_454kura

hallo dari SMANTI yaa…bagus blognya…kita sealumni hooo..salam kenal yaa…

Comment by Evy

kapan-kapan buat tutorial merapikan widget blogspot ya, soalnya kemarin dulu aku kenalan dengan si blogspot 😀

Comment by Rujak Cingur

bosen juga kan buat tutty…

😀 😀

btw gw kan pernah ngerasain jg..

hiks…

http://warnetforum.com

Comment by imissu

wah, terimakasih atas tutorialnya yah, sangat berguna ^_^

tapi ada satu yg bikin susah, gw ga bakat bikin gamabar buat tombol, tulisan tangan aja udah jelek banget 😦

Comment by btyop

Hmm…begini. Tidak mempermasalahkan soal posisi.

Kalau tipe – tipe macam saya sih. Sebenarnya tipe widgets itu biasanya ada 2 :

1. Match dengan skin
2. Sebaliknya

Ada treatment-nya tidak…?

Comment by Death Berry Ille-Bellisima

Tu kan da match dengan skin. Gw temanya kan Semi Futuristik dengan sedikit semprotan Graffiti. Cek aja di About this Blog.

Comment by Loki Dan




Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s



%d bloggers like this: