TIPS Membuat Drop Down Menu - part 2

by - September 04, 2015

tips membuat drop down menu

Maaf ya, setelah hampir dua minggu, baru ketulis bagian kedua TIPS Membuat Dropdown Menu.
Ngulang sedikit postingan lalu.  Efek kegalaun dalam menentukan saya ini blogger apa [Baca juga Tentang Niche Blogger vs Life Style Blogger] nampak nyata dalam penentuan kategori artikel. Daripada galau berkepanjangan, akhirnya saya tetapkan untuk tetap melanjutkan kesenangan menulis apa saja seperti biasa dan memilih merapihkan tampilan kategori menjadi Drop Down Menu.  Aha !

Boleh dibilang nekat secara saya ngga punya basic soal programming atau coding apalagi CSS. But curiosity beats everything.  Saya pun mulai browsingdan berdasarkan hasil berbagai rupa drop down menu tutorial yang saya temukan, inilah cara yang saya pilih. 


Di postingan bagian pertama sudah disinggung alasan kenapa kita perlu menganalisa tema tulisan yang sering kita posting.  Singkatnya, untuk memberikan gambaran pada kita sendiri, menu apa saja yang akan tetapkan.

Jadi setelah menganalisa sendiri tema tulisan yang sering dibuat, ternyata selain suka bercerita tentang perjalanan, saya juga sering sharing tentang blogging, sesekali mengulas buku yang saya baca, film yang saya tonton dan produk.  Bahkan kadang secara gak tahu diri ngomongin tentang fotografi padahal kemampuannya masih cetek (hihi).  

Dan kesimpulannya adalah ini;
  1. Sering posting tentang teknologi dari sudut pandang perempuan gaptek a.k.a saya ^_^ .  Kategori ini saya beri judul Women & Tech
  2. Tulisan tentang perjalanan termasuk jelajah rasa alias makanan, saya kategorikan sebagai Travelogue
  3. Ulasan buku, film dan produk --> Review
  4. Kegemaran memotret dan keisengan dengan handicraft --> Hobbies.
  5. Sharing pengalaman seru jadi orang tua --> Mom's Chronicle.  
  6. Yang terakhir, cerita serunya kegiatan blogging yang bersifat publicist seperti undangan blogger atau lomba saya buat dalam kategori Event.

Semua itu diistilahkan sebagai Level 1

Karena saya juga masih ingin membuat kategori yang lebih spesifik maka dari Level 1 tersebut saya buat juga Level 2 nya.  Contohnya untuk kategori Hobbies.  Di samping memotret, saya juga suka memasak dan crafty atau kerajinan tangan.  Mengingat kedua hal tersebut hanya dilakukan sesekali maka saya putuskan untuk menggabungkan memasak dan crafty menjadi sub-kategori (Level 2) yang dinamakan Do It Yourself, terpisah dari bagian Fotografi.

Begitu juga dengan proses levelling untuk kategori lainnya.  Untuk penamaan kategori sesuaikan dengan kondisi dan keinginan masing-masing.  
  • Travelogue dengan sub-menu Travel Story dan Food Story.
  • Tentang kesukaan memotret dan keisengan dengan handicraft --> Hobbies, sub-menu Fotografi dan Do It Yourself
  • Selain parenthing, di Kategori Mom's Chronicle ada sub-menu Life.  Hal-hal yang tidak termasuk kategori disebut di atas, biasanya saya masukkan di sini.  Mirip kategori gado-gado gitu deh ^_^

Pendeknya, try to find category with catchy names, if possible. Bila perlu, blog walking ke laman-laman lain untuk cari inspirasi nama dan referensi.  Be creative as much as you can !  Itu yang saya lakukan and I enjoy the process ^_^

Oh ya, Level 2 ini opsional ya.  Jika memang dirasa tidak perlu, cukup berhenti di Level 1 saja. Bisa dibilang ini keuntungan belajar CSS.  Kita dapat merubahnya sesuai kebutuhan.  Kalau di kemudian hari, kategori dalam blog Anda beranak pinak, don't worry, you can simply adjust it.

Jika sudah siap dengan kategori Level 1 dan Level 2 , strukturnya nanti akan nampak seperti ini.

Level 1 Kategori 1
Level 2 Kategori 1 sub-menu A
Level 2 Kategori 1 sub-menu B

Level 1 Kategori 2
Level 2 Kategori 2 sub-menu A
Level 2 Kategori 2 sub-menu B ..... dst

Kalau bertanya dalam hati, kenapa sih sampe susah payah menentukan Level 1 dan Level 2 beserta sub-menunya segala ?  Hal tersebut akan memudahkan kita dalam penulisan kodenya nanti. 

Pembuatan struktur yang demikian ternyata sangat membantu sekali untuk yang awam seperti saya tapi sok tahu pengen ngerjain sendiri menu drop down seperti ini *kibasjilbab* ^_^

Selesai dengan struktur menu yang Anda inginkan ?

Silahkan petakan dalam codingnya yang bisa Anda copy paste sebagai berikut.

COPY PASTE coding berikut, disarankan kerjakan di file biasa terlebih dahulu.

