Tutorial Cara Edit Menu Navigation Bar Di Blogger

Edit Menu Navigation Bar

Bagaimana Cara Mengatur Menu Br Di Blogger?

Langkah-Langkah Menambahkan Link dan Mengganti Judul Di Menu Navigation Bar Blogger. Pada kesempatan kali ini blog mas tamvan akan berbagi tips dan trik mengatur menu bar pada blogger..

Sering banyak yang suka bertanya bagaimana cara menambahkan link artikel / link label ke dalam menu bar dengan judul yang sesuai dan bagaimana agar satu link dapat menampilkan banyak artikel di dalamnya....

Nah pada kesempatan kali ini, karena saya nganggur bingung mau ngapain lebih baik d coba aja berikan tutorial tentang cara pengaturan pada menu navigation bar ini, semoga saja dapat membantu..

Okeh tanpa banyak cingcong lagi mari kita bahas satu-satu, tahapan-tahapan mengatur menu barnya...

Sebagai contoh, saya ingin menambahkan link dan ingin mengganti judul di menu bar berikut ini..

Cara Edit Menu Navigation Bar, Memasukan Link dan Mengganti Nama Menu


Contoh Tampilan Menu Yang Ingin Di Edit
edit menu bar
Contoh Kode HTML Menu Yang Ingin Di Edit

<nav class='contoh'>
 <ul>
  <li><a href="/">Home</a></li>
  <li><a href="#">Tutorial</a></li>
  <li><a href="Url Kalian">Widget</a></li>
  <li><a href="https://contohlink.com">Template</a></li>
  <li><a href="https://mastamvan.blogspot.com/search/label/Tips Dan Trik">Tips & Trik</a></li>
</ul> 
</nav>

Tulisan yang saya beri warna merah adalah bagian untuk memasukan link tujuan kalian...
Bisa link apa aja, link post, label, sosial media dll..

Tulisan yang saya beri warna kuning itu untuk judul dari link tersebut / judul di menu barnya..
Bisa kalian rubah sesuka hati..

Jadi Kesimpulannya..
Dalam kode pembungkus ini href=''
Harus di isi dengan URL kalian

dan dalam kode pembungkus ini <a href="/">Tutorial</a> biasanya beda-beda dalam penulisan, ada juga yang seperti ini <a href="/"><span>Tutorial</span></a>
Kode itu berarti kalian bisa merubahnya dengan tulisan yang kalian mau..


Nah kalo kalian sudah mengerti, sekarang kita lanjut ke tahapan mengganti / menambah link pada menu navigation..

Jika belum mengerti tanyakan saja di kolom komentar...!!!

  • Silahkan login terlebih dahulu ke blogger.com
  • Setelah login kita mulai mencari salah satu nama dari menu navigation tadi yang kita ingin edit namanya / menambahkan link ke dalamnya...
  • Contoh saya ingin mengedit menu pada bagian Tutorial
  • Di Kotak edit html kalian cari nama menu yang ingin d edit, agar cepat dalam pencariannya gunakan CTRL + F
  • Sebelum menekan CTRL + F kalian harus klik dulu bagian kotak edit htmlnya { di kumpulan kodenya }
  • Contoh penulisan agar cepat / langsung ke tujuan karena kita sudah tau struktur dari kode htmlnya, silahkan kalian langsung cari seperti berikut >Tutorial
  • Kalo sesuai, nanti akan langsung menuju ke tag html menu navigationnya..
  • Tampilannya seperti berikut...
  • 
      <li><a href="#">Tutorial</a></li>
    
  • Kalo sudah ketemu kalian tinggal edit saja menunya, kalo ingin mengganti link. tag dalam href='#' tanda pagar {#} ganti dengan link tujuan kalian..
  • Nah sampai di sini apakah sudah mengerti?
  • Kalo belum, silahkan bertanya di kolom komentar saja ya :3 nanti saya tambahkan ke dalam artikel ini

Jika kalian ingin menambahkan satu link dan isinya lebih dari satu artikel terkait, kalian harus mengelompokan terlebih dahulu artikel - artikelnya menjadi satu label..

Setelah di gabungkan, kalian copy linknya dan masukan ke dalam menu navigation bar..

Okeh, cukup sampai di sini artikel yang mungkin kalian juga tidak akan paham, karena kata-katanya yang sulit untuk di pahami, dan susunan tutorial yang ngawur :V

Saya akhiri artikel tentang Tutorial Cara Edit Menu Navigation Bar Di Blogger ini dengan #bersambung :V

Karena mungkin akan ada tambahan pada tutorial ini yang belum saya pikirkan :V
27 komentar
  1. terima kasih gan, setelah membaca ini saya mulai paham, sebelumnya saya ingin mengedit menu di blog saya yaitu sharinghidayah.blgospot.co.id agar bisa di edit menunya, terima kasih banyak gan, salam kenal

    ReplyDelete
  2. thanks banget tutor ny gan , work 100% , mantep dh

    ReplyDelete
  3. mas, pakai template apa? bagus mas

    ReplyDelete
    Replies
    1. Template Kompi Males, Buatan Kompi Ajaib (y)

      Delete
  4. Replies
    1. Bagian mana yang belum paham gan, nanti saya tambahkan.

      Delete
  5. nice gan, makasih ya. silahkan kunjungi juga blog punyaku. www.tegamacity.blogspot.com . :-)

    ReplyDelete
  6. Makasih ya ilmunya. Nanti malam pengen langsung dicobain

    ReplyDelete
  7. kak bagaimana cara merata tengahkan menu bar? ._. makasiii sebelumnya kak

    ReplyDelete
    Replies
    1. Bisa mba, pake text-align:center, contohnya seperti ini ↓

      https://jsfiddle.net/edex3doa/embedded/result/

      Delete
  8. Ahirnya nemu juga artikel ini udah ngubek ngubek ini yang paling simpel dan jelas pemahamannya

    ReplyDelete
  9. Ahirnya nemu juga artikel ini udah ngubek ngubek ini yang paling simpel dan jelas pemahamannya terimakasih admin

    ReplyDelete
  10. untuk mengubah tinggi navigasi bar gimana min?
    tolong pencerahannya min. makasih

    ReplyDelete
    Replies
    1. bisa menggunakan height / padding
      .
      cari tag/class/id nya lalu tambahkan, contoh :
      .
      nav {
      height:15px
      }


      atau

      nav {
      padding:15px 0
      }

      .
      15px atur sesuai keinginan.

      Delete
  11. Gan Kalo Mau Ganti/Merubah Gaya Menu Gimana Sobb,

    ReplyDelete
  12. Terima kasih.
    Sangat bermanfaat buat saya

    ReplyDelete
  13. Cara menambah lebih dari 1 url gimana ya? Trims dan sukses terus

    ReplyDelete
  14. Weleh Kalau udah namannya coding aku nol banget mas makanya blogku seadanya saja template nya

    ReplyDelete
  15. gan kalau kita sudah membuat menu bar nya dan kita ingin postan nya ada di dalam menu barnya itu gimana ya
    mohon pencerahannya

    ReplyDelete
  16. bang kalau untuk daftar isi nya gimana ??

    ReplyDelete
  17. Terima kasih gan. Sangat bermanfaat bagi saya pemula

    ReplyDelete
  18. Terima kasih untuk Tutorialnya, Sangat bermanfata.
    berkunjung ke blog saya juga ya. https://www.psmnews.org/

    ReplyDelete
  19. mantap jiwaaa, jangan lupa kunjungi blog saya animeku036.blogspot.com

    ReplyDelete