Cara Membuat Menu Navigasi Horizontal Blogspot

Selamat sore sobat blogger, kali saya melanjutkan artikel tentang tutorial blogging. Setelah sebelumnya saya menulis artikel agar blog kita cepat terindeks di google , pada sore ini saya akan berbagi tips tentang Cara Membuat Menu Navigasi Horizontal Blogspot .

Artikel ini saya share atas permintaan dari teman saya Setyo yang bertanya tentang cara membuat menu horizontal di blog . Sebenarnya ada banyak jenis menu yang bisa kita buat di blog, seperti menu navigasi horizontal, menu navigasi vertikal, menu navigasi dropdown dan menu Dtree. Namun kebanyakan pengguna blogger lebih senang menggunakan menu horizontal agar memudahkan pengunjung menjelajahi situs mereka.

Ada banyak jenis script yang di sediakan untuk membuat menu navigasi horizontal, teman-teman bisa search di google pasti script yang disediakan oleh masing-masing situs berbeda-beda. Disini saya akan share script untuk membuat menu horizontal yang menurut saya lebih mudah digunakan dan kita tidak akan mengalami kesulitan saat melakukan editing link yang ada di menu horizontal tersebut.

Langsung saja simak dan ikuti langkah-langkahnya dibawah:

1. Login ke blogger - pilih Rancangan - Edit HTML

2. Klik "  Download Full Template " untuk backup template

3. Centang " Expand Widget Templates " dan cari kode ]]></b:skin> ( gunakan Ctrl+F dan paste kode tadi )

4. Copy kode CSS berikut tepat di atas ]]></b:skin>

#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; }

5. Lalu " Simpan Template ", kemudian pilih Tab " Tata Letak " dan buat " Element Baru / Add New Widget "  pilih " HTML / Javascript ".

6. Lalu letakkan kode di bawah ini pada halaman HTML / Javascript .

<ul id='nav'>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>

NB : Untuk menambahkan daftar menu copy kode <li><a href="#">Menu tambahan </a></li> tepat dibawahnya.

7. Untuk "#" anda isi dengan alamat URL yang akan di tuju, sedangkan Menu 1,2,3,4 merupakan menu yang akan ditampilkan. Teman-teman bisa rubah tulisan menu sesuai dengan link yang akan dituju, misal Home , Tukar Link , Download dll.

8. Selesai... semoga artikel Cara Membuat Menu Navigasi Horizontal Blogspot