PANDUAN MEMBUAT SITUS MINI

Bagaimana Anda Membuat Situs Mini
dan Menjadikannya Mesin Uang Anda
di Internet Yang Bekerja Otomatis


BAB 1
PENGANTAR
A. Apa Itu Situs Mini (Mistrong>
Situs mini (minisite) adalah situs sederhana yang biasanya hanya berisi 5 halaman
seperti : halaman pembuka, contact, about, produk, order. Biasanya untuk situs
pribadi/ perusahaan yang ditulis dengan HTML murni atau menggunakan frontpage.
Situs ini biasanya hanya bersifat statis dan satu arah. Maksudnya : pengunjung website
yang bersangkutan tidak bisa berinteraksi dengan pemiliknya. Sedangkan situs yang
dinamis adalah situs yang bisa melakukan interaksi antara pemilik situs dan
pengunjungnya, misalnya situs-situs yang menggunakan tehnologi CMS.
Selain itu ukuran situs mini sangat hemat, sehingga anda bisa menyimpan rancangan
situs mini anda ke dalam disket.
B. Keuntungan Memiliki Situs Mini
1. Tidak perlu investasi yang mahal-mahal
2. Bisa digunakan untuk promosi jati diri anda, misalnya anda mengonlinekan diri anda
sendiri melalui situs mini yang berisi profile anda, keahlian dan sebagainya.
3. Bisa menghasilkan duit.
C. Persiapan Awal Pembuatan Website Mini
Ada beberapa hal yang harus anda persiapkan sebelum mulai melakukan praktek membuat
situs mini :
1. Tidak harus menjadi ahli dalam menguasai tag-tag HTML
2. Software web authoring WYSIWYG, seperti Microsoft Frontpage, NVU, atau
Dreamweaver. Dalam praktek kali ini saya menggunakan Frontpage. Semoga anda
sudah memilikinya, tapi kalo belum silakan cari teman anda yang memiliki CD Microsoft
Office XP installer. Silakan install Microsoft Frontpage-nya saja.
3. Server Mini “DongKRAK” for Windows untuk melakukan ujicoba. Silakan cari di Google
dengan keyword “Download Dongkrak server”
4. Program Photoshop.
5. Harus pake Komputer.
Panduan Membuat Website Mini
www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

BAB 2
LANGKAH AWAL
A. Sketsa Kasar
Sebelum mulai membuat satu buah situs mini, sebaiknya siapkan kertas untuk melakukan
corat-coret desain awal.
Tapi … Anda tidak perlu melakukannya. Saya sudah mencoretnya di e-book ini. He… he…
Perhatikan gambar di bawah ini :
Gambar di atas adalah bentuk desain sederhana dari sebuah website mini dan anehnya lagi
bentuk desain model seperti inilah yang banyak dipakai oleh para marketer saat ini.
Dalam gambar di atas saya menyediakan 4 blok, yaitu : 1) blok header yang biasa berisi
gambar-gambar penarik perhatian; 2) blok menu, yang berisi link-link untuk menuju
halaman lain; 3) blok body, tempatnya isi (content) dari website; 4) blok Footer,
biasanya berisi informasi hak cipta, hit counter dan informasi update.
Panduan Membuat Website Mini
www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

B. Sketsa Kertas ke Sketsa Komputer
Cara termudah mengaplikasikan sketsa di atas, dengan menggunakan sistem tabel.
Tabel yang dibutuhkan seperti ini :
Perhatikan gambar di bawah ini :
Contoh situs www.Instan.Master-Bisnis.com yang menggunakan desain ini.
Blok Header
Blok Menu
Blok Body
Blok Footer
Panduan Membuat Website Mini
www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

BAB 3
MARI KITA MULAI
A. Membuat Tabel
Akh… kamu! Dari tadi teori melulu … kapan prakteknya ….
Ooops! Sabar jek, sekarang juga nyook kita mulai prakteknya…
1. Duduk dengan posisi yang benar, kalo salah duduk ntra selesai praktek anda mumet
bin puyeng ….
2. Baca basmalah (baca: bismillahirrahmaanirrahiem) dulu (untuk muslim).
3. Buka program Microsoft Fronpage di menu Program.
Gambar 3.1 Layar Microsoft FrontPage
4. Saat anda membuak frontpage langsung tersedia file kosong, nah selanjutnya anda
membuat satu buah table. Tetapi sebelumnya perhatikan kembali tabel yang telah
saya buat di atas. Ooops… lihat aja di bawah ini biar gak sakit lehernya…
Panduan Membuat Website Mini
www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

