Tentang Ilmu Komputer, Android, Panduan Blogging dan Tips di Internet.

Membuat Menu dan Submenu Navigasi pada Template Bawaan Blogspot

Kita sebagai admin pada sebuah Blog sangat perlu untuk memasang menu-menu dalam Blog tersebut. Menu-menu ini berfungsi untuk menuntun pengunjung dalam menjelajahi Blog kita. Bahkan tidak sedikit Blogger yang memerlukan sebuah Submenu karena banyaknya konten-konten pada Blog miliknya. Ia memasang menu yang berisi konten bersifat umum, dilanjutkan dengan memasang menu yang berisi konten bersifat khusus. Sudah pahamkah dengan penjelasan saya tentang Menu dan Submenu?

Membuat Menu dan Submenu Navigasi

Menu navigasi khsususnya dalam istilah Blog adalah sebuah Tools yang biasanya terdapat di bagian atas halaman untuk membantu mengarahkan pengunjung ke sebuah halaman yang mungkin mereka inginkan agar mereka mudah dalam menjelajahi Blog kita. Sedangkan Submenu atau banyak orang menyebutnya Menu Dropdown, adalah sebuah menu uraian dari suatu menu induk. Semoga anda mengerti dengan pengertian Menu dan Submenu dalam Blogspot menurut saya.

Untuk Blogger yang masih sangat pemula, dalam membuat menu dan submenu ini terkesan sulit. Terlebih pada Template Bawaan Blogspot yang tidak menampilkan Menu-menunya pada Blog. Hal ini sangat berbeda dengan Template hasil download (Bukan bawaan Blogspot). Para Master Web biasanya membuat Template-template ini lengkap dengan langsung menampilakn Menu bahkan submenunya. Jadi kita hanya perlu mengedit menu-menu pada tempalte hasil download / bukan bawaan blogspot tersebut.

Membuat Menu Navigasi

Sebenarnya sangat mudah untuk membuat menu navigasi ini, anda hanya perlu menampilkan elemen laman dan selanjutnya membuat laman-laman baru. Menu-menu ini bisa ditampilkan di sidebar juga, namun idealnya menu navigasi dipasang di bagian atas dekat header.
Berikut cara membuat Menu Navigasi.
  • Tentunya anda telah masuk pada akun Blogger anda.
  • Masuk pada bagian Laman.
  • Perhatikan, terdapat tulisan "tampilkan laman sebagai", lalu klik kotak dropdown untuk memilih opsi, ubah pilihan "jangan tampilkan" dan pilihlah "Tab Atas". Untuk mengakhiri, klik Simpan Setelan.

Membuat Menu Navigasi

Menu navigasi sudah dibuat, silakan lihat hasilnya. Namun hanya menu Beranda yang tampil. Sekarang apa lagi? Tugas anda selanjutnya adalah membuat menu-menu baru, berikut caranya:
  • Masih pada bagian Laman, anda klik kotak dropdown Laman Baru.
  • Terdapat dua pilihan yaitu Laman Kosong dan Alamat Web. Laman Kosong berfungsi untuk membuat sebuah halaman baru secara manual seperti sebuah tulisan atau juga bisa sebuah script. Sedangakan Alamat Web berfungsi untuk memberikan fungsi link pada tombol menu navigasi dimana ketika menu navigasi diklik maka akan menuju pada URL yang telah anda masukan.

Membuat Menu serta Submenu Navigasi

Telah jelaskan, Submenu itu adalah menu uraian dari menu induk. Nah untuk membuat submenu ini terlebih dahulu anda harus menampilkan elemen laman seperti yang telah dijelaskan dalam membuat Menu Navigasi.
Setelah elemen laman ditampilakan maka anda bisa memulai untuk membuat Menu serta Submenu Navigasi.
  • Masuk pada bagian Template dan klik Edit Template.
  • Gunakan tombol ctrl+F dan carilah kode ]]></b:skin>.
  • Letakan kode berikut tepat di atas kode ]]></b:skin>.

