Membuat Menu Navigasi Horizontal dengan Sub Menu Navigasi Vertikal « Tutorial Blog dan SEO

Mumpung mood lagi bagus,mumpung doku lagi tebel dan mumpung blog lagi sepi,saya mencoba untuk memposting kembali kaitannya belajar menghias blog. Bukan suatu kesengajaan,menu navigasi dengan sub menu ini juga saya peroleh dari hasil surfing berbagai blog tutorial untuk blogspot. Bagi kamu yang penasaran bagaimana cara membuat menu navigasi dengan sub menu,bisa ikuti langkah berikkut ini. Langkah dan Cara Membuat Menu Navigasi dengan Sub Menu Untuk Blogger Pertama,pergilah ke Dashboard  blog yang akan anda beri menu navigasi dengan sub menu ini. Selanjutnya pilih tab Edit Html  Setelah itu,contreng tulisan / checkbox 'Expand Widget Templates' (Gb.3). setelah itu carilah kode seperti ini ]]></b:skin> (Gunakan Ctrl+F pada keyboard untuk mempermudah pencarian),setelah ketemu letakkan kode dibawah ini tepat diatas kode]]></b:skin> tersebut. #NavbarMenu { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #222222; color: #ffffff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; } Setelah itu Simpan Templates. Sekarang giliran kita menentukan dimana tempat menu navigasi submenu ini akan kita letakkan. Pilih Tab Rancangan / Tata Letak pada Dashboard blog anda,seperti (Gb.1),selanjutnya klik tulisan 'Add New Widget / Tambah Gadget'(Gb.4),dan pilihlah Html / Javascript(Gb.5) Setelah itu letakkan kode berikut pada widget HTML / Javascript tersebut. <div class='menuhorisontal'> <ul id='nav'> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Utama Ganti Sesuai Keinginan</a> <ul> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'></ul> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Utama Ganti Sesuai Keinginan</a> <ul> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> </ul> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> </ul> </div> Lalu simpan,selesai dan lihat hasilnya :D ** Untuk http://tulis_alamat_url_tujuan gantilah sesuai tujuan kamu kemana link akan diarahkan,misal; http://pelajaran-blog.blogspot.com/2009/03/membuat-menu-navigasi-css-di-element.html dan tulisan Ganti Sesuai Keinginan gantilah denga keterangannya,misal dengan keteranganMembuat Navigasi Css dengan Sub Menu,maka dalam penulisannya; <li><a href='http://pelajaran-blog.blogspot.com/2009/03/membuat-menu-navigasi-css-di-element.html'>Membuat Navigasi Css dengan Sub Menu</a> </li>

Klik tombol 'Buat Popular Post' di bawah ini jika anda merasa konten/postingan yang sedang anda baca sangat menarik dan bermanfaat bagi anda.