Membuat Menu Bar dan Sub Menu

Menu Bar adalah daftar menu berisikan jenis artikel yang telah kita buat contoh Tutor autocad, cerpen, masalah blog ku, Embun penyejuk hati. Seperti blog yang saya buat ini. Dalam hal membuat menu bar ini,saya telah  membaca beberapa blog namun  belum menemukan jalan keluar. Tapi saya tak berputus asa terus melakukan search di google untuk mencari blog yang sama dengan saya alami. Allhamdulillah berhasil saya temukan. Saya mengucapkan terima kasih kepada pemilik blog-blog yang  telah memberikan kontribusi terhadap blog yang saya buat ini.Langkah-langkah untuk membuat menubar dan sub menubar :(1.)Agan tentu sudah berada didalam blog agan.(2.)Klik “templat”, klik “edit html” kemudian cari scrift , Agar lebih mudah, klik saja F3 pada keyboard pilih  scrift dibawah ini :

div class='main-outer'> Setelah dapat, copas script berikut tepat diatas script yang dicari 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>

Keterangan :Warna menunjukan kelompok jenis yang sama.  hijau = bar yang berisikan tema utama dan warna background  . Kuning= menunjukan bahasa crift menu utama dan sub menu.Abu-abu =tema-tema utama. Merah=judul-judul artikel.(1.)# = ganti dengan ulr dari tema-tema utama.Menu 1,2,3,4= tema-tema utama.Contoh : <li><a href='https://sfindra40.blogspot.co.id'>Tutor Autocad</a> (2.)#=ganti ulr dari artikel. Sub menu 1.a,1b . sub menu 2.a, 2b . sub menu 3.a, 3b dst = judul-judul dari artikel.Contoh : <li><a href='https://sfindra40.blogspot.co.id/2016/12/tutor-belajar-autocad.html'>Tutor belajar Autocad</a></li>.Sumber info : blog jadipintar.com