Cara Membuat Menu Navigasi Header dan Footer Blogger - Jati882

Cara Membuat Menu Navigasi Header dan Footer Blogger

Membuat Menu Navigasi Header dan Footer di Blogger Dengan Bantuan Aplikasi Quickedit


Menu navigasi

Pada saat pertama kali pengunjung sebuah blog selesai membaca sebuah artikel yang menarik, biasanya dia akan melihat apakah ada artikel lainnya pada blog tersebut yang perlu untuk dibacanya lagi.

Untuk mengetahui artikel apa saja yang ada pada sebuah blog, pengunjung dapat melihatnya di Sitemap yang ada pada blog tersebut, melihat daftar postingan populer, atau dengan melihat bagian arsip blog.

Untuk memudahkan pengunjung blog saya ini mengetahui daftar isi blog ini, saya sudah membuat sitemap yang saya letakkan pada menu navigasi Header dan Footer.

Header

Jika anda mengklik Burger menu yang ada di sebelah kiri atas layar, maka akan terlihat dua menu utama dan sub menu dari keduanya.

Pada Menu utama 1, terdapat 3 Sub menu yaitu :

  1. Aplikasi, untuk artikel-artikel yang saya beri label aplikasi 
  2. Blog, untuk artikel-artikel yang saya beri label Blog
  3. SEO, untuk artikel-artikel yang saya beri label SEO 

Pada Menu Utama 2, terdapat 5 Sub menu yaitu :
  1. Contact, berisi alamat email saya, dll. 
  2. Profil, catatan kecil tentang diri saya 
  3. Privacy Policy 
  4. Disclaimer 
  5. Sitemap, yaitu Daftar isi Blog 
Menu Navigasi

Selain Menu Navigasi di bagian Header, saya juga membuat Menu Navigasi di bagian Footer blog ini,

seperti yang terlihat dibawah ini :

Footer

Jika anda mengklik Sub menu Sitemap, baik yang ada pada bagian Header maupun yang ada bagian Footer, maka akan tampil daftar isi blog ini dengan 3 kategori, yaitu Aplikasi, Blog, dan SEO, sesuai tag yang saya berikan ke tiap-tiap artikel pada saat saya tulis.

Sitemap

Sitemap 1

Sitemap 2

Lalu bagaimana cara membuat Menu Navigasi Header dan Footer?


Sebelum membuat Menu Navigasi Header dan Footer anda harus membuat lima Halaman, yaitu Contact, Profile, Privacy policy, Disclaimer, dan Sitemap, berikut adalah langkahnya :

1. Membuat Profile anda dengan cara
  • Masuk ke Dashboard Blogger
  • Pilih Tata Letak/Layout
  • Klik +Tambah Gadget/Add Gadget pada sidebar
  • Klik + Profile
  • Klik tombol Simpan/Save 
  • Klik tombol Publikasikan 

2. Membuat Halaman baru dengan judul "Contact".

Pilih Pages > New Pages
  • Masukkan info Contact anda seperti alamat email, link akun Facebook milik, link akun Twitter anda, dsb.
  • Klik tombol Simpan/Save
  • Klik tombol Publikasikan 

3. Membuat Halaman baru dengan judul "Privacy Policy" , silahkan baca kembali Cara Membuat Privacy Policy

Pilih Pages > New Pages
  • Klik tombol HTML 
  • Paste kode HTML Privacy Policy 
  • Klik Simpan/Save
  • Klik Publikasikan 

4. Membuat Halaman baru dengan judul "Disclaimer" , silahkan baca kembali Cara Membuat Disclaimer

Pilih Pages > New Pages
  • Klik tombol HTML 
  • Paste kode HTML Disclaimer 
  • Klik Simpan/Save
  • Klik Publikasikan 

5. Membuat Halaman baru dengan judul "Sitemap", silahkan baca kembali Cara Membuat Sitemap

Pilih Pages > New Pages
  • Klik tombol HTML 
  • Paste kode HTML Sitemap 
  • Klik Simpan/Save
  • Klik Publikasikan 

Apabila anda telah membuat lima Halaman baru diatas, copy link Halaman baru satu per satu ke wordpad dengan cara:

View

  • Masuk ke Dashboard Blogger
  • Klik Halaman/Pages
  • Klik View Halaman yang bernama Profile
  • Copy link Halaman/Pages Profile, lalu paste ke Wordpad
  • Lakukan cara yang sama untuk empat Halaman lainnya, lalu paste ke Wordpad dan simpan.

Link dari lima Halaman/Pages inilah yang akan kita letakkan pada Menu Navigasi di Template nantinya.

Saya menggunakan template Viomagz v3.1 redesain pada blog ini.

Berikut adalah beberapa langkah untuk membuat Menu Navigasi Header dan Footer :


1. Backup template Viomagz v3.1 atau template yang yang anda gunakan pada blog anda dengan cara :
Buka Dashboard Blogger > pilih Theme > klik menu 3 titik > Klik Backup > Download

Menu


2. Buka file template yang di Backup tadi menggunakan aplikasi Quickedit edit yang dapat anda download dari playstore

Terdapat 4 menu utama pada aplikasi Quickedit, yaitu :

Quickedit

Kode Html

Kode html 1

Kode html 2

3. Cari kode HTML menu navigasi Header dengan menggunakan fitur Cari pada menu aplikasi Quickedit

  • Masukkan keyword menu navigasi header 
  • Klik tombol Cari 

Quickedit 1

Kemudian kode HTML menu navigasi header akan terlihat seperti dibawah ini :


4. Ganti Sub menu yang ada pada kode HTML template diatas dengan cara :

Ganti semua tulisan Menu dan tulisan Sub menu, dan ganti dengan tulisan yang berwarna hijau dan yang berwarna ungu/biru seperti yang terlihat pada screenshot 1 dan Screenshot 2 dibawah ini :

Perhatikan, Screenshot 1 dan 2 ada pada nomor baris yang sama.
screenshot 1


Screenshot 2 (bagian kanan Screenshot 1)



Formatnya :
'https://nama blog/search/label/nama label'<nama sub menu>


5. Cari kode HTML menu navigasi  footer dengan menggunakan fitur Cari pada menu aplikasi Quickedit.

  • Masukkan keyword menu navigasi footer 
  • Klik tombol Cari 


Kemudian kode HTML menu navigasi footer akan terlihat seperti dibawah ini :

Kode html 3

6. Ganti Sub menu yang ada pada kode HTML template diatas dengan cara :

Ganti semua tulisan Menu dan tulisan Sub menu, dan ganti dengan url dari 5 Halaman yang sudah disimpan di wordpad, yaitu tulisan yang berwarna hijau, seperti yang terlihat pada screenshot 1 dan Screenshot 2 dibawah ini, dan tambahkan 1 Sub menu lagi yaitu Sitemap.

Perhatikan, Screenshot 1 dan 2 ada pada nomor baris yang sama.
Screenshot 1


Screenshot 2


Formatnya :

'https://url halaman anda'<nama halaman anda>

Jika sudah selesai klik tombol Simpan pada aplikasi Quickedit, pilih tombol Simpan Sebagai "nama baru template" anda.

Kemudian masuk ke Dashboard Blogger kembali :
Pilih Theme > klik menu 3 titik > klik Restore > masukkan template yang sudah diedit > View Blog

Selamat mencoba...

0 Response to "Cara Membuat Menu Navigasi Header dan Footer Blogger "

Post a comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

loading...