0 Membuat Menu Horizontal di Blogspot dengan Mudah

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.

LIHAT DEMONYA

Lumayan Bagus bukan?

Simpel saja, Cara untuk membuat menu horizontal seperti diatas, ikuti prosedur berikut:

1. Masuk ke TataLetak 
2. Tambahkan Gadget/Widget sesuai posisi yang anda inginkan
3. Pilih HTML/Java Script
4. Copy Kan Kode berikut ini:

<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='http://modul-belajar-komputer.blogspot.com'>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.
KETERANGAN:

• Tulisan yang berwarna merah mrupakan tulisan yang akan tampil di bagian menu horizontal. Ganti Sesuai kebutuhan anda
•  Tulisan yang berwarna Hijau, merupakan alamat URL Tujuan, ketika Tulisan di Klik. Ganti sesuai kebutuhan anda

Semoga manfaat

Komentar →