MEMBUAT MENU HORIZONTAL PADA BLOG

Kali ini saya akan mencoba menulis tutorial / cara mudah bikin menu horizontal di blogger. 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 panduan membuat menu horizontal untuk blogger yang menurut saya mudah, dan semoga tutorial ini dapat di fahami dan mudah di praktek kan.

Ok langsung saja.

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
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:url(pop.png) no-repeat center top; height:35px;}
/* category navigation */
.nav { width:100%;z-index:99; float:left; margin:10px 0 0 0; padding:0px; list-style:none; line-height:1; height:35px;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;}
.nav a { position:relative; color:#999; 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, .nav li a:active, .nav li.current-cat, .nav li.current-cat-parent { background:none; color:#004276; text-decoration:underline;}
.nav li ul { background:#444; position:absolute;width:172px; margin:0px 0px 0px -2px; border:1px solid #333; border-width:1px 1px 0px; z-index:999; }
.nav li ul li {border-bottom:1px solid #333; border-right:none; }
.nav li ul li a { background:#444; width:147px; padding:7px 12px; color:#fff; font-size:11px; font-weight:normal; }
.nav li ul li a:hover { background:#f9f9f9; color:#004276; text-decoration:underline; }
.nav li ul ul { margin:-31px 0px 0px 171px; }
</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.

Selamat mencoba dan semoga berhasil

Related Post: