Tempat Hacking dan Cracking

TUTORIAL Desain Website: Cara Membuat Website dengan Photoshop

TUTORIAL Desain Website: Cara Membuat Website dengan Photoshop

Warong-Hacker menyajikan tutorial desain website yang mengupas tuntas cara membuat website, mulai dari proses desain hingga coding.

Tutorial desain website ini terbagi dalam beberapa bagian, dan pada bagian pertama ini akan membahas mengenai cara membuat website dari segi desain.

Hi sahabat Warong-Hacker ,
Apakah Warong-Hacker pernah mengalami kesulitan untuk menemukan tutorial desain website yang menyajikan cara-cara membuat website secara lengkap? Memang, ada ribuan – bahkan jutaan – artikel desain yang menyajikan tutorial desain website. Namun, rata-rata hanya menyajikan sebagian saja, entah itu bagian perancangan layout ataupun bagian codingnya saja.
Nah, makanya Warong-Hacker sengaja memilihkan tutorial desain website yang lengkap, yang akan menginformasikan secara detil cara-cara membuat website mulai dari nol hingga selesai. Warong-Hacker akan mengantarkan Warong-Hacker memasuki dunia desain website, mulai dari membuat wireframe hingga mendesain laman secara full (sebanyak 5 laman template). Lalu, Warong-Hacker juga akan mengajarkan sekelumit cara untuk coding, hingga akhirnya menjadi theme XHTML yang bisa diaplikasikan langsung ke WordPress. Yahud kan?
Tapi, tentunya Warong-Hacker ngga langsung menayangkan semuanya secara bersamaan ya, karena pastinya akan butuh banyaaaak sekali waktu dan konsentrasi. Jadi, Warong-Hacker akan memecahnya menjadi beberapa post.
Nah, kalau Warong-Hacker mau lihat, seperti apa sih hasil dari tutorial desain website ini, berikut Warong-Hacker tampilkan screenshotnya ya:


Dan, berikut Warong-Hacker tampilkan beberapa spesifikasi yang dibutuhkan:
- Program yang digunakan: Adobe Photoshop
- Versi: CS4+
- Tingkat kesulitan: Pemula
- Estimasi waktu pengerjaan: 1.5 – 2 jam

Yang dicapai dari proyek ini:
Sasaran kita adalah untuk mendesain dan mengembangkan sebuah desain website yang simple dengan tampilan yang modern, yang dapat diaplikasikan ke sistem-sistem CMS, seperti WordPress. Tutorial ini tidak mengikutsertakan efek-efek desain website yang rumit dan terlalu membingungkan, karena tujuannya adalah untuk menciptakan desain layout yang sederhana, namun akan mengupas tuntas semua tahapan desain website secara menyeluruh, mulai dari awal hingga akhir. Dalam tutorial ini, juga akan disajikan cara penempatan (layout), dan penggunaan margin serta padding yang tepat.

Tutorial ini akan menggunakan 960 grid system dari awal hingga akhir. Jadi, kalau selama ini Warong-Hackerddies penasaran ingin mencoba mengaplikasikan sistem tersebut, inilah saat yang tepat untuk mencoba!  Tentunya, ada beberapa penyesuaian yang akan dilakukan dari sistem standar, namun pada dasarnya 960gs akan menjadi patokan, baik dalam fase desain maupun coding.

Buat Warong-Hacker yang ingin menambahkan sentuhan pribadi, boleh lho untuk bereksperimen dan bermain-main dengan jenis font, warna, gaya dan tekstur yang sesuai dengan gaya desain Warong-Hacker. Yang perlu diingat adalah, tutorial ini hanya menyajikan proses awalnya saja, dan selebihnya Warong-Hacker bebas mengekspresikan diri dengan mengubah tampilan desainnya.

Sebagai panduan, Warong-Hacker akan menghadirkan tutorial cara membuat website ini dalam beberapa sesi/bagian, sebagai berikut:
- Fase Desain
1. Sesi 1: Persiapan Desain hingga Mendesain Laman Muka
2. Sesi 2: Mendesain Laman-laman Dalam (terbit bulan depan)
- Fase Coding
1. Sesi 3: Slicing dan XHTML Coding (coming soon)
2. Sesi 4: Konversi menjadi Theme WordPress (coming soon)

