Beranda » Uncategorized » Membuat Menu Navigasi Dengan Sub Menu

Membuat Menu Navigasi Dengan Sub Menu

T Diposting oleh pada 1 June 2012
F Kategori
b 2 komentar
@ Dilihat 718 kali
Membuat Menu Navigasi Dengan Sub Menu.Sobat Darmanto,sudah lama juga ngga membagikan Catatan artikel diblog ini yah…Nah kali ini saya hendak membagikan catatan mengenai Cara membuat menu navigasi dengan sub menu.Catatan ini special buat sobatku yang beberapa waktu yang lalu menanyakan Cara membuat menu navigasi dengan sub menu.

Sobat Darmanto semua insyaAllah sudah paham mengenai apa itu menu navigasi.Ya menu navigasi adalah menu yang berada dibagian atas header atau dibawah header,contohnya kayak menu-menu yang ada pada blog ini.Dalam catatanYang sekarang akan saya bagikan adalah cara yang paling mudah dan tidak menggunakan javascript.
Nah, langsung aja ya masuk ke penjelasan bagaimana caranya memasang menu ini di blog sobat.
Seperti biasa sobat perlu login ke www.blogger.com dan langsung menuju ke Edit HTML. Jangan lupa back-up dulu template sobat. Setelah itu ikutilah langkah-langkah di bawah ini:
  1. Carilah kode ]]></b:skin>
  2. Setelah menemukan kode di atas, letakkan kode di bawah ini di atas kode tersebut. Kode berwarna merah adalah lebar dari menu navigasi, rubahlah nilai px agar sesuai dengan lebar blog sobat.
    #NavbarMenu { background: #000; width: 874px; height: 35px; font-size: 13px; font-family: Arial, Tahoma, Verdana; color: #fff; font-weight: bold; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 874px; 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: #808080; height: 24px; color: #fff; display: block; font-size: 14px; font-family: trebuchet ms, Times New Roman; font-weight: bold; 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: #c0c0c0; color: #000; 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: #c0c0c0; width: 150px; color: #000; font-size: 14px; font-family: trebuchet ms, Times New Roman; 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: #000; color: #fff; 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; }
  3. Sebelum melanjutkan ke langkah berikutnya,tentukan dulu posisi menu navigasi yang diinginkan. Biasanya menu navigasi diletakkan di atas header atau di bawah header. Misalkan sobat ingin memasangnya di atas header, maka sobat harus mencari kode <div id=’header-wrapper’>
  4. Lalu letakkan kode di bawah ini persis di atas kode tadi
    <div id=’NavbarMenu’>
    <div id=’NavbarMenuleft’>
    <ul id=’nav’>
    <li><a href=’http://catatandarmanto.blogspot.com’>Home</a> </li>
    <li><a href=’http://catatandarmanto.blogspot.com/2011/04/desain-blog-murah.html’>Layanan Jasa</a>
    <ul>
    <li><a href=’http://catatandarmanto.blogspot.com/2011/04/desain-blog-murah.html’>JasaDesain Web</a> </li>
    <li><a href=’http://catatandarmanto.blogspot.com/2012/02/jasa-adsense-murah.html’>Jasa Adsense</a> </li>
    <li><a href=’http://www.dharmasehat.com’>Jasa Therapi’s
    </a> </li>

    <li><a href=’http://catatandarmanto.blogspot.com/p/contact.html’>Jasa Konsultasi

    </a> </li>
    </ul> </li>
    <li><a href=’#’>Daftar Klien</a> </li> 
    <li><a href=’#’>Tutorial</a>
    <ul>
    <li><a href=’#’>Tutorial Blog</a> </li>

    <li><a href=’#’>Tehnik SEO</a> </li>
    <li><a href=’#’>Bisnis Online
    </a> </li>
    </ul> </li> <li><a href=’#’>Berita</a> </li>
    <li><a href=’#’>Daftar Isi</a> </li><li><a href=’#’>Link Exchange
    </a>
    <ul>
           <li><a href=’#’>Link Catatan Darmanto</a> </li>
           <li><a href=’#’>Link Dharma Sehat</a> </li>
    </ul> </li> </ul>
    </div> </div>

  5. Sekarang sobat ganti beberapa kode di atas agar sesuai dengan keinginan. Kode warna biru adalah url-link dan kode warna merah adalah anchor-text atau titel menu yang terkait dengan url-link tadi. Sebagai contoh menu Home.Sobat menginginkan apabila menu ini diklik maka akan membawa anda kepada halaman utama dari blog sobat, maka dari itu rubahlah url-linknya dengan url blog sobat. Berikutnya, menu Layanan Jasa.Bila sobat ingin apabila menu ini diklik maka akan membawa atau menampilkan judul posting tentang Layanan Jasa. Maka, rubahlah linknya Dengan url link judul postingan sobat.
  6. Sobat bisa menambah menu maupun sub-menu dengan menambahkan kode seperti di atas. Sebaliknya sobat pun bisa menghilangkan menu dan sub-menu yang tidak sobat inginkan dengan menghapus kode di atas yang tidak diinginkan.
  7. Setelah itu simpan dan lihat hasilnya.

