Cara Menggunakan JQuery

Seperti pada tutorial sebelumnya yaitu Fungsi dari jQuery maka pada tutorial kali ini kita akan membahas Bagaimana cara menggunakan jQuery? wah mantab tuh gan, buruan dong! tenang, akan segera saya jelaskan langkah – langkahnya.

1. Ok pertama – tama adalah kita harus mendownload terlebih dahulu jQuery Library (inti dari jQuery). Dimana download jQuery Library? mau tau aja atau mau tau banget? hehehe… Downloadnya di www.jquery.com , silahkan klik Download jQuery. Saat penulisan tutorial ini library jQuery telah sampai versi 1.9.1
screenshot website jquery.com
gambar : screenshot website jquery.com

2. Pada halaman selanjutnya pilih versi jquery, ada versi Production dan versi Developer. Untuk saat ini pilih versi Production jQuery karena versi Developer ditujukan kepada para master pemrograman dan pengembang jquery.
pilihan download jQuery
gambar :

Catatan :
jQuery selalu merilis dua versi Library yaitu versi Production dan Development. Perbedaannya adalah versi Production ukuran filenya lebih kecil karena telah ‘dimampatkan’ atau istilahnya di Compress. Diperuntukkan bagi pengguna awam yang ingin langsung menggunakan jQuery. Sedangkan versi Development isi filenya mudah dibaca karena belum di Compress dan ditujukan unruk para Developer yang tertarik mempelajari – memanipulasi – bahkan mengembangkan fungsi – fungsi yang dimiliki oleh jQuery.

3. Akan muncul code dari library JQuery
jquery code library
gambar : jquery code library

Klik CTRL + S di keyboard untuk menyimpan kode tersebut ke direktori website anda
logo jquery write less do more
gambar : save jquery lib pada direktori website

4. Ok sekarang adalah kode untuk memanggil jQuery library supaya dapat terLOAD di website yang anda buat. Buka dreamweaver dan masukkan kodenya.
Scriptnya yang saya cetak tebal merah :
script pemanggil jQuery
gambar : script pemanggil jQuery

5. Ok sekarang cara Penggunaannya, inti dari jQuery adalah :
A) Panggil / Load library jQuery (stabilo merah)
B) buat script jquery di bagian head untuk mengontrol object berdasarkan elementnya (stabilo biru)
C) Buat Object beserta elemennya berupa id dan class di bagian body (stabilo abu – abu)

sebagai contoh saya akan membuat control sembunyikan dan tampilkan gambar :
inti dari jQuery
gambar : inti dari jQuery

6. ok sekarang kita lihat hasilnya KLIK DISINI
screenshot hasil
gambar : screenshot hasil

Download Source Latihannya
download now
Download Disini

Demikian cara download dan pemasangan hingga penggunaan jQuery. Sampai jumpa di tutorial jQuery berikutnya yaitu Overlay image. Terima kasih. Semoga Bermanfaat.

Mendesain Theme Tumblr Minimalis

Dalam tutorial desain web ini, kita akan belajar mendesain theme tumblr bergaya retro minimalis yang memiliki tekstur pixel dan warna-warna lembut.

Preview

Sebelum memulai tutorial ini, silakan lihat terlebih dahulu desain tumblr yang akan kita buat. Klik gambar untuk melihatnya di perbesaran 100%.

Judul Tutorial

Detail Tutorial

  • Tingkat Kesulitan: Pemula, Menengah
  • Software yang Digunakan: Adobe Photoshop
  • Teknik yang Dipelajari: Grid 960, Penggunaan Tekstur, Layer Style
  • Lama Pengerjaan: 30 menit

Resource yang Dibutuhkan

Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut:

Tutorial

Langkah 1: Menyiapkan File

Ambil file 960 dari 960.gs. Klik ganda file action Photoshop yang tersedia. Di Photoshop, klik ganda action 12 Column Grid untuk membuat file dengan lebar 960 px dan 12 kolom.

Judul Tutorial
Judul Tutorial

Langkah 2

Perbesar ukuran kanvas menjadi 1280 px x 1280 px dengan perintah Canvas Size (Ctrl + Alt + C).

Judul Tutorial

Langkah 3: Membuat Latar Bertekstur

Buat layer baru dan isi dengan warna #f0f0f0. Beri Layer Style Pattern Overlay menggunakan pola pixel dari PSDfreemium.

Judul Tutorial

Seperti inilah hasil tekstur yang Anda peroleh.

Judul Tutorial

Langkah 4

Buat lagi layer baru dan isi dengan putih. Klik Filter > Noise > Add Noise. Turunkan opacity layer hingga 30% dan ubah blend mode ke Multiply.

Judul Tutorial

Seperti inilah hasil tekstur yang kita peroleh.

Judul Tutorial

Langkah 5: Area Sidebar

Buat shape di samping untuk area sidebar. Gunakan warna #d8d8d8.

Judul Tutorial

Beri Inner Shadow dengan sudut 0 derajat untuk memberi kesan shape ini berada di bawah area isi utama.

Judul Tutorial

Beri Pattern Overlay dengan pola pixel dari PSDfreemium.

Judul Tutorial

Inilah bentuk yang kita peroleh. Di bawah Anda bisa melihat juga detail tekstur yang diperoleh di perbesaran 100%.

Judul Tutorial

Langkah 6

Gandakan shape area latar. Turunkan Fill ke 0%. Beri Layer Style Pattern Overlay.

Judul Tutorial

Inilah hasil tekstur yang diperoleh.

Judul Tutorial

Langkah 7

Tambahkan layer mask. Isi bagian atas shape dengan gradasi dari putih ke hitam. Langkah ini akan menyisakan sedikit pola di bagian atas sidebar.

Judul Tutorial

Langkah 8

Aktifkan tool marquee kolom. Tool ini berguna untuk membuat seleksi dengan lebar 1 px.

Judul Tutorial

Langkah 9

Buat layer baru, buat seleksi 1 px dan isi dengan putih. Ulangi lagi, kali ini isi dengan putih. Simpan kedua garis ini di tepat di ujund area utama situs.

Di bawah Anda bisa melihat garis yang diperoleh pada perbesaran 100% dan 700%. Kedua ini memperkuat kontras antara bidang area utama dan sidebar.

Judul Tutorial

Langkah 10: Logo

Untuk logo, kita gunakan saja logo kain dari PSDfreemium.

Judul Tutorial

Ubah warna dalam Layer Style Color Overlay untuk mengganti logo.

Judul Tutorial

Langkah 11: Isi Sidebar

Buat kotak teks di area sidebar dan isi dengan data sidebar. Untuk header widget sidebar, gunakan Font Lobster. Widget pertama kita akan berupa perkenalan tentang pemilik situs.

