EDITBLOGTEMA

Let dancing with:

Cara membuat menu blogger responsif dilengkapi dengan tombol dropdown

AvatarOleh: adelina sofyan
menu navigasi responsif dan mobile friendly blogger
Sebenarnya dengan atau tanpa menu navigasi sebuah halaman blog akan berjalan normal dan baik baik saja. Akan tetapi menu navigasi telah diangap secara signifikan dapat membantu menavigasi pengunjung untuk dengan lebih mudah menemukan dan mengeksplorasi konten konten penting yang ingin kita tonjolkan. 

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:
  1. Tampak premium dan minimalis
  2. Responsif dan sudah barang tentu mobile friendly
  3. 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. 

4Klik 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.

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


 
Adel

Adelina Sofyan

contributor biasanya hanya menulis artikel pendek
Cara membuat menu blogger responsif dilengkapi dengan tombol dropdown

2 komentar

  1. Halo , kenapa masih ada tulisan di atas menu nav nya ya , mohon pencerahan nya tante

    BalasHapus
    Balasan
    1. Tulisannya apa ya Mas, tolong detail ya...? biar kami dapat gambarannya

      Hapus

Tinggalkan komentar:

kembali ke atas