Saya menyisipkan dua buah kolom di sisi kiri dan kanan body dan dua buat baris pada
bagian atas dan bawah body. Tujuannya untuk memperindah saat menuliskan konten
pada bagian body, biar gak terlalu merapa ke sisi kiri-kanan atau atas-bawah.
Membuat Tabel
5. Pilih menu Insert >> Table >> Insert Table.
6. Masukkan 6 baris (row) dan 3 kolom (column). Klik OK.
7. Selanjutnya tandai masing-masing kolom dengan HEADER, MENU, BODY dan FOOTER
untuk memudahkan desain selanjutnya.
Dua buah kolom
kiri-kanan
Dua buah baris
atas-bawah
Panduan Membuat Website Mini
www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

B. Merapatkan Kolom
8. Selanjutnya anda harus menggeser kolom kiri-kanan hingga mencapai ukuran 20
point. Caranya: drag garis pingir dari sel yang ingin anda rapatkan.
Perhatikan gambar di bawah ini :
Gambar c. Hasil Akhir
C. Menggabungkan Beberapa Kolom
9. Berikutnya… Anda harus menggabungkan beberapa sell. Seperti bagian header,
menu dan footer.
10. Caranya gimana bung!
Ooops!!! …. Tenang jeck.
Coba gabungkan (baca: blok 3 sel pada bagian HEADER). Lihat gambar lagi ackh….
Memblok HEADER
11. Selanjutnya klik menu Table >> Merge Cell


Hasil Penggabungan
12. Lakukan hal yang sama untuk bagian MENU dan FOOTER.
13. OK… Saya anggap komiu sudah menyelesaikannya.
Hasilnya seperti gambar di bawah ini:
D. Center Alignment
14. Selanjutnya untuk memperindah penampilannya kela, Anda harus menengahkan
(bener gak yaa bahasanya neh!) HEADER, MENU dan FOOTER.
Caranya: Arahkan pointer pada bagian HEADER, kemudian klik toolbar center [ ]
Lakukan hal yang sama untuk MENU dan FOOTER.
E. Menghilangkan Tampilan Garis
15. Masih di depan computer khan ??
16. Sekarang sampean kudu menghilangkan (bukan menghapus) tampilan border (garis
pinggir) yang pada bagian BODY.
Ini bertujuan agar ketika diload oleh browser, garisnya tidak nongol. Jadi lebih enak
dilihat mata.
Garis yang harus di non
tampilkan

17. Silakan blok seluruh bagian BODY. Liat gambar mas biar jelas!
18. Silakan klik pada toolbar table, lalu sorot dan carilah (non aktifkan) “inside
horizontal border” dan “inside vertical border”.

Hasil Pekerjaan Anda Hingga Saat in

F. Membuat Menu Utama
Nahh… sekarang praktek membuat menu utama plus memperindahnya.
19. Hilangkan tulisan MENU dan gantilah dengan teks di bawah ini :
Home | Order | Portofolio | Contact | Login
G. Background Menu
Saya suka dengan warna HIJAU, jadi pada praktek kali ini anda boleh berbeda pendapat
dengan saya soal warna. SETUJU …
Tapi…. Kalo mau lancer-lancar saja praktikumnya… Ya… Anda harus taklid dengan saya.
OK.
20. Klik kanan pada bagian MENU, terus pilih “Cell Properties..”. Pada kotak yang
muncul, carilah bagian background, lalu pilih warga green (hijau). Terus akhiri
dengan klik OK.
Perhatikan gambarnya lagi ….
Non aktifkan
bagian ini

21. Berikan warna yang sama pula pada bagian FOOTER.

H. Penyesuaian Warna Teks dengan Background
Anda sekarang memiliki desain MENU dengan warna latar Green. Tapi gak matching
dengan warna teksnya saat ini. Warna yang sepadan untuk latar hijau harus lebih
terang. Disini hanya ada dua pilihan, putih atau kuning.
Keputusan saya : ambil yang kuning aja lah…
22. Blok seluruh teks menu, kemudian pilih toolbar “Font Color” kemudian pilih warna
yellow (kuning). Jangan lupa memberi efek tebal (Bold) biar lebih matching.
23. Terus berilah jenis font Tahoma, dengan ukuran 10pt.