<!-- start navmenu -->
<ul id='cssnav'>
<li class="active"><a href='http://www.NAMA-BLOG.com'>Home</a></li>
<li class="sub"><a href='http://www.NAMA-BLOG.com'>Level 1 Kategori 1</a>
<ul>
<li><a href='http://www.NAMA-BLOG.com/search/label/Level 2 sub-menu A'>Level 2 sub-menu A</a></li>
<li><a href='http://www.NAMA-BLOG.com/search/label/Level 2 sub-menu B'>Level 2 sub-menu B</a></li>
</ul>
<li><a href='http://www.NAMA-BLOG.com'>Level 1 Kategori 2</a>
<ul>
<li><a href='http://www.NAMA-BLOG.com/search/label/Level 2 sub-menu A'>Level 2 sub-menu A</a></li>
<li><a href='http://www.NAMA-BLOG.com/search/label/Level 2 sub-menu B'>Level 2 sub-menu B</a></li>
</ul>
</li>
<li><a href='http://www.NAMA-BLOG.com'>Level 1 Kategori 3</a>
<ul>
<li><a href='http://www.NAMA-BLOG.com/search/label/Level 2 sub-menu A'>Level 2 sub-menu A</a></li>
<li><a href='http://www.NAMA-BLOG.com/search/label/Level 2 sub-menu B'>Level 2 sub-menu B</a></li>
</ul>
</li>
<li><a href='http://www.NAMA-BLOG.com'>Level 1 Kategori 4</a>
<ul>
<li><a href='http://www.NAMA-BLOG.com/search/label/Level 2 sub-menu A'>Level 2 sub-menu A</a></li>
<li><a href='http://www.NAMA-BLOG.com/search/label/Level 2 sub-menu B'>Level 2 sub-menu B</a></li>
</ul>
</li>
<li><a href='http://www.NAMA-BLOG.com'>Level 1 Kategori 5</a>
<ul>
<li><a href='http://www.NAMA-BLOG.com/search/label/Level 2 sub-menu A'>Level 2 sub-menu A</a></li>
<li><a href='http://www.NAMA-BLOG.com/search/label/Level 2 sub-menu B'>Level 2 sub-menu B</a></li>
</ul>
</li>
<li><a href='http://www.NAMA-BLOG.com/search/label/Level 1 Kategori 6'>Level 1 Kategori 6</a></li>

</ul>

<!-- end navmenu -->


Pada tahap ini, kita akan melakukan kustomisasi sesuai levelling yang sudah dipetakan sebelumnya.
  • www.NAMA-BLOG.com --> ganti dengan nama blog Anda
  • Level 1 Kategori 1 --> tulis sesuai Level 1 Kategori 1 yang sudah Anda tetapkan dst.
  • Level 2 sub-menu A --> begitu juga dengan Level 2 dst.
  • Untuk penulisan dengan satu level, saya contohkan kategori Event di mana hanya terdiri dari satu level saja.  Penulisan menu untuk kategori satu level seperti ini, penulisannya sebagai berikut;
<li><a href='http://www.mydairynote.blogspot.com/search/label/Event'>Event</a></li>

Nah, kustomisasi selesai, barulah kita pindahkan coding tersebut dalam blog.
  1. Login blogspot
  2. Pilih Dashboard menu
  3. Pilih Lay Out
  4. Add gadget
  5. Pilih HTML/Java Script
  6. Posisikan gadget baru tersebut pada Cross Column
  7. Copy paste/salin coding yang sudah dikustomisasi lalu Save.

Tampilan Layout dengan gadget drop down menu 


Setelah saya berkenalan dengan si CSS atau Cascading Syle Sheet ini, yang wajib diperhatikan adalah penulisan karakternya ngga boleh keliru.  Kurang satu karakter aja, hasilnya beda.  Memang perlu ketelitian tersendiri dalam pengerjaannya.  But it's worthed dan ternyata tidak "seseram" yang dibayangkan sebelumnya.

Jadi kalo boleh saran, lakukan kustomisasi secara offline dulu, bisa di file Word atau Notepad. Setelah itu baru salin di blog-nya.

Masih bingung ?
Makanya coba dulu.  Kalo ngga dicoba, ngga tahu bingungnya di mana.   Ya kaan, ya kaannn .... ^_^

Okay, selamat mencoba ya.


Picture image title from Pixabay with personal modification.

You May Also Like

12 comments

  1. nuwun mak...bookmark deh. ta coba nanti malam. dari dulu pengen bikin yg ginian tapi ga berani takut blognya jadi ancuuur hehehehe

    ReplyDelete
  2. makasih banget tutorialnya ya mbak, aku mau edit2 blog nih

    ReplyDelete
  3. Hua susah. Hehehehe... aku mah kalo ngedit-ngedit, yang gampang-gampang aja. Pengen sebenernya bikin drop down menu gitu. Tar deh kalo senggang. TFS, Mbak...

    ReplyDelete
  4. Saya galau kalau udah mulai ngutak-ngatik blog, Mak. Gak kerasa waktu cepat berlalu, tahu2 anak saya udah bangun aja, sementara blog nya gak kunjung selesai ngeditnya. hiks. :'(
    Btw, makasi buat tutorial nya ya, Mak. Kapan2 mau saya coba, aah... :)

    ReplyDelete
  5. Salam kenal mbak,
    Oh ya kalau di klik sub menu nya nanti akan open halaman baru atau terbuka dihalaman yang sama?
    TFS

    ReplyDelete
    Replies
    1. Di halaman yang sama mbak Fitri.
      Salam kenal juga ya.

      Delete
  6. bukmark dulu. ini belajarnya bisa seharian di blog kelinci percobaan. nuhun maakk

    ReplyDelete

Hai ^_^
Terima kasih sudah berkunjung dan membaca tulisan saya di blog ini.
Silakan tinggalkan komentar yang baik.
Mohon maaf, komentar anonim maupun yang sifatnya spam, tidak akan dipublikasikan.
Keep reading and Salam !