Membuat Menu Navigasi Horizontal (menu banyak di atas)

Membuat Menu Navigasi Horizontal (menu banyak di atas)

from Kumpulan Informasi Maya by Kang Salman

"Bagaimana caranya menghubungkan,,,ketika HOME.PROFIL.BLOG TUTORIAL...DLL,Ketika di klik ada isinya seperti yg Kang SALMAN punya"

Sebelumnya saya ucapkan terima kasih sudah mengirimkan pertanyaan anda ke email saya. berhubung email anda falid dan tidak bisa menerima balasan dari saya, akhirnya kang salman mempostingnya di sini.

Berikut ini jawaban atas pertanyaan Kang Dizul :

Untuk memiliki halaman blog yang beraneka ragam dan memiliki isinya

Langkah 1 :

• Buatlah artikel / posting baru,

Misal : posting tentang biodata (profil), atau artikel lainnya

• Setelah siapkanlah oleh Kang Dizul artikel/posting yang akan di pasang di menu bar / navigasi menu, entah itu daftar isi, review, atao konten-konten lainnya.

“logikanya saya membuat membuat menu itu beraneka ragam karena saya membuat sifat dan isi posting yang berbeda. Seperti Buku Tamu dan Diskusi, saya membuat posting dengan kode JS Cbox / Shoutmix sehingga jadi seperti itu”

Langkah 2 :
Untuk membuat menu yang bisa di akses sekali klik, seperti di blog saya caranya cukup mudah.
• Login ke Blog > Rancangan / Tata Letak > Pilih Tab Edit HTML.
• Centang kotak kecil di sebelah kanan, “Expend…..
• Cari kode berikut. ]]></b:skin>
• Lalu letakkan kode berikut ini

/*--Navigasi Dropdown Menu--*/
#navdropdownmenu{
background:black; /*Warna Latar Belakang */
width:580px;
height:auto;
margin:0;
padding:0;
}
#navdropdownmenu ul{
float:left;
list-style:none;
margin:0;
padding:0;
}
#navdropdownmenu li{
list-style:none;
float:left;
}
#navdropdownmenu li a, #navdropdownmenu li a:link, #navdropdownmenu li a:visited{
color:yellow; /* Warna Teks */
display:block;
padding:9px 10px 9px 10px;
font-size: 12px; /* Ukuran Teks */
font-family: verdana; /* Jenis font */
text-decoration:none;
}
#navdropdownmenu li a:hover{
background:Blue; /* Warna latar saat kursor mouse berada di atasnya (hover) */
color:black; /* Warna teks saat kursor mouse berada di atasnya */
}
#navdropdownmenu li ul{
z-index:10;
position:absolute;
height:auto;
width:200px; /* Lebar submenu */
visibility:hidden;
}
#navdropdownmenu li ul li a, #navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{
float:none;
background:black; /* Warna latar belakang submenu */
width:200px; /* Lebar submenu. Isi dengan nilai yang sama */
border-width:1px; /* Tebal garis pinggir submenu */
border-style:solid;
border-color:#ffff66; /* Warna garis pinggir submenu */
}
#navdropdownmenu li ul li a:hover{
background:yellow; /* Latar belakang submenu ketika kursor mouse berada di atasnya */
color:black; /* Warna teks submenu ketika kursor mouse berada di atasnya */
}
#navdropdownmenu li:hover ul{
left:auto;
visibility:visible;
}

• Silakan tuju ke bawah </body>

Tips : Tekan CTRL+F kemudian masukan kode </body> dan klik Next. Anda akan dengan mudah menemukannya.

• Disana akan ada kode yang mirip dengan kode saya ini : (mungkin akan berbeda sedikit di template milik anda)

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='www.kangsalman.co.cc (Header)' type='Header'/>
</b:section>
</div>

Di bawahnya kode di atas maka aka nada kode yang mirip dengan ini :

<li><a href='http://asksalman19.blogspot.com'>Home</a></li>
<li><a href='http://asksalman19.blogspot.com/2010/03/profil.html'>Profil</a></li>
<li><a href='#'>Edit</a></li>
<li><a href='#'>Edit</a></li>
<li><a href='#'>Edit</a></li>

Keterangan :
Ganti # dengan alamat link artikel anda.
Ganti Edit dengan Nama anda
Kalau pada blog saya Jadinya kan seperti di bawah ini :

<li><a href='http://asksalman19.blogspot.com'>Home</a></li>
<li><a href='http://asksalman19.blogspot.com/2010/03/profil.html'>Profil</a></li>
<a href='http://asksalman19.blogspot.com/2010/06/hrefhttpwww5.html' title='Forum Diskusi Online Indonesia'>Diskusi</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Download Software' title='Free Download'>Download</a></li>
<li><a href='http://asksalman19.blogspot.com/2009/09/tutorial-mudah-blog.html' title='Kumpulan Tutorial Blogspot'>Blog Tutorial</a></li>
<li><a href='http://asksalman19.blogspot.com/2010/03/cheat-gunbound.html' title='Cheat Gunbound'>Cheat Gunbound</a></li>
<li><a href='http://patimeh.blogspot.com' title='Kumpulan Berita Unik dan Aneh'>Berita Aneh</a></li>
<li><a href='http://asksalman19.blogspot.com/2010/03/informasi-pasang-iklan-advertise.html' title='Pasang Review'>Review</a></li>
<li><a href='http://asksalman19.blogspot.com/2010/06/pasang-iklan-review-murah.html' title='Pasang Iklan'>Pasang Iklan</a></li>
<li><a href='http://asksalman19.blogspot.com/2009/10/buku-tamu.html' title='Guest Book'>Buku Tamu</a></li>
<li><a href='http://asksalman19.blogspot.com/2010/07/daftar-isi.html'><blink>Daftar Isi</blink></a></li>
<li><a href='http://kontactr.com/user/kangsalman' onclick='window.open(&apos;http://kontactr.com/user/kangsalman&apos;); return false;' rel='dofollow' target='_blank' title='Email saya'>Contact Me</a></li>
</ul>
</div>

Itulah cara kang salman menciptakan menu-menu yang beraneka ragam dan memiliki isi. Mudah bukan?
Kalau masih bingung silakan ajukan pertanyaan dibawah sini, saya akan senang untuk menjawabnya.kanga lupa untuk sertakan email anda.
Assalamualaikum. ^^

Lihat Juga :

• Membuat Menu Navigasi Vertikal.
• Membuat Site Map ala Breadcrub
• Pageview Post Counter in Blogger
• Memasang Animasi Flash di Blog.

Post By Kang Salman
http://asksalman19.blogspot.com