http://blog.z–e–r–o.com

Setelah sekian lama disibukkan oleh proyek Web Sekolah yang hasilnya bisa dilihat di SMAN 3 Malang Official Site kini Zero Blog pindah alamat ke sini.

Karena sudah bosan ngeliat tampilan WordPress standar minim banget yg bisa diedit. Di alamat yg baru, Zero punya wajah baru… tampilan selayaknya Mac OS yg bisa di drag and drop. Ada Shout-Box, dll… Walo masi agak kacaw :p maklum masi Alpha Version, blum gw edit sama sekali themenya… capek…

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:

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

Pendahuluan

Setelah menguasai Desain Blog bag. 1 mari kita lajutkan ke bag. 2. Sekarang saya akan memberi contoh bagaimana membuat suatu isi (content) blog rata kiri dan kanan. Hmm… sangat cocok untuk daftar index maupun untuk keperluan lain… Bagian ini erat kaitannya dengan bagian 1.

Bab III
Rata Kanan Kiri, Memberi Kesan Rapi

Apa c sebenarnya rata kanan kiri? Lihat tulisan gw di bawah ini…

Uda ada gambaran kan tentang apa itu rata kanan kiri? Bukannya justify, tapi 2 konten yang satu rata kanan yang satu rata kiri. Langsung aja ya… karena uda malem, keburu ngantuk gw ^^

Step 1

Buat tabel dengan baris terserah dan kolom minimal 3, seperti ini:

kita beri nama kolom a, b, dan c.

Step 2

Ratakan kiri untuk kolom a (biasanya ini uda default), Ratakan kanan untuk kolom c, caranya beri tag Paragraf Align setelah tag td. Contoh:

<td><p align="right">"ini isinya kolom c "</p></td>
Align dapat diisi:

Step 3

Set “width” pada kolom tengah atau kolom “b” dengan nominal yang besar. Dengan cara menyisipkan tag width dalam tag td. Contoh:

<td width="2000" >"kolom b sebaiknya dikosongin"</td>

Efeknya akan seperti ini:

Step 4

Memberi tag nowrap agar tabel lebih sempurna. Sisipkan tag nowrap pada kolom a dan c. Lihat codenya:

<td nowrap>a</td> /* untuk kolom a */
<td nowrap><p align="right">c</p></td> /* untuk kolom c */

*Sangat dianjurkan untuk menggunakan NoWrap, agar hasil yang didapat maksimal dan sesuai keinginan
Step 5

Copy Paste ke post editor…

Contoh halaman yang munggunakan rata kiri kanan adalah halaman MAP di Blog saya ini, silakan dilihat dengan mengklik tombol Menu MAP atau klik disini

Huff… saya rasa cukup lah untuk hari ini. Sudah malam, waktunya tidur… ^^ besok sekolah…

ttd.

Loki Dan

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:

*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

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:

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

Tokoh Utama :

Lucy	Lucy/Nyu Gadis diclonius tokoh utama dalam cerita ini. Sejak lahir dia mempunyai tanduk (ciri diclonius) dan dijauhi teman. Dia mempunyai 4 vector dengan radius maksimal 2 meter. Pada saat melarikan diri dari laboratorium penyelidik diclonius dia tertembak di bagian kepala, mengenai pelindung kepala yang akhirnya menjadikan dia lupa ingatan dan mempunyai kepribadian berbeda yaitu Nyu (nama yang diberikan oleh Kouta).Sifat Nyu sangat berbeda dengan Lucy. Nyu tidak mengerti bahasa manusia, lugu, dan tidak mempunyai ambisi membunuh selayaknya Lucy.	Nyu
	Kouta Cowok biasa yang baik hati. Kouta sangat trauma terhadap kematian ayah dan adiknya yang dibunuh Lucy, namun Kouta seolah melupakannya dan menganggap adiknya dan ayahnya mati karena kecelakaan. Kuota merupakan satu satunya orang yang dapat meluluhkan hati Lucy.
	Yuka Sepupu Kouta. Dalam hatinya dia juga mencintai kouta, dan selalu cemburu apabila Kouta berduaan dengan Nyu.

Tentang:

*ciri spesies: jika dikawinkan dapat menghasilkan keturunan.

Ringkasan Cerita:

Kouta dan Yuka yang telah lama tak bertemu sedang berjalan ke tepi pantai tempat yang mengingatkan Kouta pada adiknya yang telah mati. Lalu di hadapan mereka berdua muncul sosok gadis tanpa busana dari lautan bebas. Gadis itu tampak lugu, berlari, dan akhirnya terjatuh. Yuka segera menyuruh Kouta melepas pakaiannya untuk dikenakan oleh gadis itu.

Karena mereka tak tahu darimana asal usul gadis tersebut, maka Yuka menyuruh Kouta beserta gadis itu tinggal di bekas penginapan milik Yuka yang sudah lama tidak dipakai. Yuka bingung tentang siapa nama gadis itu, lalu Kouta memanggilnya Nyu, karena tidak ada kata yang bisa diucap dari mulut mungil gadis itu selain kata “Nyuu… Nyu~~~”.

Nyu yang saat itu sedang di pantai bertemu dengan Bandou, anggota tim khusus untuk menangkap Lucy yang mempunyai kemampuan membunuh tingkat tinggi dengan pistol serta seorang yang keras kepala. Bandou yang saat itu bersama rekannya tiba tiba memperlakukan Nyu dengan tidak sopan sampai Nyu marah dan kepribadian Lucy muncul. Lucy membunuh rekan Bandou memotong kedua kaki Bandou, Memotong tangan kiri Bandou, mematahkan tulang lengan kanan Bandou, serta menusukkan jari vector ke kedua mata bandou yang ngakibatkan Bandou buta, lalu Lucy pergi meninggalkan mereka.

Kegagalan Bandou membuat pihak laboratorium diclonius kesal, sehingga mereka mengirimkan diclonius “nomor tujuh”. Nana, nama diclonius tersebut, dia tidak ingin membunuh, dia mempunyai jangkauan vector lebih jauh daripada Lucy, dia menganggap Direktur Kurama sebagai ayahnya.

Kedatangan Nana untuk menangkap Lucy sama nasibnya dengan Bandou, dia gagal dan akhirnya kehilangan kedua tangan, dan kakinya. Pertempuran antara kedua diclonius tersebut diketahui Mayu, gadis yang hidup sendiri karena tekanan rumah tangga.Mayu gadis yang hidup sendiri akhirnya bertemu dengan Nyu lalu ikut dalam penginapan walau dengan perasaan tidak ingin merepotkan.

Dengan beberapa alur mundur (flash back) dalam cerita, yang mengisahkan masa lalu Lucy akhirnya Lucy ingat dengan jelas siapa dia sebenarnya. Lucy, yang masa kecilnya selalu diejek oleh temannya karena memiliki tanduk, Lucy, yang membunuh semua teman sekelasnya dengan kekuatan vector, dan Lucy… yang jatuh hati kepada Kouta, karena dia tidak menganggap Lucy aneh dengan kedua tanduknya. Kouta yang dahulu adalah satu satunya teman Lucy sampai akhirnya dia pindah keluar kota.

Pada saat Kouta hendak pindah keluar kota Lucy ingin menghabiskan malam terakhir dengan Kouta di acara festival tahunan. Namun Kouta menolak, karena dia akan pergi bersama sepupunya, dia berbohong kepada Lucy dengan mengatakan dia pergi bersama sepupunya laki-laki, padahal dia pergi bersama Yuka.

Lucy datang ke festival tahunan, mengetahui Kouta yang bersama Yuka. Amarah Lucy meledak, dia membunuh orang orang yang berada di sekitarnya hanya dengan hitungan detik. Kejadian itu diketahui oleh adik Kouta. Pada saat Kouta hendak meninggalkan kota, di stasiun dia berharap Lucy hadir, namun Lucy tidak datang. Di dalam kereta ternyata Lucy duduk di gerbong sepi di sebelah gerbong Kouta dan keluarganya. Adik Kouta yang mengetahui bahwa Lucy adalah pembunuh mengatakan hal yang membuat Lucy marah, Kouta membela Lucy, karena dia tidak tahu siapa Lucy. Kemarahan Lucy mengakibatkan dia menggunakan vectornya. Dia membunuh adik Kouta tepat di depan mata Kouta, dia memotong perut adik Kouta dengan jelas dan membuat Kouta shock. Ayah Kouta yang hendak menolongpun dipotong kepalanya oleh vector Lucy. Sejak saat itulah Kouta menjadi sangat trauma dan tidak ingin mengingat tentang kejadian itu.

Nana yang sudah pulih dengan tangan dan kaki pasangan melanjutkan kehidupan bersama Mayu dan yang lain di penginapan namun pihak laboratorium yang masih ingin menangkap Lucy akhirnya mengirimkan super diclonius, Mariko, diclonius dengan jangkauan vector puluhan meter dan jumlah yang banyak, dia putri kandung Direktur Kurama yang sejak lahir menjadi kelinci percobaan di laboratorium diclonius. Mariko yang bertempur melawan Lucy akhirnya menang, dia mematahkan satu tanduk Lucy, dan bertemu dengan ayah kandungnya, Direktur Kurama. Mariko dan Direktur Kurama akhirnya mati terkena ledakan dari bom yang dipasang di tubuh Mariko.

Keunggulan:

Keunggulan cerita ini terletak pada alur yang digunakan, jalan cerita, dan peranan dari tiap karakter. Alur dalam cerita ini membuat kita bertanya tanya di awal cerita, siapa sih Lucy? Apa sebenarnya diclonius? Vector itu apa? Namun di akhir cerita semua akan terjawab. Jalan cerita dalam Elfen Lied ini juga sangat unik dan mengharukan. Dengan visual yang tergolong untuk kalangan 17+ untuk isi yang melibatkan kekerasan membuat kita seakan merasakan bagaimana kehilangan adik dan melihat dengan kepala sendiri bagian tubuh adik kita yang terbagi dua. Sangat mengerikan memang. Saya memberikan bintang 9 untuk anime ini!

Kredit:

Wikipedia - isi

El fansub de Elfen Lied - galeri