Jasa Pembuatan Website | Jasa Pembuatan website toko online | Jasa Pembuatan Website Company Profile | Jasa Pembuatan Website Profesional | Desain Website | Jasa Desain Website | Jasa Pembuatan Website Bekasi | Jasa Pembuatan Website Jakarta | Pembuatan Website | Pembuatan Website Murah | Jasa Pembuatan Website Murah |
HOME TERM AND CONDITION NEWS AND ARTICLE CONTAC US
INFO

MEMBUAT MENU DENGAN ICON SEPERTI GOOGLE



Yang punya akun google pasti sudah kenal tampilan menu seperti disamping ini. Jika anda sudah masuk ke layanan akun google, dan masuk ke menu produk maka akan terlihat menu layanan yang anda gunakan dalam bentuk daftar nama layanan serta ikon gambar kecil disampingnya. Berikut ini saya akan berbagi tentang cara membuat menu seperti tersebut.

Memang kalau kita melihat menu layanan akun google, menunya tidak terlalu unik tapi sangat fleksibel dan gampang diakses. Kata lain singkat, padat dan berisi. Lihat versi gambar lebih besar berikut :

Untuk membuat menu tersebut kita memerlukan beberapa gambar kecil/ikon yang nanti ditaruh sebagai lambang dari menu yang kita buat. Ukuran gambar untuk contoh ini, saya sarankan 32px dengan jenis gif. Untuk gambar anda bisa cari diinternet menggunakan google images dengan menggunakan kata kunci "gif icons". Atau silahkan download (klik kanan pada gambar, lalu save as) gambar-gambar berikut sebagai contoh.

 

Karena sekarang kita sudah punya 7 gambar dengan tema berbeda, maka kita akan buat 7 item menu dengan judul menu berikut ini:

  1. Tulis Berita
  2. Daftar Berita
  3. Daftar Download
  4. Daftar Gambar
  5. Baca Pesan
  6. Profil
  7. Daftar Situs

Kita mulai dengan menyusun 7 menu tersebut dengan script seperti berikut :

 

 Script diatas kalau anda simpan akan menghasilkan tampilan seperti berikut :

Kemudian kita akan membuat kotak dan mengatur lebar dan tinggi masing-masing menu dengan menambahkan css  berikut :

 

 Dengan ditambahkan script css diatas, jika anda tampilkan lagi maka hasilnya seperti berikut :

 

Banyak perubahan dari tampilan awal. Sekarang masing-masing menu sudah diberi kotak dan memiliki lebar dan tinggi sesuai pengaturan di css (lihat bagian #menu-google a). Masing-masing menu juga langsung dipisahkan dengan jarak 10 pixel.

Dan jika anda arahkan pada salah satu menunya maka, background menu yang dilewati kursor akan berubah (lihat background menu tulis berita), ini diatur pada #menu-google a:hover :

Langkah berikutnya tinggal menyisipkan gambar yang tadi kita punya. Caranya dengan memanggil gambar pada css seperti berikut :

 

 Asumsi, semua gambar diletakkan pada sub folder dengan nama images.

Setelah, semua gambar disisipkan pada nama class masing-masing, sekarang tinggal memanggil masing-masing class berdasar menu yang kita buat. Sehingga script html yang merupakan menu tadi hasil akhirnya seperti berikut :

 

Dan hasil akhir jika anda tampilkan seperti gambar berikut :

 

Berikut ini kode lengkap dari tampilan menu diatas :

 

SELAMAT MENCOBA SEMOGA BERMANFAAT....

 

PORTOFOLIO
PROFILE

Rajawebdesign bergerak di bidang jasa website / jasa pembuatan website murah profesional / jasa web desain / web design company profile (profile perusahaan / personal), jasa pembuatan website online shop (toko online), jasa pembuatan website katalog product, jasa pembuatan website iklan baris, jasa pembuatan website portal berita / news, yang bertujuan untuk mempromosikan secara online dan memperluas pangsa pasar usaha, bisnis, profile anda / perusahaan anda sehingga mempermudah orang dalam mengetahui bisnis anda dan dapat menjangkau dimanapun dan kapanpun melalui media internet.

Rajawebdesign jasa pembuatan website profesional mengembangkan pembuatan web desain dengan tampilan  simple, elegant dan user friendly disesuaikan dengan kebutuhan dan permintaan klien. Platform berbasis phpmysql (standar pemrograman website) integrasi dengan script custom (library jquery, css, html) yang kami kembangkan sendiri (bukan template CMS open source) mulai dari perancangan desain, slicing psd, perancangan layout sampai pembuatan sistem dan pemrograman databasenya sehingga web desain anda memiliki ciri khas dan brand tersendiri.

Rajawebdesign jasa pembuatan Program kasir seperti System Apotek, Bengkel, Resto, Laundry, Retail, Grosir, Swalayan, Minimarket, Toko ATK, Salon, Reflexi & SPA, Toko Bangunan. Dengan kualitas bermutu dan bergaransi serta dilengkapi oleh Software kasir dan Perangkat kasir yang selalu up to date.

   SUPPORT ONLINE

    08888 1240 85
            0821 4222 7555 ( WA )
    D3616CFF
:
info@rajawebdesign.com

Marketing :
Email :
dwiojid@rajawebdesign.co.id
hana@rajawebdesign.co.id


www.rajawebdesign.com
Website-Aplication-Multimedia-Networking-Program-SEO