You must enable Javascript in your browser to run or open this site.

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 :
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 GadgetJavascript/HTML
  3. Isi Kotak Kosong Javascript/HTML dengan kode Berikut :
    <script src="https://sites.google.com/site/farixsantips/scripts/flipmenujavscript.js"></script>
    <ul style="list-style:none;" 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 style="list-style:none;" >
    <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 style="list-style:none;" >
    <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 :)

96 comments

  1. List menunya kayak blog kakaknya mas faris :D

    BalasHapus
  2. lebih simple ya jadiya, dan gak memakan banyak tempat,, hehhe,, good,, ntar ane mau ganti yg 10 blog deal ahh jadi kyk diatas,, =)) =))

    BalasHapus
  3. wah keren jg tuh
    itu script buat sendiri apa?

    BalasHapus
  4. wehh , .. gag bilang-bilang neh kalo update . . -,-

    selalu keren neh triknya :)

    BalasHapus
  5. waaa.. keren nih, mirip menu tampilan windows ... :)
    cool ... :D

    BalasHapus
  6. To Rama : Ambil pertamax ampe kenyang! =)) iya hemat tempat :P
    To Musa : iya :) tapi beda script
    To Hafist : stylenya ane sob :) inti javascript dapat
    To Bayu : Orang udah post di grub :P thanks om
    To Shinobi : iya mirip mirip dikit :P 11 12 =))

    BalasHapus
  7. ha.ha mantep nih ane suka gaya ente :D , tapi di blog ane cocok ga ya ???

    BalasHapus
  8. oh ya kok itu ada javascript:void(0) gunanya buat apa sob ? ane buta JS

    BalasHapus
  9. gunanya buat Show Hide ya ??? keren nih bisa buka tutup, gambar Foldernya bisa di ganti kan ??

    BalasHapus
  10. ooh, jadi kaya di PC yah.. keren-keren.. ahehehe

    BalasHapus
  11. tips yang bagus nie...saya malah baru tahu, hmm...lumyan nie kalau dicoba, bisa ngirit halaman widget

    BalasHapus
  12. To Mbah Qopet : itu tolong diganti URL domain :), di gantinya lewat js sob, di buka file jsnya, trus upload.
    To Tituitbom : iya nih sob :D explorer
    To deny : iya silahkan di coba :D
    To Zh!nTho : ya boleh haha

    BalasHapus
  13. keren :D

    izin nyoba dulu ya sob ..

    BalasHapus
  14. Dapat ilmu baru nih..tak simpen dulu caranya baru nanti tak praktekkan sob...

    BalasHapus
  15. wah bangus amat ya gini, baru tahu ilmu kamu selalu bermutu....

    BalasHapus
  16. Pena hadir dan absen sore gan...tips nya bagus nih boleh dicoba

    BalasHapus
  17. Ok,Sob :D
    langsung di praktekin... ;)

    BalasHapus
  18. sip kang lanjutkan buat trik2 baru

    BalasHapus
  19. Kunjungan silaturahmi sora hari sahabat..postingannya bagus sob...

    BalasHapus
  20. ilmu baru bertambah nih sob, wah bagus ya bisa meringankan blog sedikit

    BalasHapus
  21. oooh, miripnya cuma dikit yaaCh, kirain banyak ... :P
    bukan 11 12 bro .. tapi cari 1 2 ... hahaah =))

    BalasHapus
  22. CTRL+D...nice tips untuk personalisasi tampilan Blog...happy blogging!

    BalasHapus
  23. Ga sia-sia perjalan panjang ke sini ternyata banyak ilmu yang harus diserap dari sahabat. Thanks kawan sudah berbagi.

    BalasHapus
  24. leren banget nih sob cool hierarchi list menu nya, komplit banget ilmu blogging di blog sobat,,,
    tengkiu

    BalasHapus
  25. To A-NX : oke sob silahkan ya untuk di cobain :)
    To cardiacku : silahkan di simpen, tapi jangan lupa tu di praktekan :P
    To Rogis Facebook : makasih gan :)
    To anisayu : wahahahaha baru tahu dia :P wkwkwkw :))
    To tautanpena : hihihihi silahkan di cobain :) semoga bermanfaat :)
    To Aku mau Gratisan : sip gan :P hihihihi
    To aris9 : oke gan ane siapkan artikel barunya :)
    To webmdmk : makasih akang :) :*
    To XaOn : semoga betah ya berkunjung dimari :)
    To kalo banyak mah wkwkwkw itu mah kalay buat OS mirip windows ekekek :))
    To Iskaruji dot com : thanks bangetz om untuk CTRL+D nya :* sun dolo :*
    To Bengkel Bangun : hehehehe adh aduh thanks banget supportnya bang bengkel huahahaha :))
    To Asis Sugianto : saya usahakan agar lebih komplit lagi ya om :) hihihi

    BalasHapus
  26. bener biar simple gak semrawut kea blog sy hehe....

    BalasHapus
  27. sebenernya buatnya gampang tp ngeliatnya perfect :P

    BalasHapus
  28. sangat menarik sob.izin menyimak.keren.gimana tuh caranya bisa go 10 blog deal heheeheh.

    BalasHapus
  29. ayo update lagi-lagi. Lagi dan lagi hehe 1 mgu ckup 3x update hehe

    BalasHapus
  30. To katils : gak juga kok sob :)
    To Cek Info : heheheh memang :P
    To BOB : tinggal di ubah aja sob :)
    To Dayz : iya sob :D

    BalasHapus
  31. To Katils : oalah pantesan ente lama banget update :P

    BalasHapus
  32. wah bagus ne sob buat tampilan lebih simple

    BalasHapus
  33. pret kok malah minta tolong ma ane ??

    BalasHapus
  34. wah infonya keren sob,, soo blog sy masih standard banget menunya,,:) boleh di coba nih

    BalasHapus
  35. berkunjung gan selamat pagi
    benar-benar cool ini gan

    BalasHapus
  36. waooo...ane pertamaxxx lagi sob dari bawah tapi=)) .....ijin nyedot ilmunya sob buat amunisi simpanan...

    BalasHapus
  37. KEmarin,ane coba?
    Hide all-nya ngak jalan :-/
    Kenapa ya? :(

    BalasHapus
  38. wah... ane telat nih.. :))
    btw.. link menu-nya keren n simpel
    bisa dicoba nih....

    BalasHapus
  39. Mantep 10 blog deals dapet backlink :D

    BalasHapus
  40. seneng banget sih sama javascript? apa nggak bikin blog jadi berat ya? soalnya buat loading dile javascript kan lumayan tuh...

    OOT lagi, tanyain ke kakakmu dong caranya biar bisa nge-remote komputer pake hp melalui bluestacks..penasaran nih pengen nyoba..trims

    BalasHapus
  41. To Zona Download Gratis : iya sob sangat simpel :)
    To Mbah Qopet : yang JAVASCRIP:VOID(0) itu link adddoooohhhhh ya di ganti lahhhh, gimana dah lu
    To al kahfi : silahkan di cobain :)
    To Obat Sakit 2011 : thanks gan :) silahkan di coba, kalau perlu sekarang =))
    To binkbenk : wkwokwokwow bisa aja lu gan silahkan di sedot sampe habis :P
    To Aku mau Gratisan : orang bisa kok :D ahaha salah kopas kali sob :)
    To eart-inside : hihihihi thanks sob :) silahkan di cobain :)
    To Musa : orang itu bukan link menuju 10 Blog Deal :P wkwkw
    To Fariable : selera orang dong om :P mang di pake semuanya apa? gak lah :D kalau mau pake semua sih boleh aja, di blog saya ini tinggal pilih kok mana yang mau di pasang, kan gak harus semua di pasang :| Kakak ane lagi kuliah di surabaya om :( ntar deh kalau ke Jakarta, ane tanya tanyain sampe mati =))

    BalasHapus
  42. To Musa : hahahaha makanya lain kali teliti :P
    To Kerajaan air Mata : thanks sob :)

    BalasHapus
  43. keren sekali Mas.saya pingin coba dulu.thanks banget atas infonya

    BalasHapus
  44. cakep surantep, apalagi liat layout templatenya; keyeen :D

    BalasHapus
  45. insyaallah sob aman di tempat katils :) katils tidak pernah memilih teman siapapun asal mau berteman ;) mf kadang sy tdak merply coment sobt krnt takut masuk spam krn bukan tempatx dlam coment

    BalasHapus
  46. weeeee... comment nya panjang banget nih, pegel nih scroll ke bawah ... =))

    BalasHapus
  47. To Ego Dafma Dasa : silahkan di coba trix and tipnya :D
    To alkatro : hihihihi thanks sob :)
    To katils : setuju banget tuh om :) kalau milih milih teman itu pandang bulu tuh bro, gak baik :D iya gak apa apa :)
    To Shinobi : waaahhhh ada ke erroran dikit nih :D maap maap :P

    BalasHapus
  48. Parkir duLu disini ,
    Nungguin trik yang baru, ckckck :D

    BalasHapus
  49. asik juga ni sob,, scriptnya yang otomatis ada ga sob,,jadi update sendiri ketika kita update posting

    BalasHapus
  50. =))
    berkunjung sambil nunggu postingan baru

    BalasHapus
  51. keren sumpah keren, jg pingin nyoba :)

    BalasHapus
  52. mangtaps gan!
    boleh di coba niih
    bikin tampilan lbel kyk winXP :D
    hhe, bikin seger2!

    BalasHapus
  53. Belajar lagi ke t4nya Farisantips... :D

    BalasHapus
  54. Ehmmm...bagus sih! Tapi JS.
    Saya males pakek JS..
    Tapi gag apa2 mungkin bermanfaat untuk yang lain..
    Makasih sahabat...

    BalasHapus
  55. asikkkkkkkk,,, wat tambahan ilmu neh,

    BalasHapus
  56. wah asiik :D
    akan segera dicoba ;)

    BalasHapus
  57. ane dteng lagi mumpung lagi lewat... :))
    kapan2 ane coba ni desain menunya...

    BalasHapus
  58. ngintip news post dlu aah ,


    ternyata belum ada .. :D

    BalasHapus
  59. To A-NX : oke mas :) silhahkan di tunggu :)
    To Hausgame : saya disini buka menunjukan daftar isi lho bro :D kalau daftar isi ane punya kok disini, tapi gak sistim buka tutup :)
    To Dayz : oke silahkan di tunggu =))
    To Cek Info : silahkan di coba :))
    To How To Be Vegetarian : hahahaha bisa aja nih akang :P seger segeran mah es klapa :))
    To Aku mau Gratisan : hihihihi segera berkunjung kesana :D wahhh pake akun google :(
    To Obat sakit 2011 : selamat sore gan :))
    To Kopiah Putih : iya sob gak apa apa :) tetapi kalau mau silahkan di cobain :P
    To Topjer : hihihihi tambah tambah tambahhhhh :))
    To _ciids : silahkan di coba secepatnya keburu kehabisa :))
    To eart-inside : hahahaha silahkan di cobain design menunya :D
    To Shinobi : wakwkkwkwk sabar sabar :D kehabisan bahan info :P

    BalasHapus
  60. kren juga nih tar ane coba ah,thank untuk sharenya gan :))

    BalasHapus
  61. Bagus dan loadingnya juga kagak berat neh...

    BalasHapus
  62. @ ALL

    Aye Punya Widget BARUU!!!!!!

    http://tentangduniadanweb.blogspot.com/2011/10/widget-dengan-css.html

    Mohon Dibaca YA!!

    Kalau Suka Dikomment yA

    Widget Baru

    BalasHapus
  63. To BLOGCUNAYZ : hihihihi sama sama sob :) silahkan di cobakan :P
    To HALAMAN PUTIH : iya sob :((
    To Udah Cucanto : wah komen kentut ~x(

    BalasHapus
  64. unfortunately idk the language :P lol

    BalasHapus
  65. To Richard : ohhhh :-/ would you translate? :-/

    BalasHapus
  66. To Richard : thanks gan :D
    To ZeZe : ohhhh would you translate? :-/
    To Mika : thanks for coming :)

    BalasHapus
  67. mantabz banget infonya kawan, salam sukses

    BalasHapus
  68. Tambah hari tipsmu tambah ajib sob.Persisnya seperti menu di komputer ya sob.Ingin dunk.Ijin mempraktekannya di blogku,makasih ya,happy blogging ajah.

    BalasHapus
  69. To Warkop Anemania : sukses juga kawan :)
    To Er'end : iya memang mirip dengan komputer hahaha :D sulahkan

    BalasHapus
  70. wah mantab nih,,ijin dicoba sob ..hehe

    BalasHapus
  71. To Thepoen : silahkan di coba sob :) pasti di jamin oke ;)

    BalasHapus
  72. ane nyoba kog gx bisa ya gan :)

    BalasHapus
  73. To Thepoen : gak bisa dimananya sob bisa kok

    BalasHapus
  74. >>>ichwan HAUSGAME : silahkan di buat :)

    BalasHapus
  75. kok di browser gw gag keliatan warna dan style lainnya ya..hiks :(

    BalasHapus
  76. Sungguh sangat menarik tips ini,dapat dari mana ya sob kalau boleh tahu ?

    BalasHapus
  77. To DokterGigiGaul : browser apaan sob yang sobat gunankan :)
    To Prapatan Kertek : dari google sob :)

    BalasHapus
  78. keren2 artikelnya, tp sayang selalu menyertakan script2...xixixixi
    saya malah mau meminimalis script...
    ini jg dah bisa pake css kok...hohohoho
    cek gi dot tree menu without script

    BalasHapus
  79. To Beben Koben : ane baru tau bisa menggunakan css, ya ampun!!

    BalasHapus
  80. ternyata gini to buatnya ane mau buat dolo masbro

    BalasHapus
  81. To Wahid Sahidu : heheheh silahkan di cobain sobat tutorialnya :)

    BalasHapus