I. Hyperlink

Hyperlink adalah cara meloncat ke halaman atau situs atau ke alamat email dalam
dokumen HTML.
24. Silakan blok menu “Home”. INGAT! Home saja yach… garisnya gak ikut.
25. Kemudian tekan CTRL+K. Kemudian isikan pada bagian Address : index.html
26. Selanjutnya untuk menu yang lain berilah link menuju halaman sbb:
- Order => order.html
- Porto folio => porto-folio.html
- Contact => contact.html
- Login => login.html

J. Menulis Hak Cipta

Anda tentu tidak mau kan.. hasil karya anda diakui orang lain. Nah kalo gak mau jangan
lupa tulis pada bagian FOOTER peringatan Hak Cipta
27. Silakan ganti tulisan FOOTER dengan :
Copyright 2009 www.NamaSitusAnda.com. Hak Cipta Dilindungi Undang-Undang HAKI
28. Jangan lupa berilah font: Tahoma, size: 9pt, warna: kuning

K. Menyimpan Hasil Kerja

Hayooo cepatan disimpan… Ntar mati lampu… Nyesel lhooooo
29. Tekan CTRL+S. Berilah nama index.html
L. Lebar Desain Website
Di dunia persilatan desain web, dikenal dua pendekar, yaitu lebar tetap (fix width) dan
lebar ikut layar.
30. Saya memilih lebar yang tetap dan saya putuskan untuk membuat desain web
dengan lebar 750 pixel. Caranya klik kanan pada table, pilih “Table Properties...”
31. Isikan angka 750 pada bagian “specify width” dan klik opsi “in pixels”. Jangan lupa
pada bagian alignment pilih center. Ini bertujuan agar desain web anda tampil di
tengah-tengah layar. Klik tombol “OK”
32. Lihat gambar di atas…
M. Mengatur Judul Website
Pernahkan anda perhatikan setiap anda mengunjungi sebuah website, pada bagian atas
browser muncul judul yang berbeda tiap website. Andapun bisa memberikan judul
website untuk webmini anda. Caranya :
33. Klik kanan pada halaman, kemudian pilih “Page Properties…”. Pada bagian title
ketikkan teks : Website Mini Yang Pertama Kubuat
34. Klik OK.

Merubah Judul (title) website.

N. Mengatur Desain Web Dengan CSS

Perhatikan pada bagian MENU. Setelah anda memasukkan hyperlink, otomatis teks

berubah menjadi warna biru. Jelas warna ini tidak cocok untuk background warna hijau.
Cara paling efetif adalah dengan mendefinisikan dalam Style Sheet.
Khusus bagian menu, saya berencana sebagai berikut :
- Link tetap tampil dengan warna kuning.
- Jika link dilalui mouse (disebut: hover) muncul garis bawah.
- Jika link aktif (disebut: active) berubah menjadi warna putih
- Jika link second alias sudah pernah diklik (disebut: visited) menjadi berwarna putih
bergaris bawah.
Untuk bagian BODY, saya mau :
- Paragraf maupun tabel, memakai font Tahoma dengan ukuran 11pt, dengan warna
font black
- Pengaturan link pada bagian body sebagai berikut :
o Link berwarna biru
o hover: berwarna hijau bergaris bawah
o visited: berwarna merah
35. Caranya: buka mode HTML. Perhatikan pada baris kode… Oops!!! JANGAN KEBURU
PUYENG YAA….
36. Perhatikan terdapat kode (disebut TAG) seperti di bawah ini:


37. Silakan tekan ENTER setelah tag


40. Sekarang cobalah kembali ke mode NORMAL. Disana terlihat seluruh halaman web
anda berwarna hitam.
41. Tugas anda selanjutnya adalah memberikan warna putih untuk tabel, biar keren …
gituhhh….
42. Siaaaaaaaaap … Silakan klik kanan dan pilih “Table Properties…”. Terus… pada
bagian background pilih warna putih.
43. Klik OK.