Judul Tutorial

Beri efek letterpress dengan memberi Drop Shadow seperti berikut.

Judul Tutorial

Langkah 12

Buat seleksi persegi di samping teks perkenalan dan isi dengan putih. Di tengah kotak beri gambar avatar.

Judul Tutorial

Langkah 13

Buat dua garis 1 px di bawah judul widget sidebar. Beri juga efek letterpress.

Judul Tutorial
Judul Tutorial

Langkah 14

Lakukan proses yang sama untuk membuat widget sidebar yang lain.

Judul Tutorial

Langkah 15: Isi Blog

Mulai dengan menambahkan pita berisi informasi tipe artikel. Kita menggunakan pita dari PSDfreemium.

Judul Tutorial

Langkah 16

Di sebelah pita, tuliskan judul artikel. Seperti teks di sidebar, beri efek letterpress.

Judul Tutorial
Judul Tutorial

Langkah 17

Buat kotak dengan warna #d1d1d1. Isi dengan metadata artikel.

Judul Tutorial

Langkah 18

Buat kotak untuk area video. Beri Layer Style Stroke.

Judul Tutorial
Judul Tutorial

Langkah 19

Ambil gambar dan simpan di atas kotak. Ubah menjadi Clipping Mask dengan menekan Ctrl + Alt + G agar gambar masuk ke dalam kotak. Di sini, saya menggunakan gambar dari Hevonens

Judul Tutorial

Langkah 20

Buat layer baru dan simpan di bawah video. Ctrl-klik kotak video. Isi seleksi dengan hitam. Klik Filter > Blur > Gaussian Blur.

Judul Tutorial

Langkah 21

Transformasi bayangan dengan menekan Ctrl + T. Perkecil bayangan lalu lakukan proses Warp hingga kedua ujung bayangan keluar. Turunkan Opacity layer bayangan ke 30%.

Judul Tutorial

Langkah 22

Buat lingkaran hitam dan segitiga putih di tengah area video. Turunkan Opacity keduanya ke 50% dan 70%.

Judul Tutorial

Beri Outer Glow pada lingkaran untuk memberinya sedikit kilauan.

Judul Tutorial
Judul Tutorial

Langkah 23

Buat kotak teks di bawah area video dan isi dengan berita singkat. Beri efek Letterpress.

Judul Tutorial
Judul Tutorial

Langkah 24

Gandakan artikel yang tadi kita buat. Hapus area video dan ubah tipenya menjadi Article.

Judul Tutorial

Langkah 25: Kotak Pencarian

Ada satu bagian terlupakan, kotak pencarian. Mulai dengan membuat sebuah rounded rectangle berwarna #efefef dengan radius sangat besar. Pastikan lebarnya harus sama dengan lebar widget lain.

Judul Tutorial

Beri Drop Shadow dan Stroke.

Judul Tutorial
Judul Tutorial

Langkah 26

Di sisi kiri, buat shape lebih gelap seperti terlihat di bawah.

Judul Tutorial

Langkah 27

Tumpukkan rounded rectangle dan lingkaran sehingga diperoleh ikon kaca pembesar sederhana.

Judul Tutorial

Langkah 28

Tahan Ctrl lalu klik kedua layer pembentuk ikon kaca pembesar. Isi seleksi dengan putih lalu geser ke bawah 1 px. Langkah ini akan memberikan efek letterpress pada ikon.

Judul Tutorial

Langkah 29

Terakhir, beri teks search di dalam kotak pencarian.

Judul Tutorial

Hasil Akhir

Berikut adalah hasil akhir desain web yang kita peroleh. Melalui tutorial desain sederhana ini, Anda sebetulnya belajar banyak teknik yang saat ini sedang populer seperti penggunaan tekstur lembut. Anda juga belajar teknik dasar penggunaan grid dalam desain.

Klik gambar untuk melihatnya di perbesaran 100%.

Judul Tutorial

Membuat Situs Resource Desain Premium di Photoshop

Dalam tutorial ini kita akan mendesain sebuah situs penjual resource desain premium. Di sini, kita akan belajar cara membuat situs yang tidak saja rapi, bersih, dan menarik tapi juga bisa menjual.

Untuk tutorial ini, kita akan mengubah PSDfreemium –situs penyedia resource desain gratis– menjadi situs berbayar. PSDfreemium akan memiliki tombol call to action yang mempermudah pengunjung untuk membeli, beberapa baris perkenalan yang mudah dibaca, menampilkan preview resource terbaiknya, dan area login bagi para anggotanya.

Preview

Silakan lihat terlebih dahulu desain yang akan kita peroleh. Klik gambar untuk melihatnya dalam ukuran 100%.

Membuat Situs Resource Desain Premium di Photoshop
Klik gambar untuk melihatnya pada ukuran lebih besar.

Resource yang Dibutuhkan

Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut:

Tutorial

Langkah 1: Mempersiapkan Kanvas

Ambil action grid 960, klik ganda file action untuk memasukkannya ke Photoshop. Dari panel actions, klik ganda 12 Column Grid untuk membuat file baru dengan standar 12 kolom.

Membuat Situs Resource Desain Premium di Photoshop
Membuat Situs Resource Desain Premium di Photoshop

Langkah 2

Kanvas saat ini terlalu pendek. Untuk memperbesarnya, buat seleksi dengan tool crop hingga ke luar area kanvas. Tekan Ctrl + Enter untuk menerima proses perubahan.

Membuat Situs Resource Desain Premium di Photoshop

Langkah 3: Logo

Ambil logo PSDfreemium dan simpan di pojok kiri atas. Perhatikan bahwa logo ini harus menempel tepat pada guide. Inilah fungsinya sistem grid, mengatur alignment objek.

Membuat Situs Resource Desain Premium di Photoshop

Langkah 4: Bagian Utama Situs

Buat persegi di bawah logo. Atur ukurannya hingga kedua sisi kiri dan kanan keluar dari kanvas. Beri Layer Style berikut. Untuk pola, saya menggunakan tekstur cover buku.

Membuat Situs Resource Desain Premium di Photoshop
Membuat Situs Resource Desain Premium di Photoshop
Membuat Situs Resource Desain Premium di Photoshop
Membuat Situs Resource Desain Premium di Photoshop

Seperti bisa Anda lihat di bawah, Layer Style yang digunakan di sini memberi efek seolah tekstur berada dalam layer di bawah elemen lainnya.

Membuat Situs Resource Desain Premium di Photoshop

Langkah 5: Kalimat Pembuka

