sponsored ads

Cara Mudah Membuat Menu Navigasi Keren Tanpa Edit HTML

Posted By : Posted on - 1:48:00 AM with 121 comments

Cara Mudah Membuat Menu Navigasi Keren Tanpa Edit HTML - Menu naviagasi adalah menubar yang biasanya ditempatkan di bawah header blog yang berguna untuk mengarahkan pembaca maupun pengunjung blog menuju link yang mereka cari. Jika selama ini banyak para blogger yang kesulitan untuk cara membuatnya kali ini saya akan share tentang bagaimana cara membuat menu navigasi keren tanpa editing HTML. Dengan cara ini para blogger pemula yang belum mengetahui cara editing HTML yang memang membutuhkan ketelitian dapat membuat menu navigasi mereka dengan lebih menarik dan lebih mudah.

Menubar navigasi atau menu bar biasanya terdiri dari beberapa tab. "Di dalam" masing-masing tab tersebut berisi link yang menuju halaman posting, halaman statis, halaman label, ke website lain dll. Sebenarnya membuat tab menu tidak begitu sulit. Pada dasarnya intinya sama yaitu membuat menu yang berisi beberapa link dengan beberapa styling ditambahkan untuk daya tarik visual. Sementara link yang disusun secara vertikal, tab navigasi biasanya disusun secara horizontal.

Dalam tutorial ini kita akan menginstal bar tepat di bawah header, tempat khas atau umum untuk navigasi bar. Bar akan ditambahkan sebagai gadget melalui halaman Elemen Halaman. Keuntungan menggunakan gadget adalah bahwa jika Anda ingin menghapusnya nanti, hal itu dapat dilakukan dengan mudah tanpa mengedit HTML. Namun, untuk melakukan itu, template harus memiliki tautan Gadget atau widget wadah yang saya akan menyebutnya, di lokasi tertentu.

Baca Juga widget artikel terkait lainnya:
- Membuat navigasi no urut halaman
- Membuat search box keren
- Membuat Widget Paypal Donation 
- Membuat widget Pagerank
- Membuat bermacam-macam popular post
- Membuat widget Alexa rank terbaru

Membuat Menu Navigasi Untuk Blogger
Cara Mudah Membuat Menu Navigasi Keren Tanpa Edit HTML

1 Masuk ke akun Dashboard Blogger Anda >> Layout >> dan klik pada tambahkan gadget (tempatkan di bawah header seperti Screen Shot dibawah ini.)
2. Klik Tambah Gadget.
3. Gulir ke bawah Tambahkan Gadget dan pilih HTML / JavaScript.
4. Biarkan kotak judul kosong.
5. Copy dan paste kode HTML di bawah ini ke dalam kotak konten.

<style>

#tab_menu {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqAPBUGhD3qUSIbY3AwakLOJC1A1RGupT7OhixZn7GhQlVQ7MJIXoijFGrdIpeaQpyKs4RtanQkpuGMoWIQ9vutqHLsCIj0KrWa_m4Ev_OrBr72n2wxOgS585vUyDQvHQ18IBtLip-jkWz/s1600/menu_bg.png) no-repeat;
    height:50px;
    width:960px;
    line-height:50px;
    list-style:none;
    margin-top:10px;
    font-size:14px;
    font-family:Verdana, Geneva, sans-serif;
    font-weight:bold;
    overflow:hidden;
}

#tab_menu li {
    float:left;
    border-right:1px solid #FFA722;
    border-left:1px solid #CC5200;
}

#tab_menu li:first-child {
    border-left:none;
}

#tab_menu li:last-child {
    border-right:none;
}

#tab_menu li a{
    text-decoration:none;
    float:left;
    display:block;
    height:50px;
    padding:0 20px;
    color:#FFF;
}

#tab_menu li a.current, #tab_menu li a:hover, #tab_menu li a.tool:hover {
    color:#622900;
    text-shadow:1px 1px 0px #E8964B;
}

#tab_menu li a.tool{
    color:#000;
    text-shadow:1px 1px 0px #E8964B;
}

</style>


<ul id='tab_menu'>
<li ><a href='#'>Home</a></li>
<li ><a href='#'>PRODUCT</a></li>
<li ><a href='#'>FAQS</a></li>
<li ><a href='#'>CONTACT US</a></li>
<li ><a href='#'>ABOUT US</a></li>
</ul>

6. Ganti "#" dengan URL halaman tujuan Anda.
7. Anda bisa mendapatkan URL dari halaman dengan menyalin isi alamat / URL bar browser Anda sementara Anda berada di halaman tersebut.
8. Untuk menampilkan semua posting di bawah label (kategori), Anda perlu link ke halaman label.
9. Untuk mengubah lebar lebar menu edit: 960px.

Nah anda bisa menggantinya sesuka hati anda, atau anda bisa mengganti background warna pada menu navigasi dengan mengganti link url background diatas yang saya tandai dengan warna merah dengan link url background dibawah ini, atau anda lebih suka untuk menggunakan warna lain, silahkan anda lihat kode warna html yang telah saya sediakan.

