Cara Membuat Menu Horizontal Sederhana di Blog
Menu adalah salah satu elemen yang paling penting dan harus ada dalam sebuah Blog. Oleh karena itu pada kesempatan kali ini saya ingin berbagi tentang Cara Membuat Menu Horizontal Sederhana di Blog. Tampilan yang sederhana dan menarik membuat tampilan blog lebih keren.
Horizontal Sederhana, Bagaimana cara membuatnya? Silahkan ikuti petunjuk dibawah ini.
Login ke dashboard blog sobat
Klik menu Design/Rancangan (Klik menu Tata Letak)
Klik Add Gadget / Tambah Gadget.
Pilih/klik opsi HTML/Javascript
Kemudian masukkan kode menu horizontal seperti di bawah ini :
<style>Keterangan : ganti Tulisan Menu sesuai keinginan sobat dan ganti tanda # dengan URL Label blog sobat
/*---------------------------------------------------------------------------------*/
/* 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>
Klik save dan selesa. Cara Membuat Menu Horizontal Sederhana di Blog telah berhasil di pasang di blog anda.
2 comments