Cara bikin menu horizontal & Vertikal di 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. SelesaiNah 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 <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.

HTML/Javascript lainnya

<style type="text/css">


/* Made By Klik-blogger.blogspot.com */
#ddblueblockmenu{ border: 1px solid #000000; /*Main Border Color */ border-bottom-width: 0; width: 100%; }  #ddblueblockmenu ul{ margin: 0; padding: 0; list-style-type: none; font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; }  #ddblueblockmenu a{ display: block; padding: 3px 0; padding-left: 9px; width: 94%; /*94% minus all left/right paddings and margins*/ text-decoration: none; color: #ffffff; /* Menu Font Color */ background-color: #2175bc; /*Menu background Color */ border-bottom: 1px solid #90bade; /*Bottom border color */ border-left: 7px solid #1958b7; /*Left border color */ list-style-type:none;  }  * html #ddblueblockmenu a{ /*IE only */ width: 94%; /*IE 5*/ width: 94%; /*94% minus all left/right paddings and margins*/ }  #ddblueblockmenu a:hover { background-color: #2586d7; /*Menu background Color On Hover*/ border-left-color: #1c64d1; /*Left border color On Hover*/ }  #ddblueblockmenu div.menutitle{ color: #ffffff; /* Title Font Color */ border-bottom: 1px solid black; padding: 1px 0; padding-left: 5px; background-color: #000000;  /*Menu Tite Background Color*/ font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; } /* Made By Klik-blogger.blogspot.com */ </style>  <div id="ddblueblockmenu">  <div class="menutitle">Browse</div> <ul> <a href="http://www.Klik-blogger.blogspot.com/">Home</a><a href="http://www.Klik-blogger.blogspot.com/about/">About us</a><a href="http://www.
Klik-blogger.blogspot.com/category/blogger-templates/">Blogger
templates</a> <a href="http://www.Klik-blogger.blogspot.com/category/tricks-and-hacks/">BloggerTricks</a> <a href="http://www.Klik-blogger.blogspot.com/blogger-tools/">Blogger Tools</a><a href="#">Edit</a></* You can copy this line each time you want to add a new element to your menu and change Edit to your text and change# to the url.*/> </ul></div><font size="1">Menu By <a href="http://www.Klik-blogger.blogspot.com/">
Klik-blogger.blogspot.com</a></font>

Selamat mencoba dan semoga berhasil

Thanks for reading & sharing KUMPULAN ILMU DAN CERITA