Buat beberapa kalimat singkat namun mudah menarik perhatian pembaca. Di sini, saya menggunakan font yang tidak safe web. Ini tidak jadi masalah karena dalam proses coding, teks ini bisa dibuat dalam bentuk gambar. Warna kedua teks adalah hijau muda dan hijau tua, disesuaikan dengan latar yang digunakan agar kontras yang dihasilkan tidak berlebihan.

Membuat Situs Resource Desain Premium di Photoshop

Langkah 6

Berikut adalah Layer Style untuk teks besar.

Membuat Situs Resource Desain Premium di Photoshop

Langkah 7

Ini adalah Layer Style untuk teks kecil.

Membuat Situs Resource Desain Premium di Photoshop
Membuat Situs Resource Desain Premium di Photoshop

Langkah 8: Tombol Call to Action

Ambil tombol abu-abu Candy Colored dari PSDfreemium. Ubah teks menjadi “Take a Tour”. Perbesar lebar tombol menjadi 120% tanpa mengubah lebar teks.

Membuat Situs Resource Desain Premium di Photoshop

Langkah 9

Buat satu lagi tombol untuk ajakan bergabung. Kali ini gunakan warna hijau gelap. Perhatikan bahwa di sini kita menggunakan abu-abu untuk “Take a Tour” dan hijau terang untuk “Join Today”. Perbedaan warna ini berfungsi mengarahkan perhatian pembaca ke tujuan situs ini yaitu menjual.

Membuat Situs Resource Desain Premium di Photoshop

Langkah 10: Menambah Gambar Resource

Ambil Hard Drive PSD. Simpan di sisi kanan. Atur posisinya agar keluar dari grid dan elemen latarnya. Posisi seperti ini membuatnya terlihat menonjol, unik, berbeda dari elemen lainnya.

Membuat Situs Resource Desain Premium di Photoshop

Langkah 11: Navigasi Utama

Buat navigasi utama situs di pojok kanan atas. Lihat posisinya, link ini harus tepat menempel pada grid.

Membuat Situs Resource Desain Premium di Photoshop

Langkah 12: Area Login – Normal

Desain juga haruslah memudahkan anggota yang sudah bergabung. Untuk itu, kita buat tombol login di halaman depan. Buat sebuah rounded rectangle tepat di atas navigasi utama.

Membuat Situs Resource Desain Premium di Photoshop

Langkah 13

Beri teks “LOGIN” dan tambahkan panah bawah di sebelahnya. Beri layer style Drop Shadow berikut untuk kedua objek ini. Simpan semua elemen ini dalam sebuah group.

Membuat Situs Resource Desain Premium di Photoshop
Membuat Situs Resource Desain Premium di Photoshop

Langkah 14: Area Login – Aktif

Untuk mempermudah anggota kita akan membuat formulir login langsung dalam bentuk dropdown menu. Anggota tidak perlu masuk ke halaman lain.
Gandakan group login normal. Perbesar area login dengan menambah rounded rectangle dengan warna abu-abu gelap, lebih gelap dari warna di kondisi normal. Ubah panah hingga mengarah ke atas.

Membuat Situs Resource Desain Premium di Photoshop

Langkah 15

Tambahkan teks “User Name” dan beri layer style berikut.

Membuat Situs Resource Desain Premium di Photoshop
Membuat Situs Resource Desain Premium di Photoshop

Langkah 16

Buat rounded rectangle untuk formulir dan beri Layer Style berikut.

Membuat Situs Resource Desain Premium di Photoshop
Membuat Situs Resource Desain Premium di Photoshop
Membuat Situs Resource Desain Premium di Photoshop

Langkah 17

Ulangi proses tadi untuk membuat formulir Password.

Membuat Situs Resource Desain Premium di Photoshop

Langkah 18

Buat tombol login dengan warna hijau dan beri Layer Style berikut.

Membuat Situs Resource Desain Premium di Photoshop
Membuat Situs Resource Desain Premium di Photoshop
Membuat Situs Resource Desain Premium di Photoshop
Membuat Situs Resource Desain Premium di Photoshop

Langkah 19

Kita juga perlu memberi pengingat agar browser bisa menyimpan data anggota. Beri teks “Remember Me”.

Membuat Situs Resource Desain Premium di Photoshop
Membuat Situs Resource Desain Premium di Photoshop

Langkah 20

Buat kotak kecil di samping teks.

Membuat Situs Resource Desain Premium di Photoshop
Membuat Situs Resource Desain Premium di Photoshop
Membuat Situs Resource Desain Premium di Photoshop

Langkah 21

Buat link seandainya ada yang lupa password. Beri teks “Forgot Password?” Gunakan warna merah dan beri Layer Style berikut.

Membuat Situs Resource Desain Premium di Photoshop
Membuat Situs Resource Desain Premium di Photoshop

Langkah 22: Info Situs

Buat kotak putih seperti terlihat di bawah. Beri Layer Style berikut dengan pola Minimal patterns for backgrounds.

Membuat Situs Resource Desain Premium di Photoshop
Membuat Situs Resource Desain Premium di Photoshop

Langkah 23

Beri layer mask dan lukis hitam sehingga pola yang muncul sangat tipis, subtle. Anda bisa melihat perbandingannya di bawah. Teksturnya sangat tipis tapi berdasarkan pengalaman saya itulah yang membuat desain menarik.

Membuat Situs Resource Desain Premium di Photoshop

Langkah 24

Ambil ikon lalu beri judul dan sedikit keterangan. Perhtikan posisi teks dan ikon. Semua berada dalam grid.

Membuat Situs Resource Desain Premium di Photoshop

Langkah 25

Ulangi proses ini hingga diperoleh tiga kolom informasi.

Membuat Situs Resource Desain Premium di Photoshop

Langkah 26: Menampilkan resource Terpilih

Buat judul untuk resource-resource terpilih. Pastikan untuk memilih font yang menarik. Beri Layer Style berikut.

Membuat Situs Resource Desain Premium di Photoshop
Membuat Situs Resource Desain Premium di Photoshop

Langkah 27

Buat layer baru. Aktifkan brush berukuran 1 px dan naikkan Spacing.

Membuat Situs Resource Desain Premium di Photoshop

Langkah 28

Buat garis lurus memotong judul.

Membuat Situs Resource Desain Premium di Photoshop

Langkah 29

Hapus garis yang menutupi judul.

Membuat Situs Resource Desain Premium di Photoshop

Langkah 30

Ambil gambar dengan lebar empat kolom dan beri judul di bawahnya. Beri Layer Style Stroke.

Membuat Situs Resource Desain Premium di Photoshop
Membuat Situs Resource Desain Premium di Photoshop

Langkah 31

Tambahkan gambar resource lainnya.

Membuat Situs Resource Desain Premium di Photoshop

Langkah 32

