Membuat menu navigasi tanpa coding

April 25, 2016
Cara membuat menu di bawah header, menu, tab menu, tutorial, tips blog
Tab menu

Sebuah blog tanpa navigasi yang bagus ibarat peta buta. Bisa saja pembacavmampir ke blog, tapi habis itu dia langsung pergi. Sayang kan, kalau kamu punya artikel bagus-bagus dan bermanfaat tapi teronggok begitu saja.
Fungsi navigasi pada blog yang paling umum adalah label, kategori, atau archive. ternyata, fungsi itu belum cukup. Keberadaan menu di bawah header akan mempermudah pembaca berpindah dari satu artikel ke artikel lain. Apalagi, saat ini pembaca blog lebih banyak memakai versi mobile. Label dan arcive tidak cocok ditampilkan pada versi mobile, berbeda dengan bilah menu yang biasanya terletak di bawah header. Cukup mudah membuat menu ini, tidak perlu coding. 

Untuk Blogspot
Tutorial ini saya buat untuk blog berjenis blogspot dengan template bawaan blogger. Jika blogmu memakai template unduhan atau  hasil beli, biasanya sudah tersedia. Kalau tetap mau mengaplikasikan ya bisa saja sih, tapi hapus dulu yang bawaan template lama agar tidak dobel. Yang saya maksud menu di sini adalah menu yang berasal dari label. Seperti contohnya di blog ini, ada menu #traveling yang saya ambil dari label traveling.

Tutorial membuat menu di bawah header
1| Pertama-tama kamu harus menentukan mau membuat menu apa. Yaiyalah, masa mau tanpa nama..blogger nya bingung dong
Cara membuat menu di bawah header, menu, tab menu, tutorial, tips blog
Pilih tata letak lalu pages

2| Bukalah halaman dasbor blogger. Lebih leluasa lewat PC ya, kalau saya lewat smartphone agak kecil-kecil gitu jadinya. 
3| cek sebelah kiri, ada tulisan “tata letak” atau “layout” klik deh
4| ketemu menu pages? Klik edit di sebelah kanan bawah
5| klik pada tulisan berwarna biru “eksternal link”
Cara membuat menu di bawah header, menu, tab menu, tutorial, tips blog
Masukkan eksternal link
6| masukan nama menu, misalnya “traveling”
Bikin menunya nih
7| masukan link nya, caranya gimana? Buka blogmu, cari label yang dimaksud. Misalnya, label “traveling”. Klik kanan pada “travelink” lalu pilih “copy link address”. 
8| Kembali ke tab “tata letak” di dasbor (nomor 6), paste ke kolom yang tersedia
9| save
10| save
11| cek hasilnya dengan membuka “home” blog kamu

Mudah sekali bukan cara membuatnya? Tanpa coding sama sekali, cocok buat newbie.

Menghapus menu di bawah header
Kalau hasil kerjamu kurang ok, atau kamu mau mengganti nama menu gimana? Gampang kok.

1| Bukalah halaman dasbor blogger. 
2| cek sebelah kiri, ada tulisan “tata letak” atau “layout” klik
3| ketemu menu pages? Klik edit di sebelah kanan bawah
4| ketemu list menu kamu? Klik tanda “x” pada menu yang ingin dihapus
Cara membuat menu di bawah header, menu, tab menu, tutorial, tips blog
Klik "x"

Navigasi lain
Selain tab menu, label, archive, ada juga widget tambahan seperti “linkwithin” dan “engageya” yang digunakan untuk menampilkan artikel terkait. Tapi, tab menu di bawah header ini yang menurut saya paling cocok dimasukkan dalam tampilan mobile. Tidak memberatkan dan tidak mengganggu kenyamanan pembaca blog. 

Selamat mencoba...terima kasih sudah membaca Monday NO Gaptek..




