HOMECara Mudah Membuat Menu Navigasi Keren Tanpa Edit HTML
Posted on - 1:48:00 AM with 118 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
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.
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
2 menu_bg_2
3 menu_bg_3
4. menu_bg_4
5. menu_bg_5
6 menu_bg_6
7 menu_bg_7
8 menu_bg_8
9. menu_bg_9
10 menu_bg_10
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
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>
#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
Jika Anda menyukai Artikel di blog ini, Silahkan
klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips & Cara
 |
Artikel Terkait Dengan "Cara Mudah Membuat Menu Navigasi Keren Tanpa Edit HTML "
118 comments:
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
Keren om, ane udah coba, thanks sdh share ilmunya.
ReplyDeleteTERIMAKASIH, mohon ijin memakainya ya ... sudah lama saya mencari script navigasi seperti ini yang tanpa edit template
ReplyDeletealanhakim{at}gmail[dot]com
Ya mas hakim, silahkan dipakai scriptnya semoga berguna dan tetep semangat blogging...
DeleteKalo menambah sub menu bagaimana .... Misalnya. menu yang tampil "PROFIL" Dalam manu PROFIL ada lebih dari satu profil. bagaimn cara membuatnya
ReplyDeleteMudah saja bro...seumpama yang ingin ditambahkan tabmenu adalah "PRODUCT" maka tambahkan menu seperti dibawah ini:
Delete<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....
kalo misal mau menambah lagi tab menu pada "Begineer" tambah tab menunya kesamping
Deletecaranya bagaimana?
Trims...
Gampang gan, seumpama dalam beginner mau ditambahin contoh saja "submenu1" dan submenu2 jadinya kodenya begini:
Delete<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..
Kok Q Coba kopi pasate syntax di atas ga bisa Gan, apa harus ada syntax yang di edit di bagian atas syntax menu..?
Deleteitu 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?
Deletebos saya coba yang di tambah tab menu ko munculnya disamping yah, ga ke bawah
Deletega ae kawalaahan
ReplyDeleteGan, gimana caranya membuat navigasi melayang (floating)?? :)
ReplyDeleteMudah saja gan ikuti langkah seperti contoh dibawah ini:
Delete1. 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.....
Mantaaap dah sob artikelnya, kereeeen dan sangat membantu :)
ReplyDeleteIjin share http://grosiracemaxstasik.com/obat-alami-asam-urat/
http://grosiracemaxstasik.com/
http://grosiracemaxstasik.com/ace-maxs/
makasih artikelnya yaa gan...manfaat sekeleus.....
ReplyDeletehehehehe
follow blog pemula aku yaa....jelajahsegalanya.blogspot.com
Mantaaap gan artikelnya :)
ReplyDeleteNice artikelnya :)
ReplyDeleteterimakasih infonya gan
ReplyDeleteinfonya bagus gan, sukses terus
ReplyDeleteSaya coba di blog yang akan saya buat Gan. Baru membuat blog, namun tidak mengerti dengan HTMl...
ReplyDeleteHasilnya http://astawa-belajar.blogspot.com/
ini dia yang di cari-cari, terimakasih atas informasinya :)
ReplyDeletenice gan
ReplyDeleteKeren sob..
ReplyDeleteDan jawabannya pun memuaskan untung agan yg di tanya coba ane.... pasti akan seperti ini jawabnya "coba tanya mbah" hihih.. ijin copas and share gan.
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
ReplyDeleteMas 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.....
Deleteuntuk 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...
wes mantap artikel terimakasih
ReplyDeleteInfonya sangat membantu sekali sob, Izin nyimak saja ya
ReplyDeletehttp://goo.gl/q4aK5g
artikelnya komplit mantap dah
ReplyDeleteTerimakasih banyak mas, sangat membantu sekali artikelnya..
ReplyDeleteOkey tips manfaat.Thank's Gan..
ReplyDeleteMas kalo mau memposting agar masuk dimenu masing masing gmna ya.....
ReplyDeleteudah 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.....
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:
Deletebr/>
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...
keren bro
ReplyDeletemungkin saya akan terapkan di blog saya
nice artikel
kaa sorry mau nanya cara ngerapihinnya gimana ko brantakan wearekjsmansaba.blogspot.com
ReplyDeleteMas 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....
ReplyDeletemau tanya gan, kalau misal di klik menu bar baru keluar sub menu ke bawah bagaimana ya caranya,
ReplyDeletekebanyakan kan kalau di drop menu otomatis keluar sub menu,
mohon pencerahannya salam super
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
Delete<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....
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
ReplyDeleteMas 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.....
ReplyDelete.........(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>
Selamat pagi Mas. Ini aku lagi bingung. Bisa tolong dibuatjan contohnya untuk item no. 8 yang Mas instruksikan.
ReplyDelete"8. Untuk menampilkan semua posting di bawah label (kategori), Anda perlu link ke halaman label"
Maaf, saya newbi dan terima kasih atas bantuannya.
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....
ReplyDeleteizin copast ya gan, buat kenang kenangan :D
ReplyDeleteGAN untuk bagi rata kotak gmn...blog saya gk rata jdnya....
ReplyDeleteMas Odzzal maksudnya rata gimana mas, coba lihat link blognya....
ReplyDeletekolomnya gak panjang malahan ada kolosong jdnya ..trus baut ling navigasinya gmn...odzzal65.com
DeleteMas 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 "#"...
ReplyDeleteBuat 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 "#"
nk nya gmn untk about us ,contact,fags,facebook...mohon infonya
ReplyDeleteMas 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...
DeleteOK MAS .artikelnya sangat membantu..saya masih kesulitan untuk mengaktfkan halaman facebook navigasi,dan apakah semua navigasi harus kita publikasikan karena saya menggunakan laman..dasbord ..
ReplyDeleteTidak 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....
ReplyDeleteok gan untuk membuat kolomnya sama gmn, soalnya kolom bayak berlebih gan
ReplyDeleteBermanfaat banget mas, ni juga lagi saya coba di blog saya (maklum blogger baru).
ReplyDeleteTapi 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?
bro cara isi linknya gmna..
ReplyDeletedari entri kah? mohon petunjuknya
Linknya yang dipasang merupakan link label atau kategori Mas...
DeleteMas 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)
ReplyDeleteSaya pakai di blog saya bos, meskipun belum bisa-bisa untuk bikin sub menu.
ReplyDeleteMakasih banyak untuk ilmunya, cek blog saya bos. Masih butuh banyak saran dan belajar, maklum newbie...
yang saya pasang adalah hasil copas dari petunjuk admin
ReplyDelete"jawaban untuk agan joni"
langsung saya terapkan, dan hasilnya sub menu sejajar seperti menu biasa
maaf kalau pertanyaanya agak mbingungin, masih nubie
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
ReplyDeleteMas muksin Maaf mas coba cek lagi, biasanya kalau widget tidak jadi (yang nongol kode Html nya) biasanya penyebabnya sebagai berikut:
ReplyDelete1. 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.
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.
Delete2. 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.
Terima kasih artikelnya sangat membantu. Blog saya onlinenay.blogspot.com baru dibuat.
ReplyDeleteNamun 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.
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
ReplyDeletemakasih gan, tutorialnya lengkap..udah ane pasang di blog ane..jadi lebih bagus
ReplyDeleteMudh sekali gan, terimakasih :D
ReplyDeleteTerimakasih Tutur_nya Gan....,
ReplyDeleteMaaf 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
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 ...
ReplyDeleteMasih bingung cari menu navigasi sibuk sendiri haaha thanks tipsnya bookmark dulu deh buat di http://kokloo.blogspot.co.id
ReplyDeleteMenyimak... Www.Housedesign.ml
ReplyDeleteterima kasih min ilmunya, sangat bermanfaat,....
ReplyDeleteoh iya nengahin tulisan menu gimana ya, rada ke atas dia,..
hehehe maklum newbie
height nya ditambahin ukurannya gan,......
DeleteGan kenapa pas udah disave, saya lihat blog menunya gak ada
ReplyDeleteMaksudnya blog menunya yang mana gan,...
Deletemantaaappp ... thanks bang ilmunya
ReplyDeletemantapp....bgus bgt....thx u gan infonya
ReplyDeletegan bagaimana cara buat tutorial blog....melalui android
ReplyDeletebisa tdk kalw tdk bisa sy bakal berhenti jadi blogger.
makasi dan tolong di balas
Maaf gan balesnya telat, bisa saja gan sekarang aplikasi blogger bisa digunakan pada android....
DeleteKeren .. makasih infonya
ReplyDeletemas saya mau tanya, jika saya ingin memperpendek dan memperpanjang tampilan sub menu di bagian sebelah man ya mas, tolong di bantu, terimakasih.
ReplyDeletehttp://membaca-menambah-ilmu.blogspot.co.id/
Silahkan masukkan kode setelah kode ini : #tab_menu li {.....} untuk kode panjang dengan kode width:..px sesuai keinginan agan....
Deletemampir di http://wisatakampungan.blogspot.co.id/
ReplyDeleteMas, 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
ReplyDeleteukuran 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...
Deleteudah 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
DeleteIya sama2 gan ......
Deletegan bagaiaman kalo kita mau nambahin news atau artikel ke dalam menu yang sudah kita buat
ReplyDeletecontohnya saya ingin menambahkan berita olaharaga ke dalam menu sport itu bagaimana gan?
mohon bantuannya
makasih
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:
Delete<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>
tetep ga bisa min. masih bingung min euy... hadeuh
Deletenice artikelnya bang, kunjungi balik ya http://tulisan-kaktegar.blogspot.co.id/2014/06/cara-membuat-menu-animasi-keren-di.html
ReplyDeletebang gimana caranya menyesuaikan panjang menu sesuai dengan yang di inginkan
ReplyDelete#tab_menu {
Deletebackground: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...
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
ReplyDeleteJawabannya persis yang ditanyakan Mas charles Dao jawa diatas gan, semoga membantu..
DeleteSebelumnya, terimakasih atas artikelnya gan, sangat membantu, nanti saya coba terapkan di blog saya :)
ReplyDeleteSebagai 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 :)
sudah saya coba dan berhasil, terimakasih banyak
ReplyDeleteMaaf mau tanya tab menu di atas kan cuma ada
ReplyDeletebagaimana menambah tab menu lagi misalkan jadi 7
salam kenal gan sebelumnya dari ruangtamuzahro.blogspot.co.id, sangat puas kami membcaa konten agan. bermanfaat banget buat memperbaiki sistem navigasi blog kami.
ReplyDeletesharing ilmunya kami tunggu yah gan..
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
ReplyDeleteterimakasih min sangat membantu
ReplyDeletejangan lupa visit juga blog saya he http://semanasputrajaya.blogspot.co.id/2016/10/harapan-mahasiswa-baru-2016-teknik.html
terima kasih atas info nya
ReplyDeletemin bedanya template beli sama buat sendiri itu gimana yah ??
ReplyDeletesip thanks bro ilmunya sangat bermanfaat
ReplyDeletekirimin bacground yang warna lain donk
ReplyDeleteArtikel nya mantep banget nih gan makasih ya :)
ReplyDeletekalo misalnya di menu 1 mau di tambahin 2 sub menu, trus di menu 2 ditambahin 2 sub menu, gimana caranya?
ReplyDeleteManteb gan,,,,terimaksih.ijin copas.
ReplyDeleteKreatif Gan Ijin Sedot
ReplyDeleteGAN GIMANA CARA MENULIS ARTIKEL DI TENTANG SAYA TOLONG GAN LIHAT JUGA BLOG SAYA DI MANURUNGNAIRASAON.BLOGSPOT.COM
ReplyDeleteMAAF GAN, SAYA NUBIE..itu dicopy pastenya di bagian edit html, yang bawaan dari bloggernya gmana??
ReplyDeleteWah kayaknya adminya memang mahir nih, banyak komentar yg di jawab. Thanks ya mas admin. Semoga tambah pahala sudah berbagi ilmunya.
ReplyDeleteWow....izin sedot gan, menu navigasinya langsung ta pasang. many Thanks.
ReplyDeleteMaaf nanya nih mas,
ReplyDeletekalo bikin seperti yang dibawah ini gmn ya?
Home >> Blogging >> Cara mudah membuat menu navigasi...
Mohon Bantuan...
Artikelnya bagus ya saya suka
ReplyDeletekeren bro :) sangat bermanfaat
ReplyDeletejgn lupa mampir ya
hengui.blogspot.com hehehe
keren Om, sangat membantu
ReplyDeletebagaimana cara menambahkan sub menu dalam sub menu??
ReplyDeleteKeren ka, ijin pakai ya. . . Oya untuk ganti warna dasarnya gmana ya ka?
ReplyDeletekeren banget gan, terima kasih banyak infonya. sangat membantu sekali untuk blogger pemula seperti saya
ReplyDeleteizin coba gan
ReplyDelete