Home » » Cara Membuat Menu Dengan Icon Mirip Akun Google

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 :
Cara Membuat Menu Dengan Icon Mirip Akun Google


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.
Bantu Bagikan ya.. :

Ditulis Oleh : Chinot Thea | Inspirasi Blogger Indonesia

Terimah Kasih telah membaca artikel Cara Membuat Menu Dengan Icon Mirip Akun Google. Yang ditulis oleh Chinot Thea. Jika sobat ingin menyebarluaskan artikel ini, mohon untuk menyertakan sumber link asli dibawah ini. Untuk kritik dan saran dapat anda sampaikan pada kotak komentar, Terimakasih

9 komentar:

  1. terimakasih atas informasinya,, salam sukses selalu

    BalasHapus
  2. ini dia yang saya cari cari :)

    BalasHapus
  3. makasih sudah berbagi mba, kpan2 sy coba

    BalasHapus
  4. keren2 tipsnya, sis...trims ya? :D

    BalasHapus
  5. Selamat pagi,,,,,salam sukses selalu
    terima ksh artikelnya sangat bermanfa'at....

    BalasHapus
  6. Kunjungan Perdana Mbak Chinot, dan sekalian blogwalking
    Keren Mbak artikelnya ijin simak dan bookmark Mbak
    o ya kalau di khobulkan saling Follow blog yah Mbak dan
    Blog Mbak Chinot sudah saya follow untuk saling bersilaturahim
    Dengan senang hati saya tunggu motivasi dari Mbak Chinot salam :))

    BalasHapus
    Balasan
    1. Follow blog Mbak Chinot succesful
      Terima kasih sebelumnya salam sejahtera :))

      Hapus

Inspirasi Blogger Indonesia
 
Support : Sundaboy | My Facebook |
Copyright © 2013. Inspirasi Chinot Thea - All Rights Reserved
Template Created by Creating Website
Proudly powered by Blogger