Cara Mudah Membuat Menu Bar Dengan Sub Menu Di Blogspot

Hardilist - Menu pada blog merupakan sebuah navigasi yang harus ada pada sebuah atau blog dan fitur ini sangat penting karena memudahkan pengunjung untuk memilih kategori yag ada pada blog kita tentunya. Dan pada postingan kali ini saya akan membagikan cara membuat Menu di blog dengan beberapa Submenu dan Random Post. Contoh menu yang akan saya berikan seperti gabar di bawah ini.

Lalu gimana cara nya membuat menu seperti gambar di atas? Cara nya gampang aja kok sob, mari ikuti langkah-langkahnya seperti di bawah ini

1. Login ke akun blogger sobat, lalu pilih menu Templete, klik Edit HTML

2. Letakkan kode CSS berikut di atas kode ]]></b:skin> , sobat bisa cari dengan menggunakan ctrl+f. Sebaiknya backup dulu templete sobat saat ini.

#main-nav {width: 870px;background: #2c2c2c;margin: 0 auto;height: 35px;margin-bottom: -20px;margin-left: -10px;border-bottom: 5px solid #4371cf;}
#main-nav input{
display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer;
}
#main-nav .menu-alert{float:left;padding:18px 0 0 10px ;font-style:italic;color:#FFF;}
#top-menu-mob , #main-menu-mob, .sidelay{ display:none; }
#main-nav ul li {z-index:20;text-transform: uppercase;font-family: Oswald,arial,Georgia, serif;
font-size:12px;position: relative;display: inline-block;float: left;border:1px solid;border-width:0 0 0 1px;height:35px;
}
#main-nav ul li:first-child,#main-nav ul li:first-child a{border:0 none;}#main-nav ul li:last-child a{border-right:0 none;}#main-nav ul li a {display: inline-block;height: 35px;line-height: 35px;
color: #ddd;padding:0 14px;text-shadow:0 1px 1px #000;border-left:1px solid #383838;}
#main-nav ul li a .sub-indicator{}
#main-nav ul li a:hover {}
#main-nav ul ul{display: none;padding:0;position: absolute;top: 35px;width: 180px;z-index: 99999;float: left;background: #2d2d2d !important;
-webkit-box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
#main-nav ul ul li, #main-nav ul ul li:first-child {background: none !important;z-index: 99999;
min-width: 180px;border:0 none;border-bottom: 1px solid #222;border-top: 1px solid #383838;
font-size:12px;height:auto;margin:0;}
#main-nav ul ul li:first-child ,#main-nav ul li.current-menu-item ul li:first-child,
#main-nav ul li.current-menu-parent ul li:first-child,#main-nav ul li.current-page-ancestor ul li:first-child { border-top:0 none !important;}
#main-nav ul ul ul ,#main-nav ul li.current-menu-item ul ul, #main-nav ul li.current-menu-parent ul ul, #main-nav ul li.current-page-ancestor ul ul{right: auto;left: 100%; top: 0 !important; z-index: 99999; }
#main-nav ul.sub-menu a ,
#main-nav ul ul li.current-menu-item a,
#main-nav ul ul li.current-menu-parent a,
#main-nav ul ul li.current-page-ancestor a{border:0 none;background: none !important;
height: auto !important;line-height: 1em;padding: 10px 10px;width: 160px;display: block !important;margin-right: 0 !important;z-index: 99999;color: #ccc !important;
text-shadow:0 1px 1px #000 !important;}
#main-nav ul li.current-menu-item ul a,
#main-nav ul li.current-menu-parent ul a,
#main-nav ul li.current-page-ancestor ul a{ color:#eee !important; text-shadow:0 1px 1px #222 !important;}
#main-nav ul li:hover > a, #main-nav ul :hover > a { color: #FFF ;}
#main-nav ul ul li:hover > a,
#main-nav ul ul :hover > a {color: #FFF !important; padding-left:15px !important;padding-right:5px !important;}
#main-nav ul li:hover > ul {display: block;}
#main-nav ul li.current-menu-item,
#main-nav ul li.current-menu-parent,
#main-nav ul li.current-page-ancestor{margin-top:0;height:35px;border-left:0 none !important;
}
#main-nav ul li.current-menu-item ul.sub-menu a, #main-nav ul li.current-menu-item ul.sub-menu a:hover,
#main-nav ul li.current-menu-parent ul.sub-menu a, #main-nav ul li.current-menu-parent ul.sub-menu a:hover
#main-nav ul li.current-page-ancestor ul.sub-menu a, #main-nav ul li.current-page-ancestor ul.sub-menu a:hover{background: none !important;}
#main-nav ul li.current-menu-item a, #main-nav ul li.current-menu-item a:hover,
#main-nav ul li.current-menu-parent a, #main-nav ul li.current-menu-parent a:hover,
#main-nav ul li.current-page-ancestor a, #main-nav ul li.current-page-ancestor a:hover{
background:#9EC22D;text-shadow:0 1px 1px #b43300;color:#FFF;height:35px;
line-height:35px;
border-left:0 none !important;
}
#main-nav ul.sub-menu li.current-menu-item,#main-nav ul.sub-menu li.current-menu-item a,
#main-nav li.current-menu-item ul.sub-menu a,#main-nav ul.sub-menu li.current-menu-parent,
#main-nav ul.sub-menu li.current-menu-parent a,#main-nav li.current-menu-parent ul.sub-menu a,
#main-nav ul.sub-menu li.current-page-ancestor,#main-nav ul.sub-menu li.current-page-ancestor a,
#main-nav li.current-page-ancestor ul.sub-menu a{height:auto !important; line-height: 12px;}
#main-nav ul li.menu-item-home ul li a,
#main-nav ul ul li.menu-item-home a,
#main-nav ul li.menu-item-home ul li a:hover{
background-color:transparent !important;
text-indent:0;
background-image:none !important;
height:auto !important;
width:auto;
}
#main-menu-mob,#top-menu-mob{background: #222;width: 710px;padding: 5px;border: 1px solid #000;color:#DDD;height: 27px;margin:13px 0 0 10px;}
#top-menu-mob{width: 350px;margin:2px 0 0 0;}
#main-nav.fixed-nav{position:fixed;top:0;left:0;margin-left: 0px;width:100% !important;
z-index:999;opacity:0.9;-webkit-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);-moz-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);box-shadow: 0 5px 3px rgba(0, 0, 0, .1);}
#menu-main a.home{ background-color: #4371cf !important;margin-left: -40px;text-indent:-9999px;padding:0;width:60px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-zjlGhfkxre63OyTPhB7WZCY3zZLJn3rioawSy1nT0pI6TdFfPAa6sECtTiwDJlEk7otlIqc6nsukkj6yjSW0_2T-G0LCItnOK0SMChTg7k_kKkRaA-A92ZrUd12shBvZ30J1rzDT_HE/s1600/bhome.png);background-position:center;background-repeat:no-repeat}
.main-menu .menu li.green a:hover { background-color: #8FC821 !important;}.main-menu .menu li.green:hover > a { background-color: #8FC821 !important;}.main-menu .menu li.yellow a:hover { background-color: #F39C12 !important;}.main-menu .menu li.yellow:hover > a { background-color: #F39C12 !important;}.main-menu .menu li.red a:hover { background-color: #E8373E !important;}.main-menu .menu li.red:hover > a { background-color: #E8373E !important;}.main-menu .menu li.orange a:hover { background-color: #FE6600 !important;}.main-menu .menu li.ornage:hover > a { background-color: #FE6600 !important;}.main-menu .menu li.green-2 a:hover { background-color: #accc46 !important;}.main-menu .menu li.green-2:hover > a { background-color: #accc46 !important;}.main-menu .menu li.blue a:hover { background-color: #2950A3 !important;}.main-menu .menu li.blue:hover > a { background-color: #2950A3 !important;}.main-menu .menu li.green-3 a:hover { background-color: #1abc9c !important;}.main-menu .menu li.green-3:hover > a { background-color: #1abc9c !important;}.main-menu .menu li.pink a:hover { background-color: #D90162 !important;}.main-menu .menu li.pink:hover > a { background-color: #D90162 !important;}
a{color:#444444;text-decoration:none;-webkit-transition:all ease-in-out .2s;-moz-transition:all ease-in-out .2s;-o-transition:all ease-in-out .2s;transition:all ease-in-out .2s}
a:hover{color:#000000;}
#ranpost {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij0DDh-H2Nn_6N5d3QvC96Nss0FZ8VjoodvV2cQqc5zfc-O79_mT27rMAkPnsKk-dvZzSWHVnOGD1fKusm7kgK4Q9TfKzUb9VmyWKMI0ZqsTn8H0Tna5BboTAjeX5hVxOS10xrjQNu5_Q/s1600/ran-iconz.png") no-repeat scroll 15px 6px transparent;cursor: pointer;float: right !important;margin-right: 10px;width: 50px;
}
#ranpost:hover {background-color: transparent !important;}
#navtop {display: inline-block;}
#navtop ul, #navtop li {list-style: none outside none;margin: 0;padding: 1px 0 0;}
#navtop li {float: left;height: 18px;position: relative;
}
#navtop li a {border-right: 1px solid #444;color: #fff;font: 13px;font-family: 'Bree Serif', serif;
padding: 20px 15px;text-transform: uppercase;}
#navtop li.dgnsubtop {padding-right: 10px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiB4e1VVnoPwA7gqCyhSbAkaXyeQXnpyuECb6uDqEkNcTU2hRGv8kbzd3HCyXu3hEe4yyIbfvkbJygx0uZTaKYf1AXxs2pXeibvnkReCO7dh3fyvVnUE1rqtrzQB27Y829GhJ7CxSt5d8/s7/downarrow-dark.png);
background-repeat: no-repeat;
background-position: 90% 50%}
#header, body#layout #header {width:40%;display:inline-block;float:left;margin-left:22px;
}
#header-right, body#layout #header-right {width:50%;display:inline-block;float:right;}
#header-right .widget {margin:0;}.header-outer{margin-top:7px;margin-bottom:25px;}
#menu-main {margin-top: -13px;width: 800px;margin: 0 auto;}

