Jembatan Panjang ke Maharani Zoo ~ nyebrang jalan
Dari atas jembatan WBL
Kamis, 30 Mei 2013
Selasa, 21 Mei 2013
Membuat Menu Dropdown
Menu dropdown dapat dibuat secara mudah hanya dengan menggunakan
perintah CSS. Disini saya akan memberikan cara dasar membuat menu
dropdown agar dapat dengan mudah di mengerti dan dikerjakan oleh pemula.
Ikuti tutorial berikut ini untuk melihat langkah demi langkah proses
membuat sendiri menu dropdown dengan CSS.
Jika kita telah membuat struktur HTML seperti diatas, maka hasilnya adalah sebagai berikut :
Langkah kedua yaitu membuat tampilan menu menjadi lebih menarik dengan menggunakan perintah CSS. Maka dari itu, buatlah file CSS dengan nama style.css dan isi dengan perintah yang ada dibawah ini.
Jika kita telah membuat kedua file tersebut, yaitu struktur HTML dan CSS-nya. Maka hasilnya akan seperti ini.
Saya akan membuat menu dengan fitur dua sub
kategori. Seri pertama dari sub-link muncul di bawah bar utama (Home,
Personal, Tutorial, dll), maka seri kedua link muncul dari dropdown
pertama (Tutorial -> Internet, Web Programmer). Lihatlah demo menu
dropdown CSS untuk melihat semuanya dalam tindakan.
Kode HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <html><head><title>Membuat Menu Dropdown</title><link href="style.css" rel="stylesheet" type="text/css"></head><body><nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Personal</a></li> <li><a href="#">Tutorial</a> <ul> <li><a href="#">Internet</a></li> <li><a href="#">Web Programmer</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> </ul> </li> </ul> </li> <li><a href="#">Tips & Trik</a></li> <li><a href="#">Info</a></li> <li><a href="#">Review</a></li> </ul></nav></body></html> |
Jika kita telah membuat struktur HTML seperti diatas, maka hasilnya adalah sebagai berikut :
Langkah kedua yaitu membuat tampilan menu menjadi lebih menarik dengan menggunakan perintah CSS. Maka dari itu, buatlah file CSS dengan nama style.css dan isi dengan perintah yang ada dibawah ini.
Kode CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
| body { width: 900px; margin: 40px auto;}/* MENU-UTAMA */nav ul { background: #666; /* Memberi warna pada latar belakang menubar */ padding: 0 20px; /* Membuat jarak antara teks dengan sisi kotak menubar */ border-radius: 30px; /* Membuat efek tumpul pada sudut menubar */ list-style: none; /* Menghilangkan tanda titik di samping daftar menu */ position: relative; box-shadow: 0px 0px 5px rgba(0,0,0,.25); /* Membuat efek bayangan */}nav ul:after { content: ""; clear: both; display: block;}nav ul li { float: left;}nav ul li:hover { background: #ccc;}nav ul li a { display: block; padding: 15px 40px; color: #fff; /* Memberi warna pada teks */ text-decoration: none;}nav ul li:hover > a { color: #333;}/* SUB-MENU */nav ul ul { background: #ccc; border-radius: 0px; padding: 0; position: absolute; top: 100%; display: none;}nav ul ul li { float: none; position: relative;}nav ul ul li a { padding: 15px 40px; color: #333;} nav ul ul li a:hover { background: #666; color: #fff;}nav ul li:hover > ul { display: block;}/* SUB-SUB-MENU */ nav ul ul ul { position: absolute; left: 100%; top:0;} |
Jika kita telah membuat kedua file tersebut, yaitu struktur HTML dan CSS-nya. Maka hasilnya akan seperti ini.
Selasa, 14 Mei 2013
Notepad ++
Notepad++ adalah sebuah text editor yang sangat berguna bagi setiap orang dan khususnya bagi para developer
dalam membuat program. Notepad++ menggunakan komponen Scintilla untuk
dapat menampilkan dan menyuntingan teks dan berkas kode sumber berbagai
bahasa pemrograman yang berjalan diatas sistem operasi Microsoft
Windows.
Selain manfaat dan kemampuannya menangani banyak bahasa pemrograman, Notepad ++ juga dilisensikan sebagai perangkat free.
Jadi, setiap orang yang menggunakannya tidak perlu mengeluarkan biaya
untuk membeli aplikasi ini karena sourceforge.net sebagai layanan yang
memfasilitasi Notepad ++ membebaskannya untuk digunakan.
Beberbapa daftar bahasa program yang
didukung oleh Notepad++ adalah C, C++, Java, C#, XML, HTML, PHP,
Javascript. Sebenarnya masih banyak lagi bahasa program yang didukung,
namun penulis baru mencoba Notepad ++ dengan bahasa program yang
diatas.
Fitur-fitur:
- WYSIWYG
- User Defined Syntax Highlighting
- Multi-Document Tabs
- Regular Expression Search/Replace supported
- Full Drag N’ Drop supported
- Dynamic position of Views
- File Status Auto-detection
- Zoom in and zoom out
- Multi-Language environment supported
- Bookmark
- Brace and Indent guideline Highlighting
- Macro recording and playback
Kesimpulan
Notepad++ sangat ringan untuk digunakan,
jadi sekalipun komputer yang Anda miliki dengan spesifikasi rendah
tetap bisa menggunakannya karena seperti yang kita ketahui beberapa
program untuk menulis kode sekaligus compailer-nya biasanya membutuhkan komputer dengan spesifikasi tertentu.
| Title: | Notepad++ 6.1.5 |
| Filename: | npp.6.1.5.Installer.exe |
| File size: | 5.54MB (5,811,050 bytes) |
| Requirements: | Windows 2000 / XP / 2003 / Vista / Windows7 / XP64 / Vista64 / Windows7 64 |
| Languages: | Multiple languages |
| License: | Open Source |
| Date added: | July 8, 2012 |
| Author: | Notepad++ |
| Download | http://download.tuxfamily.org/notepadplus/6.1.5/npp.6.1.5.Installer.exe |
Langganan:
Postingan (Atom)