Ambil Ribbon Rectangle dari PSDfreemium dan simpan di atas salah satu gambar.

Membuat Situs Resource Desain Premium di Photoshop

Langkah 33

Buat kotak dan beri layer style yang sama dengan kotak di atas.

Membuat Situs Resource Desain Premium di Photoshop

Langkah 34: Footer

Kita akan menggunakan footer sederhana. Buat teks berisi data tahun dan info copyright lalu beri Drop Shadow.

Membuat Situs Resource Desain Premium di Photoshop
Membuat Situs Resource Desain Premium di Photoshop

Hasil Akhir

Di bawah adalah hasil akhir tutorial yang kita peroleh. Klik gambar untuk melihatnya pada ukuran 100%.

Membuat Situs Resource Desain Premium di Photoshop
Klik gambar untuk melihatnya pada ukuran lebih besar.

Membuat Drop Down Menu Sederhana di Website

Pada tutorial Dreamweaver kali ini saya akan mencoba memberikan penjelasan bagaimana cara membuat drop down menu yang simple dan sederhana agar bisa dan mudah dipelajari serta dikembangkan mungkin nantinya oleh para calon web developer maupun web designer yang singgah di website ilmugrafis. Sedikit penjelasan, Dropdown Menu merupakan menu yang bila kita sorot dengan mouse maka menu tersebut akan memunculkan menu yang lain (sub menu). Saat ini banyak sekali yang sudah menggunakan Drop Down menu karena alasan terlihat lebih modern dan canggih, menambah keindahan website sampai menghemat space/ruang di websitenya karena dengan drop down kita bisa memberikan sub menu tersembunyi pada menu di website kita.

Ok, mari kita mencoba membuatnya:

1. Buka aplikasi dreamweaver kita, disini saya menggunakan Dreamweaver 8 karena ringan di komputer saya. Bagi yang sudah menggunakan dreamweaver CS5 bahkan CS6 tenang saja karena cara ini bisa diaplikasikan untuk semua dreamweaver
(start >> all program >> Dreamweaver)

2. buat CSS file, caranya. Klik File >> New >> Tab General >> Basic Page >> Css
membuat css

tulis Kode CSS di bawah ini

/* CSS untuk drop down menu dimulai */
ul
{
list-style:none;
padding:0px;
margin:0px
}ul li
{
display:inline;
float:left;
}ul li a
{
color:#ffffff;
background:#990E00;
margin-right:5px;
font-weight:bold;
font-size:12px;
font-family:verdana;
text-decoration:none;
display:block;
width:100px;
height:25px;
line-height:25px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border: 1px solid #560E00;
}

ul li a:hover
{
color:#cccccc;
background:#560E00;
font-weight:bold;
text-decoration:none;
display:block;
width:100px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border: 1px solid #000000;
}

ul li.sublinks a
{
color:#000000;
background:#f6f6f6;
border-bottom:1px solid #cccccc;
font-weight:normal;
text-decoration:none;
display:block;
width:100px;
text-align:center;
margin-top:2px;
}

ul li.sublinks a:hover
{
color:#000000;
background:#FFEFC6;
font-weight:normal;
text-decoration:none;
display:block;
width:100px;
text-align:center;
}

ul li.sublinks
{
display:none;
}

/* CSS drop down menu sederhana end */

wow banyak bener, tenang copy dan paste saja CSS ini ke CSS yang baru anda buat dengan dreamweaver,
memasukkan css
save dan beri nama “dropdown.css”

3. Sekarang buat halaman web, pakai saja HTML agar lebih simple, karena jika memilih format PHP butuh bantuan Sever untuk mengoprasikannya
caranya mirip css tadi, cuma urutannya File >> New >> Basic Page >> Html >> Ok
sekarang panggil css yang kita buat, caranya:
css oke
klik browse, lalu ambil “dropdown.css”, OK
Nah setelah langkah di atas benar maka akan ada code seperti ini di halaman html kita.
code css
itu artinya style (CSS) yang kita buat telah masuk ke halaman html

4. Masukkan kode ini ke code html kita. pilih code

<!– Menu Pertama Dimulai –>
<ul>
<li><a href=”#” class=”dropdown”>Menu One</a></li><li class=”sublinks”>
<a href=”#”>Link 1</a>
<a href=”#”>Link 2</a>
<a href=”#”>Link 3</a>
<a href=”#”>Link 4</a>
<a href=”#”>Link 5</a>
</li></ul>
<!– Menu Pertama Selesai –>

<!– Menu Kedua Dimulai –>
<ul>
<li><a href=”#” class=”dropdown”>Menu Two</a></li>

<li class=”sublinks”>
<a href=”#”>Link 1</a>
<a href=”#”>Link 2</a>
<a href=”#”>Link 3</a>
<a href=”#”>Link 4</a>
<a href=”#”>Link 5</a>
</li>

</ul>
<!– Menu Kedua Selesai –>
<!– dan seterusnya –>

copy dan paste code di atas di bagian antara <body> …. </body> , bagi yang belum mengerti tag seperti ini lihat tutorial BELAJAR WEBSITE HTML

4. Tambahkan JQuery Script, wow apa lagi ini ya? tenang… lebih jelasnya klik Pengenalan JQuery Website
memasukkan jquery
tulis codenya, Letakkan di bawah tag Title

setelah itu tambahkan code Javascript ini,
letakkan di bawah tag JQuery

<script type=”text/javascript”>$(function(){
$(‘.dropdown’).mouseenter(function(){
$(‘.sublinks’).stop(false, true).hide();var submenu = $(this).parent().next();

submenu.css({
position:’absolute’,
top: $(this).offset().top + $(this).height() + ‘px’,
left: $(this).offset().left + ‘px’,
zIndex:1000
});

submenu.stop().slideDown(300);

submenu.mouseleave(function(){
$(this).slideUp(300);
});
});
});
</script>

ini gambarnya
tambahan javascript
Selesai, dan hasilnya kira – kira seperti ini
drop down menu
Gambar: Drop down menu sederhana

Drop down menu telah selesai dibuat, Lihat Demo Drop Down menu ini Disini. Anda bisa mengganti menu – menu sesuai keinginan anda dengan mengedit teks “Menu One” atau “Menu Two” dan Sub menu “Link 1” sampai dengan “Link 5” pada halaman coding HTML, silahkan dikembangkan sesuai keinginan. Sampai ketemu di tutorial website lainnya. Source code Drop Down menu ini bisa anda download disini. Terima kasih, semoga bermanfaat. Jika ada Saran maupun pertanyaan silahkan kontak saya. Terima kasih, semoga bermanfaat

Cara Membuat Website Sederhana Untuk Pemula Dalam 5 Menit

Cara Membuat Website Sederhana Pemula
Cara Membuat Website