1.menu_bg_1

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOKJUx_orEsgUmwfp6CE0a5_TCNxra9626Zlx1jMntOZFEjtdBbHh7PmfVL7wRK1VH5ng_5zQ56hMLSRjsxRYby_J0zipM9fisDuJpHUP608fKog8OGw5ICeiluM-31NqZDyxAyD-w8RPs/s1600/menu_bg_1.png

2 menu_bg_2

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8vUSVU7Mg4_SxAITWz6j_EXKnu4g9iaoe9HoiJXn5_FiY9Vch2bBLgjbWQhve1vNzEeXvCh4bXNdf-WzbGujWbaLmeYraoFBgNPYvM4ZIaYkYtdHhMooME9pgyYeTyb9tfsqcqFYdoMeY/s1600/menu_bg_2.png

3 menu_bg_3

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpVxWlxudW5_WneGFvtIFNU_PUl79jyuiQ2CsJM3HRzglVzZyJ2S9dHAvSxzOHPWATohEK6t_ZEkdN5H9CTdczDeAAtZYafdac52vXa3DoOVnZ8WRzzk4S2QBrTYeZUty74DXEXrrskn3h/s1600/menu_bg_3.png

4. menu_bg_4

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP2NI3-E3SRlAXe9k3jyNaZWRoGy29aK4Rsse0smChn4W1NknquDSy3U8lXp-gZnnFPU7h-N6lFOc8Zd1sW8zOlrdBkZj6-y-909Xm6PpaWXg8LDmRPTJt_jHwmG5SCc_75uOWJ3l94zie/s1600/menu_bg_4.png

5. menu_bg_5

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmDZpttrJn-kaAUt_nuB-cAQaz_HCpoAmhLM8zM6cRLdOfJH733L0igKj4GjRmDvISDah4OEJA6VQevOlSLA_sLSkVKvSZhnmkxVwqth5T2Us90LIzr6Eyt1TbfFhBGkRChjFdmk8pTY8z/s1600/menu_bg_5.png

6 menu_bg_6

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiANduzu21AN7hhz6i9NGGAkgyGw59wQJ-QhI4wxNV-3h2uFqJAqqI_QNFiPgie2_4dJU8YWPUxmP2nHica88e9eq_heep9OWgbXBX0079MgUDPx3GovENDSyELdeKMDzEddvKNqNUkhNzt/s1600/menu_bg_6.png

7 menu_bg_7

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipbWC8tq6TTHAqm-ExQJ6tqgtmMjfYJLzVO1KZNzPpMLPsn8ApaP6OfUG_oxX9_SA8RAj_HmE7vHUeR8r_kyhmvn3aUGTgWADRAVve4gIwZ3DDe3SVlK8d0zwDUBsD3GOT8r-b7DUMexvO/s1600/menu_bg_7.png

8 menu_bg_8

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbDFHx1QEIsHObVrLRwGIPrZOjO8GyMuBIQyQQ2Uv06VKkAEAdzsjpoRk8Kq4f30MhmtXQSexZJZ9iHUO3q7sKciB9HIDcj7LoWEQkFiw1riqJd-kKp4U7pO_xSLdHGwr4ijo30Hf8pUQj/s1600/menu_bg_8.png

9. menu_bg_9

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT9pMzkHEtmYqsPv07l7tboTVQdkq5Je1OuyDPIF7PLaVFqrS0313_N3gSX-QKJp-z0SHUt45Go2oUU5MrMkhAvQAY5SAUtQa4eFi86XeP76WyQRFb-t48KAPKElDbOvzMMF00jU9bw89s/s1600/menu_bg_9.png

10 menu_bg_10

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGMyAxy33d8Mcfgj8oXjr63Ibt5JhWlNTq_phLKSIkeN_7ttzBeYv4OTJG6gBfMAmZgDNWNBqo8bpdD3FidK8wgc7OlyjroLDSOe49aVTo_OkP3ioS9XPg42__Ncq1hQRK0Zv1fyN7Vo8R/s1600/menu_bg_10.png