3. Lalu letakkan kode HTML berikut ini tepat di atas
 <div class='main-wrapper'>

<nav id='main-nav' style='top: 0px;'>
<div class='container'>
<div class='main-menu'>
<ul class='menu' id='menu-main'>
<li class='green'><a class='home' href='/'>Home</a></li>
<li class='red'><a href='your-link-here'>Menu1</a>
<ul class='sub-menu'>
<li><a href='your-link-here'>Submenu1</a></li>
<li><a href='your-link-here'>Submenu2</a></li>
</ul>
</li>
<li class='yellow'><a href='your-link-here'>Menu2</a>
<ul class='sub-menu'>
<li><a href='your-link-here'>Submenu1</a></li>
<li><a href='your-link-here'>Submenu2</a></li>
</ul>
</li>
<li class='green-2'><a href='your-link-here'>Menu3</a>
</li>
<li class='green-3'><a href='your-link-here'>Menu4</a>
<ul class='sub-menu'>
<li><a href='your-link-here'>Submenu1</a></li>
<li><a href='your-link-here'>Sebmenu2</a></li>
</ul>
</li>
<li id='ranpost'/>
<script type='text/javascript'>
/*<![CDATA[*/
function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; document.getElementById('ranpost').appendChild(a); } </script><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky">
/*]]>*/
</script>
</ul>
</div>
</div>
</nav>

4. Lalu Pratinjau templete sobat, jika tak ada masalah save templete!

Oke sekian, Semoga bermanfaat! Keep Enjoy!