Tutorial ARI JULIANTO Network
Kustom Bullet dengan Menggunakan CSS
Sejauh yang kita kenal, sebuah bullet atau list dalam html hanya berbentuk kotak hitam (square), bulat hitam (default) dan lingkaran (circle). Namun tahukan Anda bahwasanya bullet and numbering pada halaman web itu bisa dimodifikasi? Tentu saja jawabannya YA. Dan sekarang saya akan mencoba membahasnya untuk Anda semua Untuk melakukan modifikasi ikonnya kita membutuhkan ikon pengganti dimana dalam hal ini kita membutuhkan file gambar dengan ukuran yang menyesuaikan dengan kebutuhan. Sebagai bahan tutorial kali ini ikon gambar yang akan kita gunakan adalah menggunakan gambar bintang ini: <!DOCTYPE html> <html> <head> <title>CSS Custom Bullet</title> <style> ul.list{ list-style:none; margin:0; padding:0 } ul.list li{...
Membuat Vertikal Menu dengan CSS
Sebelumnya saya telah membahas pembuatan horizontal menu dengan CSS, nah sekarang giliran menu vertikalnya. Bagaimana sih pembuatannya. Akan saya coba bahas di kesempatan ini. Okeh, menu vertikal yang akan saya coba bahas ini hasil akhirnya adalah kira-kira seperti pada gambar berikut Hal dasar yang kita butuhkan adalah persis seperti halnya pembuatan horizontal menu, yakni bullet list UL atau OL. Sebagai bahan contoh, kita akan bikin tampilan menu seperti di atas. Kode HTML yang kita butuhkan dapat dlihat seperti di bawah ini <UL class="menu"> <li><a href="menu.html">Menu 1</a> <li><a href="menu.html">Menu 2</a> <li><a href="menu.html">Menu 3</a> <li><a href="menu.html">Menu 4</a> <li><a href="menu.html">Menu 5</a> </UL> ...
Variabel dan Tipe Data
Dalam JavaScript ada yang dinamakan dengan variabel
Mengenal CSS Sprite
Pernahkah Anda mendengar istilah CSS Sprite??? Mungkin diantara Anda sekalian ada yang pernah mendengarnya, bahkan sudah mengenalnya atau mungkin sudah terbiasa bekerja dengan CSS sprite. Baiklah, untuk Anda yang belum mengenal atau yang ingin refresh mengenai CSS sprite mari kita pelajari lagi di sini. "sprite", apa ya arti dari kata ini??? eumph, dari pada bingung mikirin artinya saja mending kita explore ke luar. Sprite identik dengan yang namanya image atau gambar, ya seringnya sprite ini digunakan pada game-game. Biasanya dalam sebuah game membutuhkan banyak sekali image, misalnya tombol OK pada game akan berubah warna atau berubah gambar latar atau memudar, dll....
Membuat Tab Menu dengan CSS
Kali ini saya akan sedikit berbagi mengenai cara membuat tab menu menggunakan CSS. Sebenarnya sudah banyak sampel-sampel instan yang tinggal download, tapi kali ini saya hanya akan berbagi apa dan bagaimana cara pembuatannya agar paham dan hasilnya sesuai dengan apa yang kita inginkan. Bailkah, bentuk tab menu yang akan saya bahas kali ini terlihat seperti gambar di bawah Baiklah, sekarang kita langsung ke proses pembuatannya... Oya pembahasan akan saya jelaskan berdasarkan source codenya ini <html> <head> <style type="text/css"> ul.tabmenu{ padding: 3px 0; margin-left: 0; font: bold 12px Verdana; border-bottom: 1px solid gray; list-style-type: none; ...
Membuat Horizontal Menu dengan CSS
Sekarang sudah saatnya bagi saya untuk berbagi cara membuat menu horizontal hanya dengan mengandalkan CSS (tanpa javascript). Ya... konsep dasarnya telah saya jelaskan pada tulisan sebelumnya di CSS untuk Membuat Navigasi Menu dan saya harap Anda sudah paham dengan apa yang saya maksud di sana. Oya... sebelumnya perlu saya sampaikan, bahwa saat ini sangat banyak horizontal menu CSS gratisan yang instant. Anda cukup mendownload dan mengeditnya untuk langsung digunakan. Tapi, berhubung saya orang yang memiliki penasaran cukup tinggi saya berusaha membuatnya sendiri menjelaskannya untuk Anda dengan konsep seperti contoh-contoh yang bertebaran di internet.Sekarang kita akan mencoba membuat dari yang paling sederhana...
CSS untuk Membuat Navigasi Menu
Saat ini teknologi CSS sering digunakan oleh web desainer tidak hanya untuk membuat desain yang menarik, tetapi juga banyak digunakan untuk membuat menu atau navigasi. Tahukah Anda bahwa kebanyakan web desainer menggunakan listing atau bullet dalam pembuatan menunya??? Perlu bukti, lihat website saya ini! Anda lihat deretan menu Home, Tutorial, Gallery, Tutorial dan seterusnya di atas tulisan ini.... Ketika Anda mengarahkan kursor mouse Anda ke menu Home, Tutorial, Gallery, Hiburan dan Tools akan keluar beberapa submenu. Di website saya ini menu dropdown tersebut dibuat hanya dengan mengandalkan CSS. (NB: maaf, karena udah update sistem di web saya ini tidak lagi menggunakan...
Penanganan Masalah Error pada PHP
Kali ini saya akan mencoba menjelaskan mengenai kemungkinan-kemungkinan masalah yang bisa menyebabkan error pada script PHP yang Anda buat, dan tentunya akan saya sertakan beberapa tips yang mudah-mudahan bermanfaat. Oya error yang saya maksud adalah jenis error yang kemungkinan besar disebabkan oleh user, bukan error sytem. Yuk kita langsung ke pokok bahasan Membuat Script PHP di Satu File Sampai Ratusan bahkan Ribuan Baris Sebagai seorang yang menggunakan script PHP entah itu newbie (baru belajar) ataupun udah ahli saya yakin sudah tidak jadi masalah kalo punya script yang berderet panjang. Biasanya user yang membuat script PHP sampai panjang punya pikiran: hemat data...
Pesan Peringatan (Alert) dan Konfirmasi (Confirm)
Dengan JavaScript memungkinkan untuk dibuat sebuah pertanyaan atau pemberitahuan berupa kotak dialog
Komponen-komponen yang Diperlukan dalam Membangun CSS
Ada beberapa komponen utama dalam langkah pembuatan CSS ini. Cara pembuatannya pun cukup beragam, sesuai keinginan Anda. Sebuah style sheet terdiri dari beberapa aturan (rules). Masing-masing aturan terdiri dari satu atau lebih selektor (selector) dan sebuah blok deklarasi (declaration block). Sebuah blok deklarasi terdiri dari beberapa deklarasi yang dipisahkan oleh seicolon atau titik koma ( ; ). Masing-masing deklarasi terdiri dari property, titik dua ( : ) dan nilai (value). Syntax CSS dibagi dalam 3 bagian : selector {property : value} Keterangan: selector : tag HTMLatau objek id atau class yang formatnya akan didefinisikan, terletak sebelum tanda { dan } property...