Cara bikin menu Horizontal blogspot (mudah & cepat)

Sebenarnya ada banyak cara untuk membuat menu horizontal di blogger, sehingga saya bingung mau menuliskan tutorial menu horizontal blogger yang bagaimana.
Akhirnya saya putuskan untuk menuliskan tips membuat menu horizontal untuk blogger yang menurut saya sangat-sangat mudah, dan semoga ini dapat di fahami dan mudah di praktek kan.

Oke langsung aja cara-caranya :

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
7. Selesai

Nah itulah tutorial bikin menu horizontal blogger.

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 dengan link yang teman inginkan, bisa link label, postingan, atau link yang mengarah kesitus lain.Silahkan ganti tulisan Menu 1 - Menu 5 dengan nama menu yang teman inginkan.

Selamat mencoba dan semoga berhasil...!!!

Artikel Terkait