Cara membuat website mungkin bisa dibilang bukan hal yang sulit bahkan cukup mudah untuk para webmaster (pembuat website). Namun bagaimana dengan teman-teman kita yang baru saja ‘terjun’ di dunia blogging ? apakah mereka juga menganggap Cara Membuat Website adalah hal yang mudah ? tentu tidak bukan, atas dasar itulah saya akan mencoba menjelaskan tahap demi tahap Bagaimana Cara Membuat Website dari Dasar atau Awal untuk para Pemula tentunya.

Tenang saja, Cara Membuat Web yang akan saya berikan ini tidak akan banyak memakan waktu Anda, karena sesuai judul yang saya buat Cara Membuat Website ini hanya akan memakan waktu 5 Menit saja, bahkan mungkin bisa kurang dari itu.

Baiklah, disini saya akan membagi Tutorial Membuat Website ini menjadi 2 Bagian.

  1. Cara Membuat Website
  2. Cara Upload File ke Website Menggunakan FTP
  3. Video Cara Membuat Website

Kedua Cara diatas akan saya jelaskan secara gamblang dengan bahasa yang sesederhana mungkin. Jadi untuk Anda yang benar-benar buta akan Website mampu mengikuti Tutorial Membuat Website ini dengan Mudah.

1. Cara Membuat Website

Sebelum membuat website, hal yang harus Anda persiapkan adalah Hosting + Domain. Jika Anda bingung apa itu Hosting, maka kita bisa mengibaratkan Hosting itu ibarat Rumah untuk menyimpan barang-barang (file) dan Domain ibarat Nama Jalannya, agar pengunjung bisa berkunjung.

Untungnya hampir semua penyedia layanan website sekarang ini sudah menyediakan paket lengkap, yaitu mereka sudah menyiapkan Hosting dan Domain menjadi satu, jadi pesan Hosting dapat gratis Domain. Karena kita nyari yang gratisan jadi kita gak akan dapat Domain, melainkan hanya akan mendapat SubDomain (ada embel-embelnya, semacam blogspot.com atau wordpress.com).

Kembali ke Topik, untuk Cara Membuat Website.

  1. Kunjungi situs penyedia Layanan pembuatan Website, disini akan saya beri contoh menggunakan situs penyedia layanan yang cukup populer di Indonesia, yaitu IDHostinger. Langsung saja kunjungi http://www.idhostinger.com/
  2. Setelah terbuka, selanjutnya klik Buat Akun. Letaknya ada di pojok kanan atas, dekat form login.
  3. Di halaman ini Anda diwajibkan mengisi. Nama, E-mail dan Password Anda. Isikan sesuai tempatnya.

    Jangan lupa centang, Saya setuju dengan Ketentuan Penggunaan Layanan.

  4. Selanjtunya, kita buka Tab Baru dan masuk ke Email kita, untu mengaktivasi Akun kita. Nanti ada dua Email dari yang dikirim oleh IDHostinger, Anda lihat saja yang pertama atau yang paling bawah.

    Tingal Anda klik atau salin link tersebut ke Address Bar dan klik Enter.

  5. Disini kita akan disuruh memilih Paket Hosting yang akan kita pakai nanti untuk Membuat Website. Karena kita hanya akan Membuat Web untuk Belajar saja, maka kita Order saja yang Paket Gratis.
  6. Kalau diatas kita sudah memesan Hostingan makan setelah itu kita akan diberi hadiah SubDomain. Untuk SubDomainnya ada banyak pilihan, silahkan Anda pilih yang paling cocok atau sesuai dengan selera Anda. Lalu klik Buat.
  7. SubDomain + Hosting Anda akan dibuat, jadi tunggu hingga muncul pemeberitahuan ‘Akun telah dibuat 100%‘ di pojok kanan bawah.

    Selanjutnya, silahkan Anda klik Lihat Hasil.

  8. Dari sini kita sudah berhasil membuat akun untuk membuat Websitenya, namun kita belum memesan Hosting + SubDomain atau dengan kata lain suah berhasi Mendaftar / Membuat Website. Namun kita harus melanjutkan untuk mengisi website kita dengan Artikel atau File. Caranya dengan mengklik tombol Kelola.
  9. Maka Anda akan dibawa ke Cpanel (Control Panel). Disinilah tempat Anda mengatur segala sesuatu yang berkaitan dengan website Anda. Mulai dari :
    • Menambah Subdomain
    • Parkir Domain
    • Impor Website
    • Impor Database
    • Mengatur Halaman Error

    Dan masih banyak lagi. Namun kita tidak akan membahas fitur-fitur yang ada di Cpanel ini (butuh watu berhari-hari). Tujuan kita masuk Cpanel adalah untuk mengambil Data mengenai : ‘Nama pengguna‘.

    Lihat dan silhkan Anda Catat (kalau bisa dikertas atau buku).

 

2. Cara Upload File ke Website Menggunakan FTP

Untuk mengupload suatu file kedalam Website atau lebih tepatnya kedalam Hosting (rumah) sebenarnya cukup mudah, yaitu cukup dengan mengklik File Manajer dan tinggal Anda pilih file yang akan Anda Upload.

Tapi yang jadi masalah bagaimana jika kita ingin mengupload file kedalam Hosting saat kita menggunakan HandPhone ? tentu kita tidak mungkin masuk File Manajer yang ada disediakan IDHostinger, karena ada beberapa Javascript yang harus dijalankan, dan itu tidak mungkin dijalankan di browser Handphone (operamini / ucbrowser).

Maka dari itu, disini kita akan meminta bantuan FTP. FTP Online ini fungsinya menjadi perantara, Antara file yang akan kita upload dengan Hosting yang sudah kita pesan tadi (tanpa melalui file manajer).

Mohon maaf disini saya akan memberikan screenshotnya dari tampilan PC, tapi sebenarnya sama persis kok tampilannya antara di PC dan Handphone, karena saya sering membuka di HP juga.

Untuk Upload filenya mealalui FTP Online tentunya kita harus memilih 1 dari ribuan FTP Online yang ada di Internet, disini saya memutuskan untuk memilih Net4India karena sudah support https dan yang terpenting adalah sangan HandPhone Friendly (nyaman dan tidak terlalu berat jika dibuka melalui hp).