Ok sobat begitulah cara membuat menu navigasi dengan sub menu yang semoga buat yang menanyakan catatan ini atau yang lagi menginginkan catatan seperti ini bisa berhasil mempraktekkannya.

Diposting oleh

CV. Studio Web, sebuah perusahaan jasa pembuatan web SEO friendly, jasa desain blog, google adwords, jasa SEO profesional. Hubungi CS Kami telpon/SMS/WA: 082310361484 (Puspa) PIN BB: SEO2402 untuk respon layanan cepat

2 Komentar untuk Membuat Menu Navigasi Dengan Sub Menu

Silahkan tulis komentar Anda

Your email address will not be published. Required fields are marked *

*

a Artikel Terkait Membuat Menu Navigasi Dengan Sub Menu

Belajar Jadi Makhluk Sosial

Belajar Jadi Makhluk Sosial

T 1 July 2011F A Darmanto SEO

Prinsip makhluk sosial ialah makhluk yg tidak bisa hidup sendiri tanpa bantuan orang lain. Dulu orang menggunakan prinsip ini dg semboyan “Ikhlas”,yah prinsip gotong royong orang2 dahulu sangat kuat,tanpa pamrih dan pamer. Namun saat ini banyak orang yg mulai meninggalkan... Selengkapnya

Akibat Bodoh

Akibat Bodoh

T 26 May 2011F A Darmanto SEO

Inilah akibatnya jadi orang bodoh! Selama 2 jam hanya utak atik Masang Gadget Live streeming Facebook di Blog yang saya kelola,padahal gampang banget masangnya…heheheee. Yah 2 jam uji coba pasang Gadget tersebut,jangan sampai gagal lagi,karena kemarin sudah dipasang tapi gagal... Selengkapnya

Cara Berjualan Pakaian Dengan Blog

T 21 March 2014F A Darmanto SEO

Beberapa waktu yang lalu ketika saya tour ke RWP Grup Bogor,ada salah satu sahabat yang saya kenal menanyakan tentang Cara Berjualan Pakaian Dengan Blog.Pakaian yang merupakan salah satu kebutuhan manusia memberikan peluang bisnis yang begitu besar sehingga setiap hari orang di... Selengkapnya

+ SIDEBAR

Ada Pertanyaan? Silahkan hubungi customer service kami untuk mendapatkan informasi lebih lengkap mengenai jasa/produk kami.

Legalitas Usaha

CV. STUDIO WEB
SIUP: 503.9/192/KPPT/PMK/11-22/II/2015
TDP: 112236321645
Akta Notaris no. 01
Detail Legalitas Kami Klik disini

Alamat

Office:
Jl. Raya Gili Tugel – Kreo KM 1, Rt. 039 Rw. 005

Desa Cibuyur, Kec. Warungpring

Kab. Pemalang, Jawa Tengah,52358