O. Membuat Border Tebal pada Bagian Sisi Luar Tabel
Untuk lebih mempercantik model website anda bagaimana kalo diberikan garis-garis
pinggir yang agak tebal dan berwarna hijau.
44. Caranya, klik kanan pada tabel, pilih “Table Properties …”, pada bagian boder isikan
angka 2 dan color, pilih warna hijau.
P. Membuat Heading dan Sub Heading
Agar Judul pada halaman website kita menjadi besar, set menjadi jenis Heading.
45. Ketiklah tulisan : Ini Halaman Pertama.
46. Bloklah teks tersebut, kemudian pada bagian Style, pilih Heading 1.
47. Buat pula sub heading-nya, Tulislah : Ini Sub Judul. Dan set menjadi Heading 2.
48. Untuk paragraph anda cukup menekan ENTER, kemudian ketiklah beberapa kalimat
sesuka anda.
Sampai detik ini anda sudah memiliki satu halaman website sederhana.
Bagaimana dengan desainnya. Lumayan Cantiik khan… SEDERHANA tapi ELEGAN… dan
yang lebih penting browser akan lebih cepat meload halaman anda, karena tidak
terdapat GRAFIK.
Untuk lebih mempercantik lagi baiknya pada bagian HEADER diberi bumbu berupa
grafik. Silakan masuk ke Bab berikutnya…..

Perhatikan hasilnya ….
Hasil Sejauh ini …. Hmmm… Lumayaan
Panduan Membuat Website Mini
www.master-bisnis.com - Rahasia Sang Jutawan INTERNET
19
BAB 4
MEMBUAT HEADER
A. EDITING HEADER DENGAN PHOTOSHOP
Siapkan satu buah gambar dengan ukuran 750 x 150 pixel.
Saya sudah menyediakan sample-nya, silakan diunduh disini:
www.master-bisnis.com/download.php?f=header.zip
1. Silakan buka file tersebut dengan photoshop.
2. Silakan ganti teks www.NamaDomain.com dengan nama situs anda.
3. Ganti Your Name dengan Nama Anda, misalnya Joko Kenther.
4. Ganti Product Name dengan Nama Produk Anda
5. Ganti juga Your Slogan Write Here dengan slogan situs anda.
6. Simpan.
B. SAVE AS WEBPAGE
Langkah terakhir adalah menyimpannya dalam format HTML. Caranya :
7. Pilih Menu File >> Save for Web …
8. Perhatikan ukuran yang dihasilkan. Usahakan ukuran file tidak lebih dari 20 KB. Ini
bertujuan untuk mempercepat proses loading situs anda kelak.
9. Untuk memperkecil ukuran file, silakan ganti formatnya menjadi JPEG medium.
Untuk lebih jelas, perhatikan pada gambar di bawah ini :
Panduan Membuat Website Mini
www.master-bisnis.com - Rahasia Sang Jutawan INTERNET
20
10. Klik Save. Kemudian simpan pada sub folder images dengan tipe berkas JPG ditempat
anda membuat file index.html
C. MENYISIPKAN KE TEMPLATE
11. Buka file index.html dengan Microsoft Frontpage
12. Hapuslah tulisan HEADER
13. Kursor tetap pada bagian tersebut (HEADER)
14. Klik menu Insert >> Picture >> From File …
Setting ke
dalam JPEG
Medium Size
Perhatikan besar file
yang dihasilkan
disini

15. Ambil gambar header.jpg pada folder images, kemudian klik Insert.
16. Selesai….
17. Silakan kembali buka dengan Browser anda….
18. Inilah hasilnya
Hasil Akhir Desain Minisite Anda

BAB 5
TESTIING WEBSIITE
A. Testing
Sebelum melakukan testing desain web anda, pastikan anda telah membuat file-file
sebagai berikut dengan desain yang sama. Caranya cukup copy dan pastekan disitu juga,
kemudian gantilah menjadi file-file sebagai berikut:
1. order.html
2. porto-folio.html
3. contact.html
4. login.html
Selanjutnya isi dengan data :
1. Order.html >> diisi dengan tata cara order produk anda
2. porto-folio.html >> diisi dengan porto folio usaha anda
3. contact.html >> diisi dengan alamat email atau alamat rumah anda, bila client ingin
menghubungi anda.
4. login.html >> diisi dengan form login, jika anda menggunakan script
membership/affiliate
B. Upload File
Untuk mengupload file-file anda ke hosting sungguhan (yang bayar), Anda bisa
melakukannya dengan dua cara:
1. Dengan file manager yang disediakan oleh web hosting
2. Dengan software FTP Client. Seperti WS FTP, Cute FTP atau yang gratis, yaitu
FileZilla.
Cara Upload dengan FileZilla.
Caranya :
Jalankan software FileZilla. Masukkan informasi berikut sesuai kolomnya.
- Mesin : diisi alamat ftp
- Nama pengguna : diisi dengan username
- Kata kunci : diisi dengan password
Data diatas bisa anda dapatkan pada saat anda mendaftar di pada layanan hosting anda.
Klik Koneksi Cepat.