Sekarang, langkah-langkah Cara Upload File ke Website atau Hosting menggunakan FTP Online.

  1. Buka https://ftp.net4india.com/

    Tadi sebelumnya saya menyuruh Anda untuk mencatat ‘Nama pengguna‘ bukan ? gunanya ya untuk mengisi Login Panel di FTP ini. Ada tiga form yang harus Anda isi.

    FTP server: Isikan Nama Domain Anda
    Username: Isikan Nama Pengguna
    Password: Isikan Password

    Setelah semua terisi silahkan Anda klik Login.

    * yang dimaksud password disini adalah password saat Anda mengisi SubDomain, jadi bukan password saat Anda membuat akun IDHostinger.

  2. Setelah klik Login, maka Anda akan masuk kedalam direktori root.

    Di direktori (folder) ini Anda tidak bisa mengupload apapun, andai kata bisa upload, Anda tidak akan bisa mengaksesnya melalui url (tidak bisa diakses umum), karena filenya berada di dalam. Solusinya Anda klik dulu public_html.

  3. Disinilah tempat untuk mengatur halaman depan website Anda. Cara Mengaturnya, pertama-tama Anda hapus dulu default.php yang ada di direktori public_html ini. Ohya, default.php ini isinya adalah ucapan selamat datang yang otomatis dibuat oleh pihak IDHostinger, jadi kita hapus saja tidak masalah.

    Centang filenya dan pilih Delete. Lalu pilih Submit, dan klik Back untuk kembali ke public_html.

  4. Langkah selanjutnya tinggal kita upload file kita ? tapi file apa yang akan kita upload ? jangan kuatir disini saya akan memberikan script / kode html untuk membuat halaman depan website, oya kode ini bukan buatan saya melainkan buatan master problogiz, yang juga sudah valid HTML5. Langsung saja ini dia kodenya.
    <!DOCTYPE html>
    <html lang=”en”><head>
    <meta charset=”utf-8″>
    <title>Page Title</title><!– meta tags –>
    <meta name=”keywords” content=””>
    <meta name=”description” content=””>

    <!– stylesheets –>

    <style>
    /* ~~~~~~~~~ layout ~~~~~~~~~~ */
    #container {width: 960px;margin: 20px auto;background: #fff;padding: 30px;overflow: hidden;}

    /* ~~~~~~~~~ header ~~~~~~~~~~ */
    #main-navigation {border-bottom: 5px solid #3942A3;margin: 20px 0;}
    #main-navigation ul {overflow: hidden;width: 100%;list-style: none;font-size: 1.6em;}#main-navigation li {float: left;}
    #main-navigation li a {background: #3972A3;margin: 0 5px 0 0;padding: 5px 30px;display: block;color: #000000;text-decoration: none;}
    #main-navigation li.current a {background: #666;}
    #main-navigation li a:hover {background: #777; }

    /* ~~~~~~~~~ article ~~~~~~~~~~ */
    article {width: 100%;overflow: hidden;}
    section {float: left;width: 500px;}

    /* ~~~~~~~~~ aside ~~~~~~~~~~ */
    aside {float: right;width: 310px;}

    /* ~~~~~~~~~ footer ~~~~~~~~~~ */
    footer {width: 840px;margin: 20px auto;font-size: 1.4em;text-align: right;}

    /* ~~~~~~~~~ common ~~~~~~~~~~ */
    body, select, input, textarea {font: 0.625em/1.4 tahoma, verdana, arial, helvetica, sans-serif;color: #333;}
    body {background: #ccc;}
    h1 {font-weight: normal;color: #666;font: 3.2em/1.4 georgia, ‘times new roman’, times, serif;margin: 0.2em 0 0;}
    h2 {font-weight: normal;color: #666;font: 2.4em/1.4 georgia, ‘times new roman’, times, serif;margin: 0.2em 0; }
    section p, section ul, section ol,
    aside p, aside ul, aside ol {font-size: 1.4em;margin: 1em 0;}
    section ul {margin-left: 1em;}
    section ol {margin-left: 1.4em;}

    /* ~~~~~~~~~ generic ~~~~~~~~~~ */
    html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
    dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
    a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,strong, sub, sup, tt, var, legend, fieldset {margin: 0;padding: 0;}
    img {vertical-align: bottom;}
    img, fieldset {border: 0;}
    html {overflow-y: scroll;}
    header, nav, section, article, figure, aside, footer {display: block;}
    </style>

    <!– javascript –>
    <script src=”js/jquery-1.3.2.min.js”></script>

    <!–conditional–>
    <!–[if IE]>
    <script src=”js/html5.js”></script>
    <![endif]–>
    </head>

    <body class=”home”>

    <div id=”container”>
    <header id=”page-header”>
    <h1>Judul Blog</h1>
    <nav id=”main-navigation”>
    <ul>
    <li class=”current”><a href=”#”>Home</a></li>
    <li style=”color: red;”><a href=”#”>About</a></li>
    <li><a href=”#”>Menu</a></li>
    <li><a href=”#”>Portfolio</a></li>
    <li><a href=”#”>Contact</a></li>
    </ul>
    </nav>
    </header>
    <article id=”page-content”>
    <section>
    <hgroup>
    <h2>Pemahaman HTML5</h2>
    <h2>Demo HTML5 Template</h2>
    </hgroup>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac iaculis erat. Maecenas id fermentum odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    <h2>HTML 5 Item</h2>
    <ul>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    </ul>
    <ol>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    </ol>
    </section>
    <aside>
    <h2>Artikel Terkait</h2>
    <p>Aliquam id lorem ac tellus fringilla bibendum et at turpis. In ut auctor justo. Integer ac quam sed est semper hendrerit.</p>
    </aside>
    </article>
    </div>

    <footer>
    Footer
    </footer>

    </body>
    </html>

    Pertama Anda copy paste dahulu seluruh script diatas, selanjutnya paste kan kedalam aplikasi moby explorer (ini yang biasa saya pakai kalau mengedit text di hp) atau Anda bisa juga menggunakan editor yang gratis lainya, edit yang perlu diedit setelahs selesai di edit seve dengan nama index.html (tulis persis dengan apa yang saya tulis, jangan diganti Index.html atau ind3x.html)

  5. Setelah Anda save sekarang saatnya Anda upload, caranya mudah saja, klik Upload.

    Dan selanjutnya pilih Choose File (ada 2 tulisan choose file, anda pilih yang atas karena itu nanti file yang diupload tidak akan dikompres / meminimalisir file rusak). Dilanjut dengan mengklik tombol Submit.

    Jika muncul tulisan :

    Checking files: 
    File index.html is OK
    Transferring files to the FTP server: 
    File index.html has been transferred to the FTP server using FTP mode FTP_ASCII

    Berarti file sukses diupload, itu artinya kita sudah berhasil mengubah halaman depan Website yang kita buat. Kalau tidak percaya cek saja Website Anda.

    Ini screenshot halaman depan Website saya yang index.html-nya menggunakan kode diatas.

    Cukup menarik bukan, hehe.

 

Cara Membuat Website Sederhana Untuk Pemula Dalam 5 Menit

Cara Membuat Website Sederhana Pemula
Cara Membuat Website

Cara membuat website mungkin bisa dibilang bukan hal yang sulit bahkan cukup mudah untuk para webmaster (pembuat website). Namun bagaimana dengan teman-teman kita yang baru saja ‘terjun’ di dunia blogging ? apakah mereka juga menganggap Cara Membuat Website adalah hal yang mudah ? tentu tidak bukan, atas dasar itulah saya akan mencoba menjelaskan tahap demi tahap Bagaimana Cara Membuat Website dari Dasar atau Awal untuk para Pemula tentunya.

Tenang saja, Cara Membuat Web yang akan saya berikan ini tidak akan banyak memakan waktu Anda, karena sesuai judul yang saya buat Cara Membuat Website ini hanya akan memakan waktu 5 Menit saja, bahkan mungkin bisa kurang dari itu.

Baiklah, disini saya akan membagi Tutorial Membuat Website ini menjadi 2 Bagian.

  1. Cara Membuat Website
  2. Cara Upload File ke Website Menggunakan FTP
  3. Video Cara Membuat Website

Kedua Cara diatas akan saya jelaskan secara gamblang dengan bahasa yang sesederhana mungkin. Jadi untuk Anda yang benar-benar buta akan Website mampu mengikuti Tutorial Membuat Website ini dengan Mudah.

1. Cara Membuat Website

Sebelum membuat website, hal yang harus Anda persiapkan adalah Hosting + Domain. Jika Anda bingung apa itu Hosting, maka kita bisa mengibaratkan Hosting itu ibarat Rumah untuk menyimpan barang-barang (file) dan Domain ibarat Nama Jalannya, agar pengunjung bisa berkunjung.

Untungnya hampir semua penyedia layanan website sekarang ini sudah menyediakan paket lengkap, yaitu mereka sudah menyiapkan Hosting dan Domain menjadi satu, jadi pesan Hosting dapat gratis Domain. Karena kita nyari yang gratisan jadi kita gak akan dapat Domain, melainkan hanya akan mendapat SubDomain (ada embel-embelnya, semacam blogspot.com atau wordpress.com).

Kembali ke Topik, untuk Cara Membuat Website.

  1. Kunjungi situs penyedia Layanan pembuatan Website, disini akan saya beri contoh menggunakan situs penyedia layanan yang cukup populer di Indonesia, yaitu IDHostinger. Langsung saja kunjungi http://www.idhostinger.com/
  2. Setelah terbuka, selanjutnya klik Buat Akun. Letaknya ada di pojok kanan atas, dekat form login.
  3. Di halaman ini Anda diwajibkan mengisi. Nama, E-mail dan Password Anda. Isikan sesuai tempatnya.

    Jangan lupa centang, Saya setuju dengan Ketentuan Penggunaan Layanan.

  4. Selanjtunya, kita buka Tab Baru dan masuk ke Email kita, untu mengaktivasi Akun kita. Nanti ada dua Email dari yang dikirim oleh IDHostinger, Anda lihat saja yang pertama atau yang paling bawah.

    Tingal Anda klik atau salin link tersebut ke Address Bar dan klik Enter.

  5. Disini kita akan disuruh memilih Paket Hosting yang akan kita pakai nanti untuk Membuat Website. Karena kita hanya akan Membuat Web untuk Belajar saja, maka kita Order saja yang Paket Gratis.
  6. Kalau diatas kita sudah memesan Hostingan makan setelah itu kita akan diberi hadiah SubDomain. Untuk SubDomainnya ada banyak pilihan, silahkan Anda pilih yang paling cocok atau sesuai dengan selera Anda. Lalu klik Buat.
  7. SubDomain + Hosting Anda akan dibuat, jadi tunggu hingga muncul pemeberitahuan ‘Akun telah dibuat 100%‘ di pojok kanan bawah.

    Selanjutnya, silahkan Anda klik Lihat Hasil.

  8. Dari sini kita sudah berhasil membuat akun untuk membuat Websitenya, namun kita belum memesan Hosting + SubDomain atau dengan kata lain suah berhasi Mendaftar / Membuat Website. Namun kita harus melanjutkan untuk mengisi website kita dengan Artikel atau File. Caranya dengan mengklik tombol Kelola.
  9. Maka Anda akan dibawa ke Cpanel (Control Panel). Disinilah tempat Anda mengatur segala sesuatu yang berkaitan dengan website Anda. Mulai dari :
    • Menambah Subdomain
    • Parkir Domain
    • Impor Website
    • Impor Database
    • Mengatur Halaman Error

    Dan masih banyak lagi. Namun kita tidak akan membahas fitur-fitur yang ada di Cpanel ini (butuh watu berhari-hari). Tujuan kita masuk Cpanel adalah untuk mengambil Data mengenai : ‘Nama pengguna‘.

    Lihat dan silhkan Anda Catat (kalau bisa dikertas atau buku).

 

2. Cara Upload File ke Website Menggunakan FTP

Untuk mengupload suatu file kedalam Website atau lebih tepatnya kedalam Hosting (rumah) sebenarnya cukup mudah, yaitu cukup dengan mengklik File Manajer dan tinggal Anda pilih file yang akan Anda Upload.

Tapi yang jadi masalah bagaimana jika kita ingin mengupload file kedalam Hosting saat kita menggunakan HandPhone ? tentu kita tidak mungkin masuk File Manajer yang ada disediakan IDHostinger, karena ada beberapa Javascript yang harus dijalankan, dan itu tidak mungkin dijalankan di browser Handphone (operamini / ucbrowser).

Maka dari itu, disini kita akan meminta bantuan FTP. FTP Online ini fungsinya menjadi perantara, Antara file yang akan kita upload dengan Hosting yang sudah kita pesan tadi (tanpa melalui file manajer).

Mohon maaf disini saya akan memberikan screenshotnya dari tampilan PC, tapi sebenarnya sama persis kok tampilannya antara di PC dan Handphone, karena saya sering membuka di HP juga.

Untuk Upload filenya mealalui FTP Online tentunya kita harus memilih 1 dari ribuan FTP Online yang ada di Internet, disini saya memutuskan untuk memilih Net4India karena sudah support https dan yang terpenting adalah sangan HandPhone Friendly (nyaman dan tidak terlalu berat jika dibuka melalui hp).

Sekarang, langkah-langkah Cara Upload File ke Website atau Hosting menggunakan FTP Online.

  1. Buka https://ftp.net4india.com/

    Tadi sebelumnya saya menyuruh Anda untuk mencatat ‘Nama pengguna‘ bukan ? gunanya ya untuk mengisi Login Panel di FTP ini. Ada tiga form yang harus Anda isi.

    FTP server: Isikan Nama Domain Anda
    Username: Isikan Nama Pengguna
    Password: Isikan Password

    Setelah semua terisi silahkan Anda klik Login.

    * yang dimaksud password disini adalah password saat Anda mengisi SubDomain, jadi bukan password saat Anda membuat akun IDHostinger.

  2. Setelah klik Login, maka Anda akan masuk kedalam direktori root.

    Di direktori (folder) ini Anda tidak bisa mengupload apapun, andai kata bisa upload, Anda tidak akan bisa mengaksesnya melalui url (tidak bisa diakses umum), karena filenya berada di dalam. Solusinya Anda klik dulu public_html.

  3. Disinilah tempat untuk mengatur halaman depan website Anda. Cara Mengaturnya, pertama-tama Anda hapus dulu default.php yang ada di direktori public_html ini. Ohya, default.php ini isinya adalah ucapan selamat datang yang otomatis dibuat oleh pihak IDHostinger, jadi kita hapus saja tidak masalah.

    Centang filenya dan pilih Delete. Lalu pilih Submit, dan klik Back untuk kembali ke public_html.

  4. Langkah selanjutnya tinggal kita upload file kita ? tapi file apa yang akan kita upload ? jangan kuatir disini saya akan memberikan script / kode html untuk membuat halaman depan website, oya kode ini bukan buatan saya melainkan buatan master problogiz, yang juga sudah valid HTML5. Langsung saja ini dia kodenya.
    <!DOCTYPE html>
    <html lang=”en”><head>
    <meta charset=”utf-8″>
    <title>Page Title</title><!– meta tags –>
    <meta name=”keywords” content=””>
    <meta name=”description” content=””>

    <!– stylesheets –>

    <style>
    /* ~~~~~~~~~ layout ~~~~~~~~~~ */
    #container {width: 960px;margin: 20px auto;background: #fff;padding: 30px;overflow: hidden;}

    /* ~~~~~~~~~ header ~~~~~~~~~~ */
    #main-navigation {border-bottom: 5px solid #3942A3;margin: 20px 0;}
    #main-navigation ul {overflow: hidden;width: 100%;list-style: none;font-size: 1.6em;}#main-navigation li {float: left;}
    #main-navigation li a {background: #3972A3;margin: 0 5px 0 0;padding: 5px 30px;display: block;color: #000000;text-decoration: none;}
    #main-navigation li.current a {background: #666;}
    #main-navigation li a:hover {background: #777; }

    /* ~~~~~~~~~ article ~~~~~~~~~~ */
    article {width: 100%;overflow: hidden;}
    section {float: left;width: 500px;}

    /* ~~~~~~~~~ aside ~~~~~~~~~~ */
    aside {float: right;width: 310px;}

    /* ~~~~~~~~~ footer ~~~~~~~~~~ */
    footer {width: 840px;margin: 20px auto;font-size: 1.4em;text-align: right;}

    /* ~~~~~~~~~ common ~~~~~~~~~~ */
    body, select, input, textarea {font: 0.625em/1.4 tahoma, verdana, arial, helvetica, sans-serif;color: #333;}
    body {background: #ccc;}
    h1 {font-weight: normal;color: #666;font: 3.2em/1.4 georgia, ‘times new roman’, times, serif;margin: 0.2em 0 0;}
    h2 {font-weight: normal;color: #666;font: 2.4em/1.4 georgia, ‘times new roman’, times, serif;margin: 0.2em 0; }
    section p, section ul, section ol,
    aside p, aside ul, aside ol {font-size: 1.4em;margin: 1em 0;}
    section ul {margin-left: 1em;}
    section ol {margin-left: 1.4em;}

    /* ~~~~~~~~~ generic ~~~~~~~~~~ */
    html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
    dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
    a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,strong, sub, sup, tt, var, legend, fieldset {margin: 0;padding: 0;}
    img {vertical-align: bottom;}
    img, fieldset {border: 0;}
    html {overflow-y: scroll;}
    header, nav, section, article, figure, aside, footer {display: block;}
    </style>

    <!– javascript –>
    <script src=”js/jquery-1.3.2.min.js”></script>

    <!–conditional–>
    <!–[if IE]>
    <script src=”js/html5.js”></script>
    <![endif]–>
    </head>

    <body class=”home”>

    <div id=”container”>
    <header id=”page-header”>
    <h1>Judul Blog</h1>
    <nav id=”main-navigation”>
    <ul>
    <li class=”current”><a href=”#”>Home</a></li>
    <li style=”color: red;”><a href=”#”>About</a></li>
    <li><a href=”#”>Menu</a></li>
    <li><a href=”#”>Portfolio</a></li>
    <li><a href=”#”>Contact</a></li>
    </ul>
    </nav>
    </header>
    <article id=”page-content”>
    <section>
    <hgroup>
    <h2>Pemahaman HTML5</h2>
    <h2>Demo HTML5 Template</h2>
    </hgroup>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac iaculis erat. Maecenas id fermentum odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    <h2>HTML 5 Item</h2>
    <ul>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    </ul>
    <ol>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    </ol>
    </section>
    <aside>
    <h2>Artikel Terkait</h2>
    <p>Aliquam id lorem ac tellus fringilla bibendum et at turpis. In ut auctor justo. Integer ac quam sed est semper hendrerit.</p>
    </aside>
    </article>
    </div>

    <footer>
    Footer
    </footer>

    </body>
    </html>

    Pertama Anda copy paste dahulu seluruh script diatas, selanjutnya paste kan kedalam aplikasi moby explorer (ini yang biasa saya pakai kalau mengedit text di hp) atau Anda bisa juga menggunakan editor yang gratis lainya, edit yang perlu diedit setelahs selesai di edit seve dengan nama index.html (tulis persis dengan apa yang saya tulis, jangan diganti Index.html atau ind3x.html)

  5. Setelah Anda save sekarang saatnya Anda upload, caranya mudah saja, klik Upload.

    Dan selanjutnya pilih Choose File (ada 2 tulisan choose file, anda pilih yang atas karena itu nanti file yang diupload tidak akan dikompres / meminimalisir file rusak). Dilanjut dengan mengklik tombol Submit.

    Jika muncul tulisan :

    Checking files: 
    File index.html is OK
    Transferring files to the FTP server: 
    File index.html has been transferred to the FTP server using FTP mode FTP_ASCII

    Berarti file sukses diupload, itu artinya kita sudah berhasil mengubah halaman depan Website yang kita buat. Kalau tidak percaya cek saja Website Anda.

    Ini screenshot halaman depan Website saya yang index.html-nya menggunakan kode diatas.

    Cukup menarik bukan, hehe.