45 comments on "Membuat menu navigasi tanpa coding"
  1. Bookmark. Aku berkali-kali gagal bikin kayak gini...hihi :p

    ReplyDelete
  2. Oh iya ya mending labelnya yang di jadikan menu.
    tapi eh. label ku udah terlalu banyak kayaknya buat di taruh di bawah menu

    ReplyDelete
    Replies
    1. Ga perlu semua mba...label yang utama aja..yg jadi fokus blog kita :)

      Delete
  3. gore g lake coding hehehe.bookmark duluuu....

    ReplyDelete
  4. oh ini maksudnya label yang jadi menu bukan laman yang dijadikan menu. Blogspot sekarang lebih mudah dipahami. semua orang bisa mengotak-atik dengan sendiri dan leluasa.

    ReplyDelete
    Replies
    1. Iya..kalau laman, mungkin sudah banyak yang tahu. Dulu sih kalau mau bikin begini musti coding ya

      Delete
    2. Aku juga masih setia dengan bawaan blogspot, pengen ganti yang lebih responsive belum menemukan template yang mantap dihati. Tapi ada rencana ganti seh, dan aku menggunakan laman halaman bukan label. Terasa berat loading karena penuh link.

      Delete
    3. Jadi mau pakai tips ini? Hwheheh

      Delete
  5. Makasih yaa infonya. Penting banget. Dari dulu nyari caranya. Soalnya bingung external linknya apa. Ngertinya ke alamat blog yg lain...

    ReplyDelete
    Replies
    1. Bisa sih diisi alamat blog lain

      Delete
    2. Bisa sih diisi alamat blog lain

      Delete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Hal yang sederhana tapi jarang orang yang tahu. Karena blogspot setiap tahunnya selalu ganti tampilan. Bikin orang atau master yang membahas seluk beluk blog jadi kelimpungan.

    ReplyDelete
  8. Aku lagi nyari ini, thanks mba nurul.

    ReplyDelete
  9. Aku lagi nyari ini, thanks mba nurul.

    ReplyDelete
    Replies
    1. Begitukah? Alhamdulillah...semoga bermanfaat yaa

      Delete
  10. Ngutak ngutik layout gini emang paling enak pake PC. Aku pake tablet, ga bergeser2 :(
    Jadi malez deh

    ReplyDelete
    Replies
    1. Ini aku pakai hape layar 5.5 inch mba :)

      Delete
  11. Thanks tutorialnya Mbak. Aku ada blog di BP tapi jarang kuotak-atik sih. Mungkin ntr berguna nih thx

    ReplyDelete
  12. Utak atik blog bisa makan waktu sendiri yaaa, kadang keasikan..

    ReplyDelete
  13. Aku lagi pengen buat submenu Nay, biar templatenya kayak yang beli-beli itu

    ReplyDelete
    Replies
    1. Ciyee...
      Aku udah beberapa kali pakai. Harus coding sih, tapi jadi kurang simpel

      Delete
  14. Keren tutorialnya,trims sudah berbagi ^_^

    ReplyDelete
  15. jadi ini kayak label tapi dibuat di laman ya, mba?
    aku untuk laman blog isinya paling about me, contact, dll. kalo navigasi masuk ke label

    ReplyDelete
    Replies
    1. Labelnya dipindah ke page laman mba..biar kalau di tampilan mobile lebih enak

      Delete
  16. Aku dah praktek dong nay
    Eh aku baru nyadar blogmu ini inayah n nya 3 ya, pantes waktu iyu ngetik nn nya dua malah kegiring ke e commers muslim ^_^

    ReplyDelete
  17. artikelnya bermanfaat bangettt #langsungpraktek

    makasih yaa mba Innayahhh..

    ReplyDelete
  18. aku dulu pernah mempraktekkan ini di blog lamaku. cuma ya gitu, sekarang kalau disuruh ngulanginya nggak inget kalau nggak sambil lihat contekan :D

    ReplyDelete
  19. aku juga pakenya cara itu, soalnya mumet kalo urusan sama coding :D

    ReplyDelete
  20. aku jadi inget jaman dulu pas belom ada fitur ini rulnay, beneran dan pusing pala anabelle tiap mau ganti layout kudu pake coding ala ala muluk

    ReplyDelete
  21. Terima kasih mba Innayah sudah menjawab pertanyaanku. Tapi ternyata tips ini nggak bisa untuk blogkku, karena memang harus diobrak-abrik htmlnya hehehe...

    Salam,

    ReplyDelete
    Replies
    1. Oalah..kenapa kak? Template belikah?

      Delete
  22. Wow.. Udah bisa begini ya skrg

    ReplyDelete

Terima kasih sudah berkunjung.
Komentar berisi LINK HIDUP akan DIHAPUS.

^^ @Innnayah

Auto Post Signature

Auto Post  Signature