Kolom sebelah kanan (remote) adalah informasi data situs anda. Sedangkan kolom sebelah
kiri adalah situs local (direktori komputer anda).
Untuk mengupload, cukup dengan drag – drop saja. Dan tunggu hingga proses selesai.
C. Website Mini = Duit = Pasif Income
Apakah anda mau jika desain sederhana ini bisa menjadi salah satu senjata penghasil
uang anda di internet?
Jika jawabannya YAA … Maka anda hanya membutuhkan beberapa perubahan dan
beberapa uang.
Yang anda butuhkan adalah :
1. Hosting dan domain sendiri
2. Script Afiliasi yang dirancang untuk situs mini
Untuk biaya pembelian script Affiliate Minisite adalah sebesar ZERO COST. Why? Sebab
anda sudah memilikinya sekarang. Yang anda fikirkan adalah biaya pembelian domain
dan hosting selama 1 tahun.
Biayanya cukup terjangkau, hanya dengan merogoh kocek sebesar Rp 150.000 anda
sudah memiliki domain dan hosting sendiri selama masa 1 tahun. Murah khan …
Saya akan tunjukkan tempatnya. Disini www.Master-Bisnis.com/go/webhosting.html
Drag - Drop

Silakan form order dan ikuti petunjuknya. Pilih saja paket starter.
Selanjutnya tugas anda adalah sedikit memberikan sentuhan agar situs HTML anda bisa
menjadi mesin uang otomatis.
Caranya :
1. Ganti ekstensi file index.html anda menjadi index.php
2. Buka file tersebut (index.php) dengan program Notepad.
3. Sebelum semua tag HTML anda, tambahkan kode sebagai berikut

4. Simpan.
Fungsi dari kode di atas adalah untuk mencatat terjadinya sponsoring member
afiliasi anda.
5. Selanjutnya timpalah file index.php milik script Nagaya Affiliate System dengan file
index.php milik anda tersebut.
Catatan:
- Pada script Nagaya Affiliate system for Minisite versi 2.0 anda tidak perlu merancang
desain minisite secara sempurna. Anda cukup merubah kode pada header.php dan
footer.php untuk merubah desainnya. Tetapi anda bisa membuat desain sendiri.
Tetapi ini hanya berlaku untuk file index.php saja. Untuk file yang lain, anda harus
memotong bagian HEADER desain anda dan mempastenya ke header.php. Dan bagian
FOOTER desain anda kemudian mempastenya ke footer.php
Setelah proses desain selesai, anda harus meng-uploadnya kembali
Dan jangan lupa lakukan promosi dengan tehnik formula “AFFILIATE SUPER PROMO” yang
bisa anda peroleh di member area.

-oO Selesai Oo

BAB 6
PENUTUP
Sebagai penutup tutorial ini, ada beberapa tips yang bisa anda gunakan untuk ilmu desain
wesite mini:
1. Gunakan kombinasi warna yang tidak mencolok. Misalnya gunakan background hitam
atau biru tua. Background body dengan warna putih, font default hitam, Tahoma size
12 pt. Gambar header tidak terbanyak warna yang akan mengakibatkan membesarnya
ukuran file tersebut.
2. Jangan terlalu banyak menyisipkan Flash.
3. Untuk mempercepat load situs anda, sebaiknya gambar header anda pecah menjadi
beberapa bagian kecil dan satukan dengan tabel.
4. Banyaklah belajar dari ahlinya. Jangan pernah mencoba autodidak tanpa mau bertanya
kepada yang lebih ahli. Saya sarankan anda ikut forum-forum diskusi untuk
mempertajam pengetahuan anda tentang desain web.
5. Kalau harus mengeluarkan uang untuk suatu pengetahuan, jangan sungkan untuk
mengeluarkannya. Sebab itu adalah salah satu investasi jangka panjang anda.
6. Cari sendiri di internet ....
Selamat Berkreasi