BUAT SUBMENU DI BLOG

 Hi Blogger yang ingin mempunyai submenu pada blog anda. Dan kelihatan indah Dimata  Bisa  Memasang Navigasi Menu Responsive Terbaik untuk Blogger

Ini dia Cara Memasang Navigasi Menu Responsive Terbaik untuk Blogger.

1. Klik Tema > Edit HTML

2. Copas kode CSS Navigasi Menu Responsive berikut ini di atas kode ]]></b:skin>

#nav{background:#384850;margin:0;text-transform:uppercase;font-weight:600;font-family:Arial;font-size:14px}#nav ul{margin:0;padding:0}#nav li{list-style:none;display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline;margin:0;padding:0}#nav li a{display:block;text-decoration:none;color:#fff;padding:1em}#nav li a:hover{color:#fff;background:#191919}.show-menu{text-decoration:none;color:#fff;text-align:left;padding:8px 20px;display:none}.show-menu b{font-size:20px}.show-menu span{margin-right:1em;float:right}#nav input[type=checkbox]{display:none}#nav input[type=checkbox]:checked ~ #menus{display:block}#nav ul.sub-menus{height:auto;overflow:hidden;width:180px;background:#eee;position:absolute;z-index:99;display:none}#nav ul.sub-menus li{display:block;width:100%;text-transform:none;text-shadow:none}#nav ul.sub-menus a{color:#fff;background:#48d}#nav ul.sub-menus a:hover{background:#ddd;color:#333}#nav li:hover ul.sub-menus{display:block}#nav a.prett{padding:13px}#nav a.prett::after{content:"width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#ccc transparent transparent;position:absolute;top:18px;right:9px}@media screen and (max-width:800px) {#nav{margin-bottom:30px}#nav ul{position:static;display:none}#nav li{border-bottom:1px solid #535b69}#nav ul li,#nav li a{width:100%}#nav li a{display:block;height:auto;line-height:normal;text-align:left}#nav ul.sub-menus{width:100%;position:static;padding-left:20px}.show-menu{display:block!important;line-height:25px}.show-menu:hover{cursor:pointer}label{margin:0!important}}

3. Copas kode HTML Menu Responsive berikut ini di bawah kode </header> atau kode penutup Header Blog.

<nav id='nav'><label class='show-menu' for='show-menu'><b>☰</b> <span>Show Menu</span></label><input autocomplete='off' id='show-menu' role='button' type='checkbox'/><ul id='menus'><li><a href='/'>Home</a></li>    <li><a href='/p/about.html'>About</a></li>    <li><a href='/p/kontak.html'>Kontak</a></li>    <li><a href='/p/sitemap.html'>Sitemap</a></li>    <li><a href='/p/sitemap.html'>Disclaimer</a></li><li><a class='prett' href='#'>Categories <span class='arrow'>▼</span></a> <ul class='sub-menus'> <li><a href='#'>Sub Menu1</a></li> <li><a href='#'>Sub Menu2</a></li> <li><a href='#'>Sub Menu3</a></li> <li><a href='#'>Sub Menu4</a></li> <li><a href='#'>Sub Menu5</a></li></ul></li>      <li><a href='#'>Blogging</a></li>      <li><a href='#'>Links</a></li></ul></nav>

Selamat Mencoba Dan salam sukses.