.tabs-inner .widget li ul {
  z-index: 100; position: absolute;
  left: -999em; height: auto; margin: 0; padding: 0;
  border: 1px solid #999999;
}

.tabs-inner .widget li ul, .tabs-inner .widget li ul a,
.tabs-inner .widget li ul li:first-child a {
  -moz-border-radius: 0px; -webkit-border-radius: 0px;
  -goog-ms-border-radius: 0px; border-radius: 0px;
}

.tabs-inner .widget li:hover ul, .tabs-inner .widget li.sfhover ul {
  left: auto;
}

.tabs-inner .widget li li a:hover, .tabs-inner .widget li li a:active {
  color: #ffffff; background: rgb(51, 102, 153);
}

.tabs-inner .widget li ul a {
  display: block; padding-left: 1.25em; padding-right: 1.25em;
  margin-left: 0px; margin-right: 0px; border: none;
  color: #000000; background: rgb(243, 244, 246);
}

.tabs-inner .widget li ul, .tabs-inner .widget li ul a {
  width: 250px;
}

Anda bisa mengubah ukuran (pada kode warna merah) dan warna (pada kode warna biru) border/garis pembatas dengan yang anda inginkan. Kode warna hijau adalah warna teks pada nama Submenu yang bisa anda ubah. Dan ukuran width adalah lebar submenu, sesuaikan dengan panjang nama pada Submenu.
  • Gunakan tombol ctrl+F dan carilah kode <li><a expr:href='data:link.href'><data:link.title/></a></li>. Kemudian perhatikan kode-kode yang berada beberapa baris di bawahnya, terdapat kode <b:/loop>. Letakan kode berikut tepat di bawah kode<b:/loop>

<li><a href='#'>Menu1</a>
  <ul>
    <li><a href='http://regibrader-free.blogspot.com/'>Sub Menu 1</a></li>
    <li><a href='http://regibrader-free.blogspot.com/'>Sub Menu 2</a></li>
    <li><a href='http://regibrader-free.blogspot.com/'>Sub Menu 3</a></li>
  </ul>
</li>

Ubah kode berwarna merah dengan URL tujuan yang anda inginkan, untuk Menu1 adalah menu induk. Jika anda tidak akan memberi fungsi link pada menu tersebut, biarkan saja URL nya '#'. Untuk tulisan berwarna biru anda ubah dengan nama menu dan submenu yang anda inginkan.

Jika anda ingin memasang Menu serta Submenu baru, maka yang perlu anda lakukan adalah menyalin/copy kode diatas dan menempelkanya/paste tepat di bawah kode tersebut. Jadi anda tinggal mengeditnya.
  • Jika telah selesai, maka akhiri dengan klik Simpan Template dan dengan demikian pembahasan kali ini pun telah selesai.

Artikel terkait : Membuat Menu dan Submenu Navigasi pada Template Bawaan Blogspot

Artikel Blog Regi Brader Lainnya :

