4 Cara menu navigasi yang cocok buat template blogspot essentials

Mengapa rupanya jika harus template Essentials?

Karena pada awalnya saya berpendapat template default versi terbaru blogger blogspot itu hanya memiliki 4 varian utama dan masing varian utama memiliki 5 varian yang lebih tampak karena dibedakan dari warna warninya saja. Sturuktur templatenya mengikuti template induknya masing masing.

Namun terdapat template lain setelahnya yakni template 'Essentials' yang dapat kita jadikan pilihan untuk dijadikan template yang cocok buat blogging. 

Template ini hanya memiliki satu satunya varian tanpa warna, ya kita sebut saja varian tunggal, namun strukturnya ya ampun mirip sekali dengan contempo hanya saja terdapat pendeklarasian yang berbeda pada penulisan kode kode CSSnya yang disesuaikan dengan penulisan ID dan class class yang berbeda dengan contempo. Namun bagi saya itu adalah versi light dari template contempo!

Keberadaan satu satunya variasi template ini seperti main main saja. Bayangkan para desainernya sepakat dengan blogger, kita taroh saja satu template sederhana versi contempo dimari, dan biarkan pengguna memilihnya.  

Panasaran banget jadinya. 

Haruskah kita menyebut template dengan widget versi kedua dan layout versi ketiga ini adalah varian kelima?

Ah hanya Tim Blogger yang tahu! Anda dapat menemukannya pada dasbor pengaturan blogger. 

Namun setelah mengutak atik bagian halaman editor HTMLnya saya menyadari template ini sangat mudah di modifikasi! Saya lakukan dengan cara merombak header dan menu navigasi melalui tiga cara:

1. Menu navigasi dengan dropdown klasik yang responsif

Saya mempelajarinya melalui w3school. Jangan salah lho, walaupun sumber kodenya ada disana tidak akan mudah di pasang begitu saja tanpa memodifikasi kode kodenya terlebih dahulu sebelum bisa dipasang ke template blogger. 

Menu navigasi ini saya gabungkan dengan tombol menu pencarian bawaan template essential tentu saja setelah pengaturan CSSnya di modifikasi, kan harus memposisikannya di sana harus menambahkan margin, padding, z-index dll.

Tampilannya:

Perubahan atau modifikasi yang terjadi adalah:
Header berubah lebih dinamis setelah di rombak melalui HTML dan CSS
Menu navigasi tambahan (kustom) yang responsif dan mobile friendly
Tombol pencarian bawaan namun telah di rombak pengaturan CSSnya.

klasik responsif menu
Anda dapat menggunakannya karena dengan menu ini kita tidak terlalu banyak merombak template  essentials dan contempo namun dampak perubahan tampilannya terasa sangat besar, lihat :

DEMO

Menu itu akan tampak horizontal pada layar besar 8 inci ke atas, namun akan segera menjadi menu hamburger pada saat di buka melalui layar yang lebih kecil.

menu navigasi klasik dilihat dari tampilan mobile
Kesimpulan menu ini sederhana dan memiliki dropdown menu sehingga akan lebih banyak menu dan sub-menu yang dapat di tambahkan untuk memudahkan pengunjung dalam navigasi halaman blog.


2. Sidenav mobile (hamburger menu)

Sesuai namanya menu ini sepertinya cocok sekali buat dipergunakan mobile atau untuk tampilan seluler. Bentuknya adalah menu samping dengan tombol hamburger menu. pembuatannya menggunakan JQuerry, javascript library. Itu 'eye catching' banget, lho. 

Akhir akhir ini jenis tombol menu atraktif seperti ini sangat banyak dipergunakan. Terutama pada template template wordpress dan WIX.  

Ia juga terlihat modern dan mampu menyingkat banyak hal. Saya mempelajarinya melalui berbagai trik terutama dari codepen, w3school dan stack overflow. Ia mudah diterapkan ke dalam template Blogger blogspot. 

hamburger menu sidenav mobile
Lihat saja demonya, template ini 100% strukturnya adalah template essentials:

DEMO

Saya menyukainya dan masih sedang memodifikasinya agar perfomanya lebih baik lagi pada saat di pergunakan.

Perubahan tampilan karena pengaturan CSSnya adalah pada latar template dan juga header menjadi lebih dinamis. 


3. Scrolling menu hamburger beranimasi (hamburger menu 2)

Menu yang satu ini juga sedang menjadi pertimbangan saya untuk di modifikasi lebih lanjut, sama seperti menu nomor dua di atas saya mempelajarinya melalui codepen, stackflow dan w3school. 

Tampilannya sederhana saja yakni sebuah menu hamburger yang apabila di klik akan memunculkan menu horisontal pada layar besar seperti tablet dengan posisi landscape atau pada layar PC laptop dan PC desktop. 

Anda dapat menutup menu dengan memencet tombol tutup 'x' persis dengan tombol menu sidenav mobile.

hamburger scrolling menu beranimasi

Coba perhatikan demonya dan cobalah eksplorasi:


Untuk perubahannya ke depan saya ingin menambahkan sub-menu dropdown dan mengurangi menu utama hanya dengan batas 3 menu saja. 

Perubahan akan berpengaruh baik pada tampilan header. 

4. Simple sidenav

Jika Anda menginginkan menu sederhana, minimalis, ringan dan mudah di buat, maka model ini dapat di jadikan pilihan. Saya mengadopsinya 100% dari mata pelajaran di w3school.

simple mobile sidenav


Tampilan sidenav sederhana ini nyaris tidak mempengaruhi struktur template baik header mapun body.  Namun side navigasi ini mampu membuat template lebih sederhana dan mudah di mengerti oleh pengunjung. 

Ya karena ia minimalis itu tadi. Sedangkan sidenav pada template editblogtema yang sedang kami pergunakan sekarang ini juga dibuat berbasis teknik HTML yang terakhir ini. 

Demikianlah 4 contoh menu navigasi yang dapat diterapkan ke dalam template essentials kami juga telah memposting cara pembuatannya melalui halaman blog ini. 

Perlu di ingat, membuat top menu, side menu, hamburger menu dll, harus mempertimbangkan responsivitas dan mobile suatu halaman. 

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

Posting Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

Lebih baru Lebih lama

Formulir Kontak