Cara Membuat Menu Dengan Icon Mirip Akun Google

Cara Membuat Menu Dengan Icon Mirip Akun Google - daripada melamun lebih baik nulis sesuatu, siapa tahu bisa bermanfaat hehe. Kali ini chinot ingin berbagi kepada sobat mengenai Bagaimana Cara Membuat Menu Dengan Tampilan Icon Mirip Dengan Akun Google, Menu yang dimaksud adalah ketika sobat masuk ke halaman google dengan memakai akun milik sendiri maka akan disuguhi beberapa Menu Produk google seperti : Adsense, Blogger, Adwords dan lain lain yang didalamnya terdapat sebuah icon gambar yang mewakili produk tersebut disertai dengan tulisan menu yang simple namun tetap tampil profesional.

Apabila sahabat penasaran bagaimana bentuk dari Menu Dengan Icon Google, coba lihat gambar dibawah ini :

Nah kira kira seperti itu Cara Membuat Menu Dengan Icon Mirip Akun Google yang akan chinot share pada kesempatan kali ini. Bagaimana apakah sahabat tertarik untuk mencoba membuatnya?

Nah sekarang bagaimana Cara Membuat Menu Dengan Icon Mirip Akun Google seperti pada gambar diatas? silahkan ikuti langkah langkahnya dibawah ini :

Pertama kali akan membuat menu sebanyak sembilan menu, tetapi sahabat bisa menguranginya atau menambahkan menu tersebut, sesuai dengan keinginan sahabat sendiri.

Kedua silahkan sahabat membuat gambar yang berukuran kurang lebih 32x32 untuk setiap menu sesuai dengan keinginan sahabat. Buatlah gambar sebanyak Menu yang akan dibuat. misalnya sahabat ingin membuat 9 buah menu, maka sahabat juga harus membuat 9 gambar icon menu tersebut.

Ketiga sekarang kita akan mencoba memasukan script untuk Membuat Menu Dengan Icon Mirip Akun Google. caranya sahabat tinggal copy saja script dibawah ini lalu masukan kedalam template milik sahabat.

<style type="text/css">
#menu-icon {
   width:600px;
   padding:10px;
   margin:0 auto;
   font:14px Arial, Helvetica, sans-serif;
}
#menu-icon a {
   color:#000;
   text-decoration:none;
   display:block;
   border:1px solid #ccc;
   width:110px;
   float:left;
   padding:15px 15px 15px 45px;
   margin:10px;
   background-color:#fff;
   border-radius:5px;
}
#menu-icon a:hover {
   background-color:#f5f5f5;
}
.icon1 { background:url(url icon) no-repeat 5px; }
.icon2 { background:url(url icon) no-repeat 5px; }
.icon3 { background:url(url icon) no-repeat 5px; }
.icon4 { background:url(url icon) no-repeat 5px; }
.icon5 { background:url(url icon) no-repeat 5px; }
.icon6 { background:url(url icon) no-repeat 5px; }
.icon7 { background:url(url icon) no-repeat 5px; }
.icon8 { background:url(url icon) no-repeat 5px; }
.icon9 { background:url(url icon) no-repeat 5px; }
</style>

Keterangan :
kode yang dikasih cetak tebal silahkan ganti dengan URL Gambar Icon yang telah sahabat buat

Keempat silahkan save template sahabat, untuk mengurangi resiko eror sebaiknya download dulu template sahabat supaya apabila terjadi kesalahan sahabat bisa mengembalikannya seperti semula.

Tahap Akhir kita akan mencoba memanggil kode script Membuat Menu Dengan Icon Mirip Akun Google diatas tadi, caranya cukup mudah yaitu sahabat tinggal menambahkan saja element atau gadget pada tata letak template lalu sahabat harus memilih HTML/Javascript, setelah itu silahkan copy kode dibawah ini dan masukan kedalam widget yang baru dibuat.

<div id="menu-icon">
<a href="URL" class="icon1">MENU 1</a>
<a href="URL" class="icon2">MENU 2</a>
<a href="URL" class="icon3">MENU 3</a>
<a href="URL" class="icon4">MENU 4</a>
<a href="URL" class="icon5">MENU 5</a>
<a href="URL" class="icon6">MENU 6</a>
<a href="URL" class="icon7">MENU 7</a>
<a href="URL" class="icon8">MENU 8</a>
<a href="URL" class="icon9">MENU 9</a>
</div>

Keterangan :
Gantilah tulisan URL dengan URL menu
Sesuaikan kode icon dengan icon gambar untuk setiap menunya
Gantilah tulisan MENUdengan judul menu yang akan ditampilkan

Sekarang Lihatlah hasilnya.

Nah mungkin hanya itu dulu Cara Membuat Menu Dengan Icon Mirip Akun Google yang dapat chinot share, mudah mudahan bisa bermanfaat. Amin ya robbal alamin.