55 komentar:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. info yang sangat bermanfaat bagi blogger pemula seperti saya, mampir ke blog saya juga ya gan
    http://augustreinaldo.blogspot.com/

    ReplyDelete
  3. Replies
    1. gan nyari expand template widget-nya dmna ya gan ?

      Delete
    2. Pada tampilan Edit HTML baru, tidak disertai dengan Expand Template Widget. HTML Template telah ditampilkan dengan lengkap. Maaf belum bisa update posting ini.

      Delete
    3. Gan saya pemula mau nanya, apa pos itu cma 1 halaman saja ngga bsa lebih , kalo mau nambah gmana caranya ?

      Delete
    4. pos itu cuma satu halaman, kita bisa menambah posting sob. Dengan cara pada dashboard blogger, masuk ke menu Pos, kemudian klik buat entri baru

      Delete
  4. terimakasih informasinya saya akan coba pasang

    ReplyDelete
  5. Thanks banget infonya gan bener bener bermanfaat..
    kalau ada kesempatan mampir jga ya ke blog saya http://gatraonepiece.blogspot.com..
    thakns^^

    ReplyDelete
  6. sob ane mau tanya ni, kalau mau membuat sub menu pada menu yg berbeda gimana caranya?... karena yg dicontohkan hanya membuat sub menu pada satu menu saja, terimakasih

    ReplyDelete
    Replies
    1. pada menu yang berbeda gimana sob?
      kalau mau buat menu dan sub menu lebih dari satu, buatlah script menu dan sub menu lebih dari satu. Script yang kedua, pada posting ini...

      Delete
  7. gan dimana (Expand Template Widget)nya?

    ReplyDelete
    Replies
    1. Sekarang udah tidak ada dan tidak perlu pakai "expand template widget" sob. Maaf yah posting ini tidak up to date...

      Delete
  8. trmksh atas artikel2 yang bermutu diblog agan, ini menambah pengetahuan saya tentang blog, tapi mau kritik nih.....blognya terlalu banyak space iklannya..

    ReplyDelete
  9. klo kita mau posting ni di sub menu gimna caranya ya kk ...

    ya misalkan kita pilih menu 1 tros sub menu 2 tros kan tmpil thu pos kita ..
    thu posnya gimn ya kk ...

    ReplyDelete
    Replies
    1. Ya sobat hnya tinggal mengganti nama dan memasukan url pada menu/submenu yang sobat inginkan. Untuk mendapatkan url, sobat buka halaman posting yang sobat inginkan, dan url halaman tersebut bisa sobat ambil di address bar browser sobat...

      Delete
    2. lanjutin pertanyaan agan the next, untuk halaman (pages) yg akan dipanggil harus ada url-nya ya? berarti harus yg sdh "publish" kan? kalau sudah "publish" berarti dia akan tampil juga di tab. nah nyiasatin agar halaman (pages) tersebut tidak tampil di tab namun tampil di sub tab gmn caranya?

      Delete
    3. Iya betul harus di publish dulu...
      Ya pada bagian Laman, tampilkan laman sebagai "jangan tampilkan"...

      Delete
  10. Mas salam kenal
    kalau pengen didalam sub menu lebih dari satu url atau postingan bagaimana

    ReplyDelete
    Replies
    1. Coba sobat copy kode a sampai a dan pastekan di sampingnya. Lalu perlebar ukuran submenu nya...

      Delete
  11. kunjung in balik nih gan masih newbie diddujahiil.blogspot.com

    ReplyDelete
  12. gan...
    minta pencerahannya gan...
    aku udah lakuin cara di atas. dan seharusnya kan muncul 3 sub menu. tapi di blog ku kok muncul cuma 1 sub menu ya???
    ini blog ku http://whieeand.blogspot.com/
    mohon pencerahannya ya.

    ReplyDelete
  13. Terima Kasih banyak, akhirnya apa yg dicari (bikin sub menu) berhasil juga

    ReplyDelete
  14. gan mohon pencerahan gimana cara posting pada submenu agar selalu tampil pada link2 berikutnya... sudah sayaikuti tahapn2nya cma blom bisa cara postingnya mohon di cek gan di http://blogassyfa.blogspot.com thanks b4 gan

    ReplyDelete
    Replies
    1. Saya tidak mengerti pertannyaanya, gimana sob?

      Delete
  15. Thanks, mas Regina. Cara ini lebih mudah & pas dgn yg saya mau. Tapi saya kesulitan saat saya membuat Submenu lebih dari satu, tinggi tab-nya nggak bisa diatur, jadinya Submenu yg kedua nggak terlihat.
    Bagaimana mengatur tinggi (height) Submenu-nya ya?

    ReplyDelete
    Replies
    1. Script yang saya berikan height-nya auto. Coba customize lagi...

      Delete
  16. Terima kasih untuk Tutorialnya sangat Bermanfaat...

    ReplyDelete
  17. tenkyu bro, izin copas css dan html menu nya (padahal dah copas duluan, hehehe...)
    infonya sangat bermanfaat, sebuah menu yang simple.
    ane pake di blog ane, mampir ya :)
    aganbewok.blogspot.com

    ReplyDelete
  18. gan kode dibawah ini kok ga ada gan di edit template??

    ]]>

    mohon pencerahanya gan

    ReplyDelete
  19. cara nambah menu-nya gimana gan? itu kan cuma satu, kalo mau buat lebih dari satu gimana ya? mohon pencerahannya gan :D

    ReplyDelete
    Replies
    1. Jika anda ingin memasang Menu serta Submenu baru, maka yang perlu anda lakukan adalah menyalin/copy kode diatas dan menempelkanya/paste tepat di bawah kode tersebut. Jadi anda tinggal mengeditnya.

      Delete
  20. Thank's Ya Gan....
    Sangat Bermanfaat Bagi Pemula

    ReplyDelete
  21. mampir gan ke blog ane
    sonygunaonezen.blogspot.com

    ReplyDelete
  22. Min, udah berhasil bikin submenu. Tp untuk bikin postingan (isi) si submenu nya gimana ya? kyknya menu blogger skrg dah beda deh. Di komp aku kok di menu laman ga ada menu "tampilkan laman sebagai" trus ga ada drop down menu tab atas dll. Gimana tuh solusinya min?

    ReplyDelete
    Replies
    1. coba buka halaman ini sob "http://b-tutorial.blogspot.com/2014/08/memasang-menu-navigasi-di-template-bawaan-blogspot.html"

      Delete
    2. gan kalo sub menu 1a bisa dibagi lagi gak .....
      kalo bisa gimana caranya gan ?

      thanks gan postignya keren, nd sangat membantu.

      Delete
  23. Thank gan infonya
    langsung tkp gan

    jangan lupa kunjungan baliknya gan

    http://www.agans.co.vu/

    ReplyDelete
  24. terimakasih infonya gan, sangat membantu
    http://obattradisionalacemaxs.net/obat-tradisional-diabetes/

    ReplyDelete
  25. mantap deh artikelnya sangat bermanfaat :)
    ijin share http://kedaijellygamatgoldg.com/
    http://kedaijellygamatgoldg.com/jelly-gamat-gold-g/

    ReplyDelete
  26. guys follow blog saya yah,, kabarberitanusantaraa.blogspot.com

    ReplyDelete
  27. mantep gan jangan lupa mampir disini www.webinfokom.ga

    ReplyDelete
  28. gan kalau pengen url submenunya ganti otomatis sesuai recent post berdasarkan label bisa gk, jadi gk manual kita masukin urlnya?

    ReplyDelete
  29. bagaimana caranya membuat menu dibagian sub menu gan,tkyu

    ReplyDelete
  30. Sorry gan, masih newby..
    salam kenal..
    di tunggu kunbalnya ya :-)

    ReplyDelete
  31. Sangat Bermanfaat ...
    Terima Kasih . . .

    ReplyDelete
  32. Nah ini materi yang lagi ane cari....
    Thanks info ya gan

    ReplyDelete
  33. gan saya punya software untuk membuat sub menu .namanya easy botton
    sesudah saya buat saya bingung cara menerapkannya ke bloger saya
    apakah agan bisa membantu saya...............

    ReplyDelete
    Replies
    1. Untuk saat ini saya belum bisa membantu mba, sedang sibuk kerja offline

      Delete
  34. tapi gan, kok menunya jadi lebih lebar drpd tulisannya? mohon pencerahannya gan

    ReplyDelete
    Replies
    1. Pada script ada kode "width" sobat bisa mengatur lebarnya di sana

      Delete
  35. Bro, gimana cara tambah anak sub menunya

    ReplyDelete
    Replies
    1. sobat hanya perlu menggandakan script di bawah kode b:loop yang saya bahas di artikel

      Delete

Copyright © 2013-2016 Blog Regi Brader - All Right Reserved