Cool Hierarchy List Menu

Kalian tau Hirarki Menu (Hierarchy)? Beberapa list menu yang keluar ketika satu list menu itu di Klik kalau di sebutkan seperti Folder/akar ← Pengertian simple dari Hierarchy Menu. Jadi andai kata 'kamu punya anak 4, Adi, Beni, Edo, dan Eko. Eko melahirkan 3 anak, Anita, Jupe (hahaha), dan Kristi. Kristi Punya 3 anak lagi namanya, bla, bla, dan bla. Dan seterusnya'. Seperti Folder/akar bukan?

Sepertinya cukup untuk pengertian Hierarchy Menu itu :). Bagaimana jika diteruskan dengan cara penggunaan yang simple. Bisa saja, seperti sobat mau buat Blog Archive [Dashboard → Layout → Add a Gadget → Blog Archive → Pilih Hierarchy] di blog. Tetapi kali ini berbeda seperti halnya cara tadi, sobat bisa Edit Style sendiri, Element Bebas [Elemen Bebas maksudnya adalah isi Hierarchy Menu tidak harus Blog Archive, tetapi bisa di Isikan Link atau Daftar List lain].

Sebagai Contoh sobat bisa lihat di Bawah ini :

• Hide All
• Show All
• 10 Blog Deal
  
  • Aku Mau Gratisan
  • Cek Info
  • HaViZ's Blog
  • Mbah Qopet's Blog
  • Musa Khairul Umam
  • Rama 88
  • Shinobi Caemk
  • Tangerang Blogs
  • Tutorial Photoshop
  • Zona Download Gratis
• Amazing Website!
  
  • Youtube
  • Javascriptkit
  • Blogger
  • Farixsantips :D
  • Search Engines
    
    • Google
    • Yahoo
    • Bing

Lihat kan? Penuh Style dan Warna. Pengeditan tidak berhenti sampai situ aja sob, bisa kalian edit sendiri. Mau di terapkan contoh diatas sebagai Gadget sobat? Ikuti di bawah ini :

1. Buka Blogger.com beserta Email dan Passwordnya sobat masukan
2. Saat di Dashboard klik Layout → Add a Gadget → Javascript/HTML
3. Isi Kotak Kosong Javascript/HTML dengan kode Berikut :

   <script src="https://sites.google.com/site/farixsantips/scripts/flipmenujavscript.js"></script>
   <ul class="flipMenu">
   <li><a href="javascript:closeAllFlips()">Hide All</a></li>
   <li><a href="javascript:openAllFlips()">Show All</a></li>
   <li>10 Blog Deal
   <ul>
   <li><a href="javascript:void(0)">Aku Mau Gratisan</a></li>
   <li><a href="javascript:void(0)">Cek Info</a></li>
   <li><a href="javascript:void(0)">HaViZ's Blog</a></li>
   <li><a href="javascript:void(0)">Mbah Qopet's Blog</a></li>
   <li><a href="javascript:void(0)">Musa Khairul Umam</a></li>
   <li><a href="javascript:void(0)">Rama 88</a></li>
   <li><a href="javascript:void(0)">Shinobi Caemk</a></li>
   <li><a href="javascript:void(0)">Tangerang Blogs</a></li>
   <li><a href="javascript:void(0)">Tutorial Photoshop</a></li>
   <li><a href="javascript:void(0)">Zona Download Gratis</a></li>
   </ul>
   </li>
   <li>Amazing Website!
   <ul>
   <li><a href="javascript:void(0)">Youtube</a></li>
   <li><a href="javascript:void(0)">Javascriptkit</a></li>
   <li><a href="javascript:void(0)">Blogger</a></li>
   <li><a href="http://farixsantips.blogspot.com">Farixsantips :D</a></li>
   <li>Search Engines
   <ul>
   <li><a href="javascript:void(0)">Google</a></li>
   <li><a href="javascript:void(0)">Yahoo</a></li>
   <li><a href="javascript:void(0)">Bing</a></li>
   </ul>
   </li>
   </ul>
   </li>
   </ul>

   Kode Unggu : Kode Javascript yang wajib di letakan disitu
   Kode Biru : Tombol Cepat Saji untuk membuka semua Folder/Akar
   Kode Merah : Nama Category yang mengkatagorikan Kumpulan List
   Kode Oranye : Nama Category yang mengkatagorikan Kumpulan List yang terletak di Kumpulan List juga (bingung ya)
   Kode Hijau Terang : Kumpulan List dari Sebuah Category/Merah
   Kode Hijau Gelap : Kumpulan List dari Sebuah Category yang Category-nya terletak di Kumpulan List/Hijau Terang
   Oh iya kalau kode javascript:void(0) itu tolong di ganti dengan link yang di perlukan :)
   Kalau Pusing mohon dilihat lagi Contoh Preview Hierarchy List Menunya di atas ↑
4. Setelah Itu Save dan Jadi!

Nah, bagus bukan Hierarchy List Menunya? Hehe kalau ada kesalahan dalam pengucapan mohon di maafkan dan di maklumi :) kurang lebihnya Mohon maaf :)