Zero


Percantik Blogmu!
May 22, 2007, 1:44 pm
Filed under: Teknologi Informasi, Tutorial
Judul Tutorial : Desain Blog bag. 1
Tingkat : Pemula
Lain-lain : Blog Design dengan hosting WordPress

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:

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

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…

<table> : digunakan untuk memulai membuat tabel
<tr> : untuk menambah baris
<td> : untuk menambah kolom, liat kan di bawah tag <tr> terdapat dua tag <td> maksudnya dam satu baris itu ada 2 kolom yaitu isinya “Nama” dan “: Loki Dan”

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.
1

Lalu masukkan data:
2

Rows : untuk menambah julah baris (seperti <tr>)
Columns : menambah jumlah kolom (<td>)
Table width : untuk panjang tabel*
Border thickness : untuk memberi border, untuk manual bisa ditambahkan di dalam table (<table border=”0″>)
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″>)

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

contoh
My Photo

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

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:

contoh
My Photo

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

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:

qelgf Nama: bla bla
Kelas: bla bla
No. Absen: bla bla

*emank mau nulis lembar jawab ujian? 🙂

Pengen tulisan jadi rapi seperti ini:

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

“top” untuk tulisan di atas
“middle” untuk tulisan di tengah
“bottom” untuk tulisan di bawah (bikini bottom :p)
“baseline” sama, untuk tulisan di bawah (untuk tingkat lebih lanjut)

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

Advertisements

26 Comments so far
Leave a comment

Wedew.. Good job bror…

bagus banged nih tutorial…
gw copas dulu ah….

🙂

Comment by takien

enak aja main copas!! :p

uda gw tambahin di situsmu Om, tp ga gw edit jadi format forum, gw kasi linknya doank 🙂

Comment by Loki Dan

Hihihiii… Nice tut!
(gaya SPAM~)

Comment by Shan-in Lee

Thanks… silakan dicoba.
Cocok untuk halaman profil yang + foto 🙂

Comment by Loki Dan

duh ..ZERO

SeWu kale’

tepuk tangan doble kaki-kanan-kiri
buat BLOGmu yg masih ZERO (katamu)
emang zero sih, masih dikit
tapi TUtoRial “itu”
pasti berharga buat pengemis HTML,tag, yg gak salah nyasar kesini,,palagi buat pemuLA!

KEEP UP the GOOD WORK! yeh

Comment by R-C-D-S-N

Din din… bisa aja… anyway thanks…
awas kamu, gw minta alamat blog aja ga dikasi tau!!

Comment by Loki Dan

mas boleh ga ngajarin lebih banyak mengenai tag HTML cuz saya baru pemula

Comment by Fauzi

tutor gw InsyaAllah bakal bikin terus, ni juga untuk kepentingan adek kelas gw. Biar gw ga bolak balik ngetik, mending gw post di Blog. So… tunggu aja edisi selanjutnya ^^

Comment by Loki Dan

mana tutorial2 yang laenn……
ditunggu nih…

http://warnetforum.com

Comment by takien

bro……..

tolong kasih tau dong gimana buat menu baru di wordpress ama header….
tapi menunya pake gambar

gueee newbie nehhh di wordpress

Comment by mosterxp

@atas
menu itu gw bikin sendiri, pertama loe siapin gambar (jangan lupa ukurannya yang sesuai) trus loe bikin aja html, masukin image itu, trus di link kan ke salah satu page ato terserah kemana.
Abis itu copy paste kan di widget (teks) code html tersebut.

Perlu dibuatin tutorialnya? Gpp kalo ini, soale uda ada gambarnya jadi tinggal copas ^^

Comment by Loki Dan

Tutorial yang bagus 😀

Comment by Xaliber

hmmm…
no wonder your blog is neat… 😛

hehehe…

Comment by Jabizri

Wah… Tutorial yang Menarik… dan menurut saya sangat applicable….hehehe… THX ya….

Comment by Count of Madness

Wah…gut, gut.

Save as HTML.

Comment by Death Berry Ille-Bellisima

sebenarnya tabel ga dianjurin c dalam pembuatan Blog macem gini. Ga berteman dengan SEO gw denger2 kalo make tabel tuh.

Comment by Loki Dan

Trusin dong…
Gue P{e}nge//n ni kaya bLog Lo…
Keren abis… soalnya gue P{e}mula ni, trus bikin bLonya jg masih tempel sana sini, ukhhh/….
heseeeeeeee

Comment by L'eileiy

Mas, Mo nanya ne..
Gimana caranya menambahkan status Yahoo Messenger ke dalam blog WordPress kita???

Di tunggu ya jawabannya…

Comment by rozi

yup, kbtln idem pertanyaanku dengan mas rozy.. gmn?

Comment by patchme2

Salam kenal, wah bagus infonya

Comment by Komunitas Guru KKPI Kab Kuantan Singingi

Wow Luar biasa macam buku aja nih

pas bangen sebelumnya saya mau beli buku tentang blog tapi ngak jadi ah

This is my Web http://www.readmail-earnmoney.cq.bz
Look For this

Comment by Zacky

salam kenal aja dech…

Comment by alazhar3lampung

akhirnya ketemu yang saya cari, terima kasih terus untuk berkarya!!!!

Comment by isrofike

cobain ah

Comment by alix

gimana cara bikin menu”nya… mau donk
,
,
,
,
,

Comment by neZz

thanks infonya

Comment by Faris




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: