Cara Membuat Menu Bar Dan Sub Menu Bar Di Blog Anda

Selamat Pagi Semua,
Di pagi ini saya akan berbagi ilmu bagaimana Caranya membuat Menu bar dan Sub Menu bar seperti pada gambar di atas.


Langsung saja berikut langkah-langkahnya :

1. Silahkan anda Login ke Blogger anda.
2. Pilih Template > Edit HTML.
3. Cari Kode Berikut. 
div class='main-outer'>
4. Copy Script Dibawah ini dan Pastekan tepat diatas Script tadi.

	<style>
	/* -- Menu Horizontal + Sub Menu-- */
	#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
	#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
	#cat-nav a:hover { color:#fff; }
	#cat-nav li:hover { background:#000; }
	#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
	#cat-nav .nav-description { display:block; }
	#cat-nav a:hover span { color:#fff; }
	#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
	#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
	#secnav li { float:left; width: auto; height:35px;}
	#secnav li ul { position: absolute; left: -999em; width: 200px; top:35px}
	#secnav li ul li { height:30px; border-top:1px solid #fff; }
	#secnav li ul li a { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
	#secnav li ul ul { margin: -30px 0 0 180px; }
	#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
	#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
	#secnav li:hover,#secnav li.hover { position:static; }
	#cat-nav #secnav {width:100%;margin:0 auto;}
	</style>
	<div id='cat-nav'>
	<ul class='fl' id='secnav'>
	<li><a href='#'>Beranda</a></li>
	<li><a href='#'>Menu 1</a></li>
	<li><a href='#'>Menu 2</a>
	<ul id='sub-custom-nav'>
	<li><a href='#'>Sub Menu2 a</a></li>
	<li><a href='#'>Sub Menu2 b</a></li>
	</ul>
	</li>
	<li><a href='#'>Menu3</a>
	<ul id='sub-custom-nav'>
	<li><a href='#'>Sub Menu3a</a></li>
	<li><a href='#'>Sub Menu3b </a></li>
	</ul>
	</li>
	<li><a href='#'>Menu4</a>
	<ul id='sub-custom-nav'>
	<li><a href='#'>Sub Menu4a</a></li>
	<li><a href='#'>Sub Menu4b </a></li>
	</ul>
	</li>
	<li><a href='#'>Menu5</a></li>
	</ul>
	</div>

view raw MenuBarHtml hosted with ❤ by GitHub

Keterangan :

• Warna kuning anda bisa ganti dengan alamat/link setiap menu.
• Warna biru bisa anda ganti dengan Nama Menu / Sub Menu yang anda ingin tampilkan di Menu Bar.

Setelah Semua selesai, silahkan Simpan Template dan Untuk melihat nya Klik Pratinjau.

Terimakasih

Semoga Bermanfaat.

Google + : https://plus.google.com/u/0/+esaprasetio
Twitter : http://twitter.com/aphriell_art
IG : @aphriel_art
Blog :
aprilartwork.blogspot.com for my artwork
aphriellart.blogspot.com for some tutorial
Email : aphriellart@gmail.com