Dan tentu saja sedikit banyaknya akan menambah nilai bagus bagi halaman yang menggunakannya, terutama sebuah halaman blog yang sudah besar, kompleks dan memiliki lebih banyak konten konten berguna.
Salah satu menu navigasi yang dapat Anda buat adalah menu navigasi yang dapat diterapkan ke dalam template blog berikut ini.
Kelebihan menu navbar kustom ini:
- Tampak premium dan minimalis
- Responsif dan sudah barang tentu mobile friendly
- Memiliki dropdown sehingga dapat menambahkan daftar menu tanpa baras
Sumber Kodenya adalah sebagai berikut:
See the Pen poEYWdj by Sufyan Yaan (@sufyan-yaan) on CodePen.
Cara menerapkannya ke dalam template:
1. Klik tombol HTML di dalam kolom codepen di atas dan copy kodenya. Lalu masuk ke pengaturan blogger>>pilih tema>>pilih Edit HTML. Cari kode <body> atau tekan control+F keyboard dan tuliskan '<body' (tanpa penutup) tekan enter. Letakan kode yang sudah di copy tadi di bawah atau sesudahnya.
Keterangan: Jangan sertakan atau hapus saja kode <h2>Hasilnya:</h2> dan hapus kode dibawahnya juga sebagai berikut:
<h2>Menu navigasi blog dengan dropdown responsif</h2>
<p>coba robah ukuran layar monitor misal, hape ke dekstop/laptop untuk melihat perubahannya.</p>
<p>Klik mata panah menghadap ke bawah untuk melihat menu turun (dropdown)</p>2. Klik tombol CSS di dalam kolom codepen di atas dan copy kodenya. Masih di dalam halaman editor HTML blogger cari kode </head> dan letakan di atasnya.
3. Klik tombol JS di dalam kolom codepen di atas dan copy kodenya. Masih di dalam halaman editor HTML blogger cari kode </body> dan letakan di atasnya.
Catatan: untuk kode JS sebelum meletakannya di atas kode </body> Anda harus menambahkan tag pembuka <script> dan penutup </script> jika ingin ia bekerja di dalam halaman HTML blogger.
4. Klik tombol Result untuk melihat hasil dari lembar kerja HTML tersebut.
Save tema.
Template bawaan (default) yang mendukung:
Varian baru: Contempo, emporio, soho, notable,
Varian lama: Simple, Awesome, travel, window picture dst kecuali Dynamic.
Adelina Sofyan
contributor biasanya hanya menulis artikel pendek
Halo , kenapa masih ada tulisan di atas menu nav nya ya , mohon pencerahan nya tante
BalasHapusTulisannya apa ya Mas, tolong detail ya...? biar kami dapat gambarannya
Hapus