Cara membuat menu dengan icon pada blog

Cara membuat menu dengan icon pada blog

Dalam perancangan blog tentunya menu sangat berperan penting dalam mengkategorikan artikel pada blog. Apalagi menu tersebut disertai dengan icon yang menarik agar pengunjung tertarik untuk melihat apa saja kategori yang ada di blog anda, lalu bagaimana cara membuat menu disertai icon? Saya akan berbagi tips yang mudah dengan anda, caranya sangat simpel namun butuh ketelitian dan kreasi yang anda punya.  

1. Pertama kamu harus ke halaman design blog, disitu ada tata letak
2. Kenudian tambahkan gadget HTML ke dalam tata letak yang kamu inginkan
3. Copy paste kode di bawah ini, jangan lupa sesuaikan judul menunya.
------------------------------------------------------------------------------------------------------------
<div class="menu">
      <ul>
        <li class="category" data-target="apps"><i class="icon-windows"></i>Apps</li>
        <li class="category" data-target="movies"><i class="icon-film"></i>Movies</li>
        <li class="category" data-target="music"><i class="icon-headphones"></i>Music</li>
        <li class="category" data-target="books"><i class="icon-book"></i>Books</li>
        <li class="category" data-target="devices"><i class="icon-desktop"></i>Devices</li>
      </ul>
     
      <!-- Sub Menus -->
      <div id="apps" class="sub-menu">
        <ul>
          <li>My Apps</li>
          <li>Shop</li>
        </ul>
      </div>
      <div id="movies" class="sub-menu">
        <ul>
          <li>My Movies</li>
          <li>Shop</li>
        </ul>
      </div>
      <div id="music" class="sub-menu">
        <ul>
          <li>My Music</li>
          <li>Shop</li>
        </ul>
      </div>
      <div id="books" class="sub-menu">
        <ul>
          <li>My Books</li>
          <li>Shop</li>
        </ul>
      </div>
      <div id="devices" class="sub-menu">
        <ul>
          <li>My Devices</li>
          <li>Shop</li>
        </ul>
      </div>
     
      <div class="back-btn"><i class="icon-angle-left"></i></div>
    </div>

------------------------------------------------------------------------------------------------------------
4. Untuk kode yang berwarna hijau silahkan ganti dengan isi nama sesuka anda.
5. Untuk kode yang berwarna merah silahkan masukkan link URL icon sesuai selera, bisa dicari di google dan disarankan mencari gambar icon dengan ukuran 32 pixel atau dibawahnya.
6. Pada Sub Menu silahkan anda tentukan sub kategori yang anda punya.

sumber : ardyngulik.blogspot.com