121 comments:

  1. Keren om, ane udah coba, thanks sdh share ilmunya.

    ReplyDelete
  2. TERIMAKASIH, mohon ijin memakainya ya ... sudah lama saya mencari script navigasi seperti ini yang tanpa edit template
    alanhakim{at}gmail[dot]com

    ReplyDelete
    Replies
    1. Ya mas hakim, silahkan dipakai scriptnya semoga berguna dan tetep semangat blogging...

      Delete
  3. Kalo menambah sub menu bagaimana .... Misalnya. menu yang tampil "PROFIL" Dalam manu PROFIL ada lebih dari satu profil. bagaimn cara membuatnya

    ReplyDelete
    Replies
    1. Mudah saja bro...seumpama yang ingin ditambahkan tabmenu adalah "PRODUCT" maka tambahkan menu seperti dibawah ini:

      <ul id='tab_menu'>
      <li ><a href='#'>Home</a></li>
      <li ><a href='#'>PRODUCT</a>
      <ul>
      <li><a href="#">Basic</a></li>
      <li><a href="#">Begineer</a></li>
      <li><a href="#">Intermediate</a></li>
      <li><a href="#">Advanced</a></li>
      <li><a href="#">Profesional</a></li>
      </ul>
      </li>
      <li ><a href='#'>FAQS</a></li>
      <li ><a href='#'>CONTACT US</a></li>
      <li ><a href='#'>ABOUT US</a></li>
      </ul>

      Tambahkan seperti kode dihtml diatas, tinggal ganti judul submenu yang anda gunakan,...semoga bermanfaat....

      Delete
    2. kalo misal mau menambah lagi tab menu pada "Begineer" tambah tab menunya kesamping
      caranya bagaimana?
      Trims...

      Delete
    3. Gampang gan, seumpama dalam beginner mau ditambahin contoh saja "submenu1" dan submenu2 jadinya kodenya begini:
      <ul id='tab_menu'>
      <li ><a href='#'>Home</a></li>
      <li ><a href='#'>PRODUCT</a>
      <ul>
      <li><a href="#">Basic</a></li>
      <li><a href="#">Begineer</a>
      <ul>
      <li><a href="#">Sub menu1</a></li>
      <li><a href="#">submenu2</a></li>
      <li><a href="#">Submenu3</a></li>
      </ul>
      </li>
      <li><a href="#">Intermediate</a></li>
      <li><a href="#">Advanced</a></li>
      <li><a href="#">Profesional</a></li>
      </ul>
      </li>
      <li ><a href='#'>FAQS</a></li>
      <li ><a href='#'>CONTACT US</a></li>
      <li ><a href='#'>ABOUT US</a></li>
      </ul>
      Makasih sudah berkunjung..

      Delete
    4. Kok Q Coba kopi pasate syntax di atas ga bisa Gan, apa harus ada syntax yang di edit di bagian atas syntax menu..?

      Delete
    5. itu tanda pagarnya maksudnya apaan gan? kalau kita buat artikel, di blogspot katakan, itu kan gk ada kategorinya di blogspot. stelannya ya begitu. biar kalau kita posting truss otomatis masuk di sub menu itu gimana caranya?

      Delete
    6. bos saya coba yang di tambah tab menu ko munculnya disamping yah, ga ke bawah

      Delete
  4. Gan, gimana caranya membuat navigasi melayang (floating)?? :)

    ReplyDelete
    Replies
    1. Mudah saja gan ikuti langkah seperti contoh dibawah ini:
      1. Tambahkan di widget HTML di tata letak (ganti link sesuai keinginan sobat|)

      <ul class="nav cf">
      <li><a href="">Home</a></li>
      <li><a href="">CSS</a></li>
      <li><a href="">PHP</a></li>
      <li><a href="">SEO</a></li>
      <li><a href="">jQuery</a></li>
      <li><a href="">Wordpress</a></li>
      <li><a href="">Services</a></li>
      </ul>

      Lalu buka edit template >> Edit HTML:

      Diatas kode ]]></body tambahkan kode seperti dibawah ini:

      .f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%; padding:0 20px;} /* ini yang membuat menu menjadi melayang (fixed) */

      .nav {
      background: rgba(26, 37, 82, 0.24);
      margin:0 0 20px 0;
      }
      .nav li {
      list-style-type:none;
      float:left;
      display:inline-block;
      padding:10px;
      }

      Nah jika sudah sekarang cari kode </head> letakkan kode seperti dibawah ini tepat diatas kode tersebut:

      <!-- jquery library -->
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script>
      jQuery("document").ready(function($){

      var nav = $('.nav');

      $(window).scroll(function () {
      if ($(this).scrollTop() > 136) {
      nav.addClass("f-nav");
      } else {
      nav.removeClass("f-nav");
      }
      });
      });
      </script>



      Klik pratinjau/ simpan/// Ganti segala kode seperti keinginan sobat.......
      Nah selesai jika ada kesulitan silahkan berkomentar lagi atau menghubungi email saya di page contact us, pertanyaan sobat akan saya jawab segera...terima kasih sudah berkunjung.....

      Delete
  5. Mantaaap dah sob artikelnya, kereeeen dan sangat membantu :)
    Ijin share http://grosiracemaxstasik.com/obat-alami-asam-urat/
    http://grosiracemaxstasik.com/
    http://grosiracemaxstasik.com/ace-maxs/

    ReplyDelete
  6. makasih artikelnya yaa gan...manfaat sekeleus.....
    hehehehe
    follow blog pemula aku yaa....jelajahsegalanya.blogspot.com

    ReplyDelete
  7. Saya coba di blog yang akan saya buat Gan. Baru membuat blog, namun tidak mengerti dengan HTMl...
    Hasilnya http://astawa-belajar.blogspot.com/

    ReplyDelete
  8. ini dia yang di cari-cari, terimakasih atas informasinya :)

    ReplyDelete
  9. Keren sob..
    Dan jawabannya pun memuaskan untung agan yg di tanya coba ane.... pasti akan seperti ini jawabnya "coba tanya mbah" hihih.. ijin copas and share gan.

    ReplyDelete
  10. saya punya masalah gan,template sy sdh ada menu di atas header dan menu sosial media,tp knp g bs muncul,yg ke 2,bagaimana cara edit lebar menunavigasi,krn punya sy klo di edit menjadi nama menu sy,jdi nambah lebarnya,dan menyisakan space,mohon jwabannya mas,makasih

    ReplyDelete
    Replies
    1. Mas dewa maaf baru bisa bales, gak bisa muncul pasti template download an ya mas...jika iya memang gitu soalnya biasanya template yang didapat dari download biasanya support eksternalnya gak ikut kedownload jadi ada CSS nya tapi javascript atau kode HTML widget gak ikut kedownload, solusinya minta kode HTML widget tersebut kepada developer templatenya.....

      untuk pengaturan letak widget biar pas edit CSSnya mas, cari width (panjang), height (lebar), padding(jarak tepi) dan margin (jarak dengan widget lain)...jika masih bingung silahkan hubungi saya melalui email pada contact us di widget diatas header...

      Delete
  11. Infonya sangat membantu sekali sob, Izin nyimak saja ya
    http://goo.gl/q4aK5g

    ReplyDelete
  12. Terimakasih banyak mas, sangat membantu sekali artikelnya..

    ReplyDelete
  13. Mas kalo mau memposting agar masuk dimenu masing masing gmna ya.....
    udah banyak tutorial yg kupraktekin tpi ga bisa bisa nih ?
    misal menu aku = sains, teknologi .nah biar pengunjung klik teknologi yang muncul artikel teknologi gmn ya mas....
    mohon bantuanya dong.....

    ReplyDelete
    Replies
    1. Mas Amazing Video hehehhehe....Mas maaf kurang jelas penjelasannya, kalau yang dimaksud bagaimana cara mengelompokkan artikel yang berhubungan (seumpama sains) dan jika di klik menu sains maka akan keluar semua postingan berlabel sains, jika maksud dari pertanyaan mas begitu maka caranya sebagai berikut:
      br/>
      1. Beri label semua postingan artikel (jika berkategori sains ya beri label sains, jika artikel berisi tema teknologi ya di kasih label tekhnologi)

      2. Nah tinggal kopi link label lalu masukkan di link menu... sebagai contoh saja <a href="http://namabloganda.blogspot.com/search/label/Teknologi">Teknologi</a> ....nah jika di menu teknologi diklik maka semua akan keluar posting artikel yang berkategori teknologi...


      Jika Mas masih merasa kesulitan silahkan hubungi saya di form contact us, dengan senang hati saya akan menjawab pertanyaanya, terima kasih sudah berkunjung...

      Delete
    2. maaf mas saya bener2 pemula nih pertanyaan saya hampir sama dengan Mas Amazing Video hehe, tapi saya masih bingung mas, cara liat link label nya di mana mas?

      Delete
  14. keren bro
    mungkin saya akan terapkan di blog saya

    nice artikel

    ReplyDelete
  15. kaa sorry mau nanya cara ngerapihinnya gimana ko brantakan wearekjsmansaba.blogspot.com

    ReplyDelete
  16. Mas Agan Jurnalis Mansaba alamat link blognya tidak bisa diakses jadi gak bisa deh ngeceknya hehehehehe.. coba dicek lagi bener gak alamt link nya ...Makasih sudah berkunjung....

    ReplyDelete
  17. mau tanya gan, kalau misal di klik menu bar baru keluar sub menu ke bawah bagaimana ya caranya,
    kebanyakan kan kalau di drop menu otomatis keluar sub menu,
    mohon pencerahannya salam super

    ReplyDelete
    Replies
    1. Mas Rezky Mudah saja agan....buat menu utamanya tanpa tujuan atau spesifikasi link hidup, jadi kita menggantinya dengan tag #....dengan kata lain buat link submenunya hidup tapi menu utamanya mati diganti tag # jadi penulisannya sebagai contoh


      <ul>
      <li>
      <a href="Nama menu utama mati (#) >
      <ul>
      <li><a href="link anda">Basic</a></li>
      <li><a href="link anda">Begineer</a></li>
      <li><a href="link anda">Intermediate</a></li>
      <li><a href="link anda">Advanced</a></li>
      <li><a href="link anda">Profesional</a></li>
      </ul>
      </li>
      </ul>


      (walapun sub menunya tetap tampil tanpa diklik) tapi akan terus tampil jika menu di klik....

      Delete
  18. gan, saya mau tanya ni. setelah ikutin semua intruksi yang agan buat, sub menunya malah tampil di samping menu utamanya. gimana caranya gan buat sub menunya jdi di bawah/arahin cursor ke menunya, baru keluar sub menunya? mohon bantuan gan, masih newbie

    ReplyDelete
  19. Mas Joni Mudah aja mas.....sebagai contoh saja saya membuat submenu pada "Product" maka agar hasil seperti yang diinginkan seperti keinginan Mas Joni maka membuatnya sama seperti tutorial diatas cuma ada sedikit penambahan saja...saya potong pada bagian intinya saja biar tidak kepanjangnan.....


    .........(kode sebelumnya)

    </style>
    <ul id='tab_menu'>
    <li ><a href='#'>Home</a></li>
    <li ><a href='#'>PRODUCT</a>
    <ul>
    <li><a href="#">Basic</a></li>
    <li><a href="#">Begineer</a></li>
    <li><a href="#">Intermediate</a></li>
    <li><a href="#">Advanced</a></li>
    <li><a href="#">Profesional</a></li>
    </ul>
    </li>
    <li ><a href='#'>FAQS</a></li>
    <li ><a href='#'>CONTACT US</a></li>
    <li ><a href='#'>ABOUT US</a></li>
    </ul>

    ReplyDelete
  20. Selamat pagi Mas. Ini aku lagi bingung. Bisa tolong dibuatjan contohnya untuk item no. 8 yang Mas instruksikan.
    "8. Untuk menampilkan semua posting di bawah label (kategori), Anda perlu link ke halaman label"
    Maaf, saya newbi dan terima kasih atas bantuannya.

    ReplyDelete
  21. Mas Atjeng mkasudnya semua posting harus dikasih label atau kategori sesuai dengan isi artikelnya mas, nah jika sudah gitu kita tinggal memasukkan link sesuai label atau kategori yang diinginkan sehingga saat diklik menu sebagai contoh saja Blogging maka semua artikel yang berlabel atau berkategori blogging akan muncul semua.....Untuk label atau kategori umumnya link akan seperti ini sebagai contoh saja: http://namabloganda.blogspot.com/search/label/namalabelataukategori anda....

    ReplyDelete
  22. izin copast ya gan, buat kenang kenangan :D

    ReplyDelete
  23. GAN untuk bagi rata kotak gmn...blog saya gk rata jdnya....

    ReplyDelete
  24. Mas Odzzal maksudnya rata gimana mas, coba lihat link blognya....

    ReplyDelete
    Replies
    1. kolomnya gak panjang malahan ada kolosong jdnya ..trus baut ling navigasinya gmn...odzzal65.com

      Delete
  25. Mas odzzal Untuk membuat link navigasi dasar seperti kontak, hubungi kami, sitemap, produk dan halaman dasar lain silahkan buat halaman statisnya terlebih dahulu dengan artikel terkait lalu ambil linknya dan masukkan di link yang saya kasih tanda "#" .....Sedang untuk halaman umum seperti label, tinggal masukkan link label artikel dan masukkan di link yang saya kasih "#"...


    Buat link navigasinya dengan cara membuat halaman baik halaman statis maupun halaman umum (artikel), dan jika sudah jadi coppy link dan masukkan di pengaturan script tadi yang saya kasih tanda "#"

    ReplyDelete
  26. nk nya gmn untk about us ,contact,fags,facebook...mohon infonya

    ReplyDelete
    Replies
    1. Mas odzall umumnya untuk halaman seperti about us, contact, facebook menggunakan halaman statis tanpa kotak komentar, mas bisa mebuatnya di dashboard blogger....contact us berisi halaman artikel tentang info kontak anda seperti no telpon, BBm, email pokoknya intinya bagaimana menghubungi mas sebagai admin blog....Halaman about us halaman yang berisi apa saja tentang anda dan isi blog anda, faqs merupakan halaman syarat dan ketentuan untuk menggunakan blog anda sebagai media bagi pengguna atau pembaca dst....jika masih kesulitan silahkan hubungi saya lewat email di halaman contact us atau langsung menulisnya di form kontak di widget sidebar kanan paling bawah, terima kasih...

      Delete
  27. OK MAS .artikelnya sangat membantu..saya masih kesulitan untuk mengaktfkan halaman facebook navigasi,dan apakah semua navigasi harus kita publikasikan karena saya menggunakan laman..dasbord ..

    ReplyDelete
  28. Tidak semua halaman perlu dipublikasikan, intinya gunakan saja halaman pendukung yang penting untuk mempermudah pengguna atau pembaca menavigasi (menggunakan) blog anda seperti contact us, about, sitemap, syarat dan ketentuan ....halaman facebook sebenarnya hanya digunakan untuk pembaca mengetahui halaman yang anda publikasikan di facebook maupun sebaliknya....

    ReplyDelete
  29. ok gan untuk membuat kolomnya sama gmn, soalnya kolom bayak berlebih gan

    ReplyDelete
  30. Bermanfaat banget mas, ni juga lagi saya coba di blog saya (maklum blogger baru).
    Tapi ada yang masih bikin bingung, kok sub menunya bukan di bawah menu utama tapi disampingnya. gimana mas biar bisa di bawahnya menu utama dan muncul saat menu utama diklik atau "ditunjuk" kursor?

    ReplyDelete
  31. bro cara isi linknya gmna..
    dari entri kah? mohon petunjuknya

    ReplyDelete
    Replies
    1. Linknya yang dipasang merupakan link label atau kategori Mas...

      Delete
  32. Mas Ken dhou Maaf gimana ya? saya kurang sedikit jelas penjelasannya, kalau saya gak salah tangkap mungkin submenunya bisa tampil disamping bukan di bawah menu utama karena sub menu tanpa tag pembuka dan penutup seperti < ul > dan < /ul > (tanpa spasi)

    ReplyDelete
  33. Saya pakai di blog saya bos, meskipun belum bisa-bisa untuk bikin sub menu.
    Makasih banyak untuk ilmunya, cek blog saya bos. Masih butuh banyak saran dan belajar, maklum newbie...

    ReplyDelete
  34. yang saya pasang adalah hasil copas dari petunjuk admin
    "jawaban untuk agan joni"
    langsung saya terapkan, dan hasilnya sub menu sejajar seperti menu biasa
    maaf kalau pertanyaanya agak mbingungin, masih nubie

    ReplyDelete
  35. Gan, minta bantuannya dong. Pas mau buat Popular Post Dengan Nomor seperti yang diarahkan, setelah ngedit HTML-nya dan mengeklik "Simpan", kok yang nongol di Menu malah kode URL-nya. Kenapa bisa gitu ya, Gan?. Bingung aku. Hehehe

    ReplyDelete
  36. Mas muksin Maaf mas coba cek lagi, biasanya kalau widget tidak jadi (yang nongol kode Html nya) biasanya penyebabnya sebagai berikut:
    1. Penempatan yang salah (bukan pada kolom CSS)
    2. Kode yang diterapkan kurang lengkap
    3. kode double (ganda)
    4. Kesalahan penulisan
    Nah coba dicek lagi kalau belum berhasil juga silahkan komentar kembali atau kirim ke email saya, saya akan membantu sesuai yang saya tahu, terima kasih telah berkunjung ke blog ini.

    ReplyDelete
    Replies
    1. 1. mas saya mau tanya. saya sudah mengikuti tuturial dasarnya. blog saya menggunakan bahasa indonesia. rencana akan saya seriuskan untuk adsense. tapi setelah saya klik tataletak. mengapa kolom headernya tidak ada ya mas. ada tetapi tidak ada tulisan tambahkan gadget. yang ada hanya footer. saya coba cara mas di kolom footer tapi muncul menu navigasi seperti home, prpduct, contact usnya dibawah posisinya. mohon penjelasan.

      2. tujuan saya membuat blog selain untuk menjual product, saya juga ingin agar blog saya bisa terdaftar di adsense. apakah hal ini masih bisa mas. karena dalam blog yg untuk menjual sebuah product kan rata2 banyak gambar. apakah banyak gambar merupakan harga mati sehingga tidak bisa diterima oleh adsense. mohon saran mas. maklum saya newbie.

      Delete
  37. Terima kasih artikelnya sangat membantu. Blog saya onlinenay.blogspot.com baru dibuat.

    Namun saya masih belum faham mengenai pengisian tiap-tiap menunya. Saya mencoba membuat artikel berjudul Jual Mobil Second, lalu saya isi form label dengan Artikel. Saya menulis Tentang Kami, lalu label saya isi Tentang Kami.

    Ketika saya klik Lihat Blog, tulisan-tulisan tersebut masih belum mengelompok sesuai nama menunya. Ketika di klik menu-menu nya, tidak aktif.

    Mohon pencerahannya gan..Terima kasih telah berbagi.


    ReplyDelete
  38. Mas Syamsul Mas harus mengelompokkan jenis artikel sesuai kategori atau label, setelah itu copy link label tersebut biasanya berbentuk sembagai contoh berikut ini http://sharetipsdancara.blogspot.co.id/search/label/Blogging .....Nah masukkan link ini dalam menu navigasi yang telah agan buat biasanya akan berbentuk sebagai contoh berikut ini Blogging Maka ketika diketik menu "Blogging" maka akan keluar semua artikel berkategori Blogging, semoga membantu..jika masih ada pertanyaan atau kesulitan silahkan hubungi saya di email pada form contact us yang telah disediakan, terima kasih

    ReplyDelete
  39. makasih gan, tutorialnya lengkap..udah ane pasang di blog ane..jadi lebih bagus

    ReplyDelete
  40. Terimakasih Tutur_nya Gan....,
    Maaf nich..., Sy pingin ikut reques buat webku www.syaffira.com
    Tolong Ajarin Caranya Bikin Shopping Cart yang bisa nampilin dan Menghitung Item Pilihan costumer ( ada add to Cart ) kaya add to cart paypal, tapi sy pingin yg gak ke paypal Gan....
    saya dah Coba banyak Tutor tapi belum berhasil juga gan...,Terimakasih

    ReplyDelete
  41. Saya juga gi mengembangkan template untuk web store yang saya buat sendiri, namun untuk widget2nya masih kurang sempurna, agan bisa melihatnya sendiri di www.griyashafana.com .... Jika maksud agan simple cart seperti itu saya bisa bantu untuk scriptnya ...

    ReplyDelete
  42. Masih bingung cari menu navigasi sibuk sendiri haaha thanks tipsnya bookmark dulu deh buat di http://kokloo.blogspot.co.id

    ReplyDelete
  43. terima kasih min ilmunya, sangat bermanfaat,....
    oh iya nengahin tulisan menu gimana ya, rada ke atas dia,..

    hehehe maklum newbie

    ReplyDelete
  44. Gan kenapa pas udah disave, saya lihat blog menunya gak ada

    ReplyDelete
  45. mantaaappp ... thanks bang ilmunya

    ReplyDelete
  46. mantapp....bgus bgt....thx u gan infonya

    ReplyDelete
  47. gan bagaimana cara buat tutorial blog....melalui android

    bisa tdk kalw tdk bisa sy bakal berhenti jadi blogger.

    makasi dan tolong di balas

    ReplyDelete
    Replies
    1. Maaf gan balesnya telat, bisa saja gan sekarang aplikasi blogger bisa digunakan pada android....

      Delete
  48. mas saya mau tanya, jika saya ingin memperpendek dan memperpanjang tampilan sub menu di bagian sebelah man ya mas, tolong di bantu, terimakasih.
    http://membaca-menambah-ilmu.blogspot.co.id/

    ReplyDelete
    Replies
    1. Silahkan masukkan kode setelah kode ini : #tab_menu li {.....} untuk kode panjang dengan kode width:..px sesuai keinginan agan....

      Delete
  49. mampir di http://wisatakampungan.blogspot.co.id/

    ReplyDelete
  50. Mas, thank's ya kode menu navigasinya, tapi kok tampilannya diPC sama di hp android atau tablet dan iphone gak sama, misal di pc yg aq tampilkan menunya ada 7 tapi di pc tampilannya bagus gak masalah tapi aq coba liat di tablet sama iphone cuma 5 menu yg dua gak muncul, saya pake opera mini atau mozila tetep sama gak muncul sdh sy set tabletnya ke desktop juga sama gak muncul, tolong dibantu barangkali bs dibetulin lg, makasih

    ReplyDelete
    Replies
    1. ukuran kepanjangan widgetnya gan, untuk PC bisa mneyesuaikan untuk browser lain secara otomatis akan terpotong... Untuk mengatasinya ukurannya diperbaiki / disesuaikan mulai dari width, margin dan padding...

      Delete
    2. udah berkali kali aq ganti mas, lebar dan paddingnya, kalau coba lebarnya tak kurangi tetep hasilnya di hp berkurang lagi satu menunya, tapi coba nt tak utek2e lgi. makasih mas infonya

      Delete
  51. gan bagaiaman kalo kita mau nambahin news atau artikel ke dalam menu yang sudah kita buat
    contohnya saya ingin menambahkan berita olaharaga ke dalam menu sport itu bagaimana gan?
    mohon bantuannya
    makasih

    ReplyDelete
    Replies
    1. Sebelumnya kelompokkan terlebih dahulu postingan menjadi label sesuai temanya, sebagai contoh jika artikel tentang olahraga ya kelompokkan postingan yang terkait dengan label olahraga... Ambil linknya lalu masukkan ke menu yang saya tandai # ..jadi seperti berikut:

      <li><a href="link label">Olahraga</a></li>
      <li><a href="link anda">Begineer</a></li>
      <li><a href="link anda">Intermediate</a></li>
      <li><a href="link anda">Advanced</a></li>
      <li><a href="link anda">Profesional</a></li>

      Delete
    2. tetep ga bisa min. masih bingung min euy... hadeuh

      Delete
  52. nice artikelnya bang, kunjungi balik ya http://tulisan-kaktegar.blogspot.co.id/2014/06/cara-membuat-menu-animasi-keren-di.html

    ReplyDelete
  53. bang gimana caranya menyesuaikan panjang menu sesuai dengan yang di inginkan

    ReplyDelete
    Replies
    1. #tab_menu {
      background:url(http://3.bp.blogspot.com/-OycpSljNY-E/UbidzWvOk4I/AAAAAAAACYs/lGxPWmjfzlA/s1600/menu_bg.png) no-repeat;
      height:50px;
      width:960px;
      line-height:50px;
      list-style:none;
      margin-top:10px;
      font-size:14px;
      font-family:Verdana, Geneva, sans-serif;
      font-weight:bold;
      overflow:hidden;
      }

      yang saya kasih huruf tebal itu ganti gan, width = panjang height=tinggi...

      Delete
  54. thnk.. sudah membantu gan..tp gimana gan kalau kita buta "KESEHATAN" setelah itu kita klik kesehatan itu, nah yang muncul didalemnya artukel tentang kesehatan semua..itu gmn gan mohon d bantu

    ReplyDelete
    Replies
    1. Jawabannya persis yang ditanyakan Mas charles Dao jawa diatas gan, semoga membantu..

      Delete
  55. Sebelumnya, terimakasih atas artikelnya gan, sangat membantu, nanti saya coba terapkan di blog saya :)

    Sebagai referensi, jika berkenan, silahkan baca panduan yang saya buat, berikut daftarnya:
    Mengenal Perbedaan Akun Adsense Hosted dan Non-Hosted!
    Cara Upgrade Akun Hosted Menjadi Non-Hosted: Lengkap
    Cara Verifikasi PIN Google Adsense Menggunakan KTP
    Mengatasi Penolakan Google Adsense: Navigasi Situs Sulit
    Barangkali dapat membantu :)

    ReplyDelete
  56. sudah saya coba dan berhasil, terimakasih banyak

    ReplyDelete
  57. Maaf mau tanya tab menu di atas kan cuma ada
    bagaimana menambah tab menu lagi misalkan jadi 7

    ReplyDelete
  58. salam kenal gan sebelumnya dari ruangtamuzahro.blogspot.co.id, sangat puas kami membcaa konten agan. bermanfaat banget buat memperbaiki sistem navigasi blog kami.
    sharing ilmunya kami tunggu yah gan..

    ReplyDelete
  59. cara membuat abut,contuct us,privacy policy,dislaimer dan sitemap untuk diletakkan diatas blogger bagaimana ya?soalnya punya saya blm lengkap hanya ada about,contact us dan advertise....mohon bantuannya

    ReplyDelete
  60. terimakasih min sangat membantu
    jangan lupa visit juga blog saya he http://semanasputrajaya.blogspot.co.id/2016/10/harapan-mahasiswa-baru-2016-teknik.html

    ReplyDelete
  61. min bedanya template beli sama buat sendiri itu gimana yah ??

    ReplyDelete
  62. sip thanks bro ilmunya sangat bermanfaat

    ReplyDelete
  63. kirimin bacground yang warna lain donk

    ReplyDelete
  64. Artikel nya mantep banget nih gan makasih ya :)

    ReplyDelete
  65. Terima kasih, sangat membantu sekali

    ReplyDelete
  66. kalo misalnya di menu 1 mau di tambahin 2 sub menu, trus di menu 2 ditambahin 2 sub menu, gimana caranya?

    ReplyDelete
  67. Manteb gan,,,,terimaksih.ijin copas.

    ReplyDelete
  68. GAN GIMANA CARA MENULIS ARTIKEL DI TENTANG SAYA TOLONG GAN LIHAT JUGA BLOG SAYA DI MANURUNGNAIRASAON.BLOGSPOT.COM

    ReplyDelete
  69. MAAF GAN, SAYA NUBIE..itu dicopy pastenya di bagian edit html, yang bawaan dari bloggernya gmana??

    ReplyDelete
  70. Wah kayaknya adminya memang mahir nih, banyak komentar yg di jawab. Thanks ya mas admin. Semoga tambah pahala sudah berbagi ilmunya.

    ReplyDelete
  71. Wow....izin sedot gan, menu navigasinya langsung ta pasang. many Thanks.

    ReplyDelete
  72. Maaf nanya nih mas,

    kalo bikin seperti yang dibawah ini gmn ya?

    Home >> Blogging >> Cara mudah membuat menu navigasi...

    Mohon Bantuan...

    ReplyDelete
  73. keren bro :) sangat bermanfaat


    jgn lupa mampir ya

    hengui.blogspot.com hehehe

    ReplyDelete
  74. bagaimana cara menambahkan sub menu dalam sub menu??

    ReplyDelete
  75. Keren ka, ijin pakai ya. . . Oya untuk ganti warna dasarnya gmana ya ka?

    ReplyDelete
  76. keren banget gan, terima kasih banyak infonya. sangat membantu sekali untuk blogger pemula seperti saya

    ReplyDelete

Ketentuan Berkomentar:

1. Menautkan link aktif (anchor text) pada komentar secara otomatis akan kami hapus
2. Gunakan fasilitas Name/URL untuk menempatkan link anda
3. Dilarang berkomentar diluar topik artikel (SARA, pornography, provokasi,promosi produk)
4. Dilarang komentar spam
5. Berkomentarlah dengan baik dan sopan
6. Komentar yang tidak sesuai dengan poin diatas tidak akan dipublikasikan


                                                                                  Admin Tips & Cara