Sebuah website / Blog tidak Lengkap rasanya jika tidak dilengkapi dengan Menu Horizontal. Namun masih banyak orang yang belum tau bagaimana Membuat Menu Horizontal di Blogspot. Sebenarnya, Membuat Menu Horizontal di Blogspot tidaklah sesulit yang dibayangkan. Pada tutorial kali ini saya akan mengantarkan anda untuk bisa membuat menu horizontal di blogspot. Berikut ini Adalah tampilan Menu horizontal yang akan dihasilkan setelah di modifikasi.
Simpel saja, Cara untuk membuat menu horizontal seperti diatas, ikuti prosedur berikut:
- Masuk ke TataLetak
- Tambahkan Gadget/Widget sesuai posisi yang anda inginkan
- Pilih HTML/Java Script
- Copy Kan Kode berikut ini:
/*---------------------------------------------------------------------------------*/
/* 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='/'>HALAMAN UTAMA</a></li>
<li><a href='http://modul-belajar-komputer.blogspot.com/2012/06/cara-pemesanan-modul-belajar-komputer.html'> Cara Pemesanan</a>
<li><a href='http://kumpulan-skripsi-lengkap.blogspot.com/' target="blank"> Referensi Skripsi</a></li>
<li><a href='http://modul-belajar-komputer.blogspot.com/search/label/tutorial'> Tutorial</a></li>
</li></ul></div>
Simpan dan Lihat Hasilnya.
Semoga manfaat
