Tuesday, August 14, 2012

Membuat Menu Horizontal

Menu Horizontal


Panduan membuat menu horizontal blogger:
1. Login ke dashboard blogger
2. Klik menu Design/Rancangan (Klik menu Tata Letak = untuk blogger tampilan baru menunya ada di   sebelah kiri)
3. Klik Add Gadget / Tambah Gadget.
4. Pilih/klik opsi HTML/Javascript
5. Kemudian masukkan kode menu horizontal yang saya tulis diakhir artikel ini.
6. Klik Save / Simpan
Catatan : Letakkan gadget di tempat yang sesuai (biasanya di bawah gadget header)
Berikut kode menu horizontal yang harus di masukkan pada gadget HTML/JavaScript (no:4 - 5)

<style>
/*---------------------------------------------------------------------------------*/
/* CATEGORY MENU */ /*---------------------------------------------------------------------------------*/
#cat-menu { background:none; height:35px;}
/* category navigation */ .nav { background:#f5f5f5;width:100%;z-index:99; float:left; margin:5px 0 10px 0; padding:0px; list-style:none; height:35px;} .nav a { position:relative; color:#555; display:block; z-index:100; text-decoration:none; } .nav li { float:left; width:auto; border-right:1px solid #d9d9d9; } .nav li a { font:bold 11px/15px Arial,serif; padding:10px 12px; text-decoration:none; text-transform:uppercase; } .nav li a:hover{ background:#333; color:#fff; text-decoration:underline;}</style> <div id='cat-menu'>
<ul class='sf-menu nav' id='cat-nav'>
<li><a href='/'>Home</a></li>
<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>
<li><a href='#'> Menu 5</a></li>
</ul>
</div>

 Keterangan:
ganti tanda pagar ( # ) pada kode <a href='#'> dengan link yang teman inginkan, bisa link label, postingan, atau link yang mengarah kesitus lain.
Silakan ganti tulisan Menu 1 - Menu 5 dengan nama menu yang teman inginkan.


No comments:

Post a Comment

Start Menu Windows 8 dan 8.1

Start Menu adalah salah satu Tool yang digunakan untuk menampilkan program yang sudah terinstall di perangkat komputer (Baik program yang ...