Lalu, sumber-sumber yang akan kita gunakan pada tutorial ini adalah:
1. Image: Lil Rhody Dan, Flickr
2. Photo Merry Christmas: dari PSDTuts Flickr group
3. Social icons: WeFunction.com
4. Twitter Bird: WebTreats
5. Panduan warna font untuk:
- Heading: 0f5193
- Text: 7c7c7c
- Link: eaa000

Tentu saja, Warong-Hacker dipersilakan untuk mencomot image, photo, ornamen lainnya sesuai dengan selera Warong-Hacker.


Sesi 1

Nah, sudah nggak sabar kan untuk memulai proses desain? Tanpa dipanjang-panjangkan lagi, kita langsung mulai saja yuk sesi pertama ini. Seperti yang sudah dijabarkan di atas tadi, fase pertama akan dipecah menjadi dua sesi. Dan, pada sesi pertama ini, Warong-Hackerddies dapat mempelajari cara membuat wireframe dengan menggunakan 960 grid system, dan kemudian mendesain laman muka. Barulah pada fase selanjutnya, kita akan melanjutkan dengan desain laman-laman tambahan lainnya (tayang bulan depan).

Hal yang penting untuk dicatat hari ini adalah bagaimana kita akan menggunakan dua variasi berbeda dari 960 grid system, yakni layout 12 kolom dan layout 16 kolom, secara bersamaan dalam satu file. Penjelasannya akan disampaikan lebih mendetil nanti, namun pastikan Warong-Hackerddies aware akan perbedaan layout tersebut, karena nantinya akan cukup berpengaruh pada saat coding.

Sesi 1 akan dibagi menjadi empat sub-bagian sebagai berikut:
- Part A: Membuat Wireframe Website
- Part B: Mendesain Header
- Part C: Mendesain Area Konten Utama
- Part D: Mendesain Footer

Cekidot! (Dialihbahasakan dari situs ini: URL)


PART A: Membuat Wireframe Website

Langkah A1: Membuat Dokumen Baru dengan Menggunakan 960 Grid System

Karena kita akan menggunakan 960 grid system, sribuddies perlu mengunduhnya melalui link ini atau link ini.

Di dalam folder utama (dari file yang sudah sribuddies unduh dari link di atas), pilihlah “templates” -> “Photoshop”. Lalu, buka “960_grid_16_col.psd” di Photoshop. Rename file ini menjadi “index.psd” dan simpan di dalam folder baru yang sribuddies inginkan, seperti ilustrasi berikut ini:


Sekarang, setelah kita setup file 16-kolom, kita juga harus mengimpor layer panduan dari file 12-kolom.

Buka “960_grid_12_col.psd” di Photoshop (dari folder yang sama saat kamu membuka “960_grid_16_col.psd”). Lalu, unlock dan pilih position layer “12 Col Grid”. Drag ke file “index.psd” yang baru saja kita buat, seperti tampak pada ilustrasi di bawah ini. Lalu, unlock dan pilih position “grid_16_col” juga.



Mungkin sribuddies bertanya-tanya, sebenarnya kenapa sih kita butuh dua grid files yang berbeda? Jawabannya, karena grid_16 tidak bisa memberikan kita tiga kolom yang sejajar, makanya kita butuh grid_12. Tak perlu kuatir, 960 grid system memang dirancang untuk digunakan dengan cara seperti ini, jadi tidak perlu takut akan terjadi konflik kemudian. Selain itu, kita juga akan menggunakan kedua grid tersebut pada fase konversi XHTML.

Oke, selanjutnya: pilih layer “grid_12_col” dan “grid_16_col”, lalu pilihlah “Align top edges” dan “Align horizontal centers” dari panel opsi seperti tampak pada ilustrasi di bawah ini (pada saat memilih opsi tersebut, pastikan sribuddies telah mengaktifkan Move Tool (V)). Dan, hasilnya akan tampak pada ilustrasi di bawah.



Langkah A2: Setting Panduan, Penggaris dan Units

Sekarang saatnya kita mengatur garis bantu dan penggaris untuk memudahkan kita saat akan menempatkan elemen-elemen nantinya. Pilih “Edit -> Preferences -> Units & Rulers” atau klik “Ctrl+K” untuk memanggil dialog box Preferences. Lalu, pilih tab “Units & Rulers”. Di dalam tampilan “Units & Rulers” tersebut, sub-seksi Units, atur “pixels” untuk kedua opsi “Rulers” dan “Type” seperti tampak pada ilustrasi di bawah ini.



Sekarang, pilih tab “Guides, Grid & Slices”, dan pada sub-seksi “Grid”, atur value menjadi “100″ dan units menjadi “pixels” untuk opsi “Gridline every”. Aturkan pula angka “10″ pada field “Subdivisions” seperti tampak pada ilustrasi di bawah ini.



Langkah A3: Mengatur Ulang Ukuran Dokumen

Tekan “Ctrl+Alt+C” atau pilih “Image -> Canvas Size” untuk memanggil box dialog Canvas Size dan ubah pengaturannya seperti tampak pada ilustrasi di bawah ini.




Setelah kita menambahkan tinggi kanvas kita, sekarang kita harus memilih dan memperbesar grid kita sesuai dengan panjang dokumen kita saat ini.

Pilih kedua layer grid dan tekan “Ctrl+T” atau pilih “Edit -> Free Transform”, lalu drag grid tersebut sesuai dengan ilustrasi A – 3B. Setelah itu, kunci kedua layer grid, dan sembunyikan layer “grid_12_col” seperti tampak pada ilustrasi A – 3C.

Secara default, kita telah memposisikan panduan untuk grid_16_col saat kita mulai mengerjakan file grid_16_col.psd. Kita tidak memiliki panduan untuk grid_12_col, tapi kita memang tidak terlalu membutuhkannya, karena kita hanya menggunakan grid_12_col dalam situasi-situasi tertentu saja.



Kamu juga bisa memeriksa grid dan panduan dokumen kamu dengan mengklik “Ctrl+’ (View -> Show -> Grid)” atau “Ctrl+; (View -> Show -> Guides)” seperti tampak pada ilustrasi A -3D.




Langkah A4: Membuat Wireframe

Lebar dokumen kita saat ini adalah 1020px. Karena kita menggunakan 960 grid system, maka lebar konten kita nanti harusnya adalah 940px. Namun, kita akan melenceng sedikit dari model 960 tersebut dengan menggunakan padding sisi kiri dan kanan masing-masing 20px (jadi, total 40px) untuk kolom kontennya. Jadi, total lebar konten kita nantinya adalah 980px. Pilih layer Background, dan klik “Ctrl+Backspace” atau “Ctrl+F5″ atau pilih “Edit -> Fill” untuk memanggil box dialog “Fill”. Pilihlah opsi “Color …” dari dropdown “Use”, dan atur nilainya menjadi “e7e7e7″ seperti tampak pada ilustrasi A – 4A




Jika kamu menemui kesulitan melakukan hal ini, misalnya karena kamu menggunakan Photoshop versi dulu seperti CS4 ke bawah, maka kamu harus “raterize” layer Background dulu, lalu aplikasikan langkah tersebut di atas pada layer background tersebut.

Setelah itu, pilih “Rounded Rectangle Tool”, dan atur “Radius” menjadi “10px” pada panel Options, lalu atur warna “Foreground” menjadi “f1f1f1″. Gambarkan bujursangkar bersudut bulan pada artboard dengan ukuran 980 x 150px. Beri nama layer baru ini Header BG, dan tempatkan layer ini di dalam sebuah grup layer, lalu beri nama grup tersebut Header. Lalu, aturkan palet layer kamu seperti tampak pada ilustrasi A – 4B. Selalu tempatkan layer grid di atas layer-layer lainnya di palet layer.

Untuk membuat sebuah grup, cukup klik layer-layer yang ingin kamu masukkan ke dalam grup – boleh satu ataupun lebih – dengan cara klik sambil menekan tombol Ctrl atau Shift, lalu klik “Ctrl+G” atau pilih “Layers -> Group Layers”. Untuk mengubah nama layer atau grup, klik dua kali di nama defaultnya, maka ia akan berubah menjadi field teks yang bisa diedit, seperti tampak pada ilustrasi A – 4B.


Pilih Convert Point Tool dari palet Tool di grup Pen Tool. Lalu “Ctrl+Click” bujursangkar di Header BG, lalu klik keempat sudut atas seperti tampak pada ilustrasi A – 4C. Lalu, hapus dua poin teratas dengan menggunakan Delete Anchor Point Tool dari grup Pen Tool seperti tampak pada ilustrasi A – 4D.



Sekarang bujursangkar kita di Header BG akan memiliki tinggi 140px, karena kita telah menghapus dua point teratas. Lalu, pilih grup layer Header dan layer Background, lalu pilih Align Top Edges dan Align Horizontal Centers dari palet Options seperti tampak pada ilustrasi A – 4E.


Aplikasikan layer style pada layer Header BG dengan menggunakan pengaturan seperti tampak pada ilustrasi A – 4F. Nudge layer ini sebanyak 1px ke arah atas untuk menyembunyikan glow di bagian atas.



Selanjutnya, pilih sekali lagi Rounded Rectangle Tool dan gambarkan area konten (dengan ukuran 980 x 1400px). Beri nama layer baru ini BG dan tempatkanlah di dalam grup layer yang diberi nama Konten, lalu aplikasikan layer style yang sama dengan yang diaplikasikan pada Header BG. Kemudian, gambarkan bujursangkar lainnya (dengan ukuran 980 x 570px), beri nama Footer BG dan tempatkanlah di dalam grup layer yang bernama Footer, lalu terapkan layer style yang sama. Hapuskan dua poin terbawah dari bujursangkar di Footer BG dengan menggunakan cara yang sama dengan yang diterapkan pada Header BG. Tempatkan seksi-seksi tersebut dengan jarak 20px satu sama lain (header, konten dan footer). Tempatkan semuanya sesuai dengan ilustrasi A – 4G.





Dengan mempertimbangkan lamanya waktu yang diperlukan untuk membuat semua wireframe secara lengkap, kemudian dilanjutkan dengan menambahkan konten aslinya, jadi kita akan menunda penambahan konten asli pada mockup ini hingga sesi tutorial desain website berikutnya.



PART B: Mendesain Header

Langkah B1: Mengisi Bagian Atas Header


Pilih Line Tool dan gambarkan garis dengan lebar 1px dan panjang 940px (untuk menggambar garis dengan sempurna, tekan dan tahan “Shift”). Tempatkanlah seperti tampak pada ilustrasi B – 1A. Beri nama layer baru ini HR, dan isi backgroundnya dengan warna “cdcdcd”, lalu terapkan layer style seperti tampak pada ilustrasi B – 1A.





Lalu, pilih Rectangle Tool dan gambarkan kotak dengan ukuran 200 x 24px, terapkan layer style dan tempatkan sesuai dengan ilustrasi B – 1B. Isi background dengan warna 000000, lalu kurangi opasitinya menjadi 10%.



Ketikkan beberapa contoh teks untuk tautan cepat di sisi kiri field pencarian. Pilih Text Tool dari panel Paragraph, dan pilih Right Align Text. Lalu, ketikkan beberapa nama menu, dan pisahkan dengan menggunakan “|” (bar vertikal). Gunakan ilustrasi B – 1C sebagai panduan. Pilih warna text ababab. Lalu, untuk field pencarian ketikkan “Search” dengan warna text ababab, lalu pilih Custom Shape Tool, dan dari menu Shape pilihlah bentuk Search, kemudian gambarkan dan tempatkan bentuk kaca pembesar seperti tampak pada ilustrasi B – 1C. Atur warna kaca pembesar menjadi f1f1f1.



Langkah B2: Atur Logo dan Membuat Menu Navigasi

Sribu tidak akan memberitahukan bagaimana cara membuat logo seperti tampak pada ilustrasi di bawah ini, karena memang langkah ini tidak perlu diikuti dengan sangat mendetil. Sribu justru membebaskan sribuddies untuk menggunakan desain logo yang telah sribuddies kreasikan sendiri. Hanya saja, sebagai panduannya, tempatkanlah logo yang telah sribuddies miliki tersebut sesuai dengan ilustrasi di bawah ini.



Pilih Text Tool, lalu enable-kan Right Align Text dari panel Paragraph. Lalu, ketikkan beberapa nama menu dengan menggunakan pengaturan seperti tampak pada ilustrasi di bawah ini.



Langkah B3: Membuat Sub Menu

Karena kebanyakan keyboard tidak memiliki tuts “»”, pertama-tama pilih dan copy tanda panah ini (») lalu tempelkan di Photoshop pada layer baru bernama Arrow. Berikan warna yang sama dengan warna yang digunakan untuk menu, lalu atur Horizontally Scale menjadi 150%. Kemudian pilih layer Arrow (jika belum dipilih), lalu klik “Ctrl+T” dan putar hingga menjadi seperti tampak pada ilustrasi di bawah ini.



Gambarkan kotak bersudut bulat dengan radius 4px, ukuran bebas. Lalu, atur warna dasarnya menjadi d5d5d5, dan terapkan layer style, serta ketikkan beberapa nama submenu seperti tampak pada ilustrasi di bawah ini.

PART C: Mendesain Area Konten Utama

Langkah C1: Mendesain Image Slider

Gambarkan kotak dengan ukuran 940 x 338px, lalu terapkan layer style seperti tampak pada ilustrasi C – 1A. Beri nama layer baru ini Slider BDR. Tempatkan Slider BDR pada area konten seperti tampak pada ilustrasi C – 1B.





Tempatkan dan pilih sebuah image di atas layer Slider BDR, lalu Ctrl+Click layer Slider BDR untuk mendapatkan area slider image (gambar C – 1C). Lalu, pilihlah “Select -> Modify -> Contract”, dan pada box dialog Contract, atur menjadi 1px dan tekan “Enter”. Sekarang, tekan “Shift+Ctrl+I” atau pilih “Select -> Inverse” untuk membalikkan area seleksi, kemudian tekan tuts “Delete” pada keyboard. Sekarang kita akan mendapatkan image slider yang sempurna, seperti tampak pada gambar C – 1D.




Pilih Ellipse Tool, dan gambarkan lingkaran dengan ukuran 16 x 16px. Terapkan layer style seperti tampak pada ilustrasi C – 1E, dan tempatkanlah seperti tampak pada gambar C – 1E juga. Kelompokkan lingkaran-lingkaran tersebut, dan beri nama grup baru tersebut Radios.



Langkah C2: Membuat Boks Promo dan Testimonial

Pertama-tama, kita akan membuat item promo sebesar empat kolom. Untuk membuat grup empat kolom, enable grid_16_col. Bagilah 16 kolom yang ada menjadi empat, dan kamu akan menemukan empat kolom dengan ukuran yang seragam. Isi kolom dengan konten-konten seperti yang tampak pada gambar C – 2A. Lalu, tempatkan garis dengan pengaturan yang sama dengan Header HR, dan tempatkanlah seperti tampak pada gambar C – 2A.

INGATLAH: Ketika membuat aturan multiple line seperti HR dan VR, umumnya diaplikasikan pengaturan dasar dan warna yang seragam.


Jika Warong-Hacker bertanya-tanya bagaimana mendapatkan ikon seperti pada ilustrasi di atas, Warong-Hacker bisa mengunduhnya dari Tutorial9.net.

Langkah C3: Membuat Promo Kedua

Kali ini kita akan membuat tiga kolom area promo. Untuk itu, kita perlu menyembunyikan grid_16_col dan menampilkan grid_12_col. Gunakan semua kolom keempat sebagai satu kolom untuk menampilkan item promo. Pertama-tama, gambarkan kotak dengan ukuran 300 x 140px dan tempatkan seperti tampak pada gambar C – 2B. Sekarang, tempatkan image di atas layer tersebut, lalu pilih dan crop area image (sesuaikan dengan ukuran kotak yang telah kamu buat sebelumnya), gunakan cara yang sama dengan yang kita lakukan pada saat membuat image slider. Kemudian, terapkan layer style seperti tampak pada gambar C – 2B.



Sekarang saatnya kita menambahkan teks. Pilih Text Tool dan gambarkan text block seperti tampak pada gambar C – 2C. Lalu, ketikkan beberapa judul, dan juga deskripsi pendek, serta berikan teks tautan seperti pada gambar C – 2C.

Sekarang, kelompokkan layer-layer ini di dalam grup yang diberi nama “Promo”. Copy dan paste grup “Promo” sebanyak dua kali. Dan, kemudian kelompokkan ketiga grup “Promo” dan beri nama Promo-Col-3. Lalu, posisikan mereka dan layer-layer kamu lainnya seperti tampak pada gambar C – 2D.



Langkah C4: Membuat Boks Testimonial

Pilih Rectangle Tool. Gambarkan kotak dengan ukuran lebar 940px dan tinggi sesuai dengan kebutuhan kamu. Isikan warna dasar kotak ini dengan 000000, atur opasiti menjadi 5%, dan beri nama layer ini menjadi Testi BG.

Sekarang, pilih Custom Shape Tool dari menu Shape, dan pilih bentuk segitiga (Triangle). Klik Vector mask thumbnail dari layer Testi BG. Kamu akan memiliki area seleksi sesuai dengan shape sekarang.

Enable Add to Shape Area (+) dari panel Options, dan gambarkan segitiga di dalam bentukan Testi BG. Lalu dengan menggunakan Delete Anchor Point tool, hapuskan satu sisi segitiga, dan tempatkan seperti tampak pada gambar C – 2E.

Selanjutnya, terapkan layer style seperti tampak pada ilustrasi di bawah ini, dan isikan dengan teks seperti tampak pada gambar C – 2F.




Langkah C5: Membuat Item Proyek Terbaru

Pilih Rectangle Tool, gambarkan kotak dengan ukuran 940 x 40px, lalu beri nama layer ini Bar. Letakkan kotak ini di dalam grup layer, dan beri nama grup baru tersebut Recent Projects. Ubah warna dasar kotak menjadi FFFFFF, dan atur opasiti menjadi 15%, kemudian terapkan layer style seperti tampak pada gambar C – 2G. Selanjutnya, posisikan dan tempatkan beberapa gambar di bawahnya dengan pengaturan dan posisi seperti tampak pada ilustrasi C – 2H. Ukuran gambar-gambar tersebut adalah 220 x 180px.




Untuk gambar, gunakan teknik dan layer style yang sama dengan yang telah kita gunakan untuk bagian Promo-Col-3. Untuk seterusnya, gunakan teknik dan style yang sama untuk mendesain gambar apapun untuk theme ini pada bagian pertama dan kedua. Kenapa? Karena hal ini akan membuat desain kita memiliki keseragaman dan konsistensi skema style. Untuk selanjutnya, Sribu hanya akan mengatakan teknik dan style ini dengan istilah “terapkan style image”, dan tidak akan mengulangi langkah-langkahnya lagi. Jadi, hafalkan dengan benar ya sribuddies.

PART D: Mendesain Footer

Langkah D1: Membuat Area Twitter dan Social Icon

Pada grup layer Footer, buat grup layer baru dan beri nama Top. Di dalam grup tersebut, masukkan konten dan atur sesuai dengan ilustrasi D – 1A. Untuk Vertical Ruler, gunakan warna dan layer style yang sama dengan Horizontal Ruler (HR). Kemudian, tempatkan layer baru ini seperti tampak pada ilustrasi D – 1B.




Untuk mengunduh social icon dan Twitter Bird, klik link ini dan ini.

Sekarang, buatlah konten utama untuk area footer. Isi dan posisikan konten seperti tampak pada gambar D -1C. Kemudian, posisikan layer seperti tampak pada gambar D – 1D.




Pilih Custom Shape Tool dari menu Shape dan pilih bentuk segitiga (Triangle). Gambarkan segitiga dengan ukuran 10 x 10px. Berikan warna dasar cdcdcd, lalu terapkan stroke dari layer style seperti yang tampak pada gambar D – 1E, dan beri nama layer baru ini Panah Atas. Terakhir, berikan beberapa teks, dan posisikan elemen-elemen seperti tampak pada gambar D – 1F.



Voila! Hasil desain kamu akan tampak seperti ini:



Daaaan, ini mengakhiri bagian pertama dari seri tutorial baru kita. Saat ini, kita seharusnya sudah mengatur framework dasar dari website kita, dan mendesain laman muka. Pada sesi desain berikutnya (akan terbit bulan depan), kita akan mendesain laman-laman pendukung. Dan, pada akhirnya barulah kita akan mencoba teknik slicing, dan mempersiapkan coding untuk XHTML, dan pastinya … coding untuk WordPress!



share this article to: Facebook Twitter Google+ Linkedin Technorati Digg
Posted by Mubasir Alamsah, Published at 00:03 and have 1 komentar

1 komentar:

Blog ini merupakan Blog Dofollow, karena beberapa alasan tertentu, sobat bisa mencari backlink di blog ini dengan syarat :
1. Tidak mengandung SARA
2. Komentar SPAM dan JUNK akan dihapus
3. Tidak diperbolehkan menyertakan link aktif
4. Berkomentar dengan format (Name/URL)