Versi Desktop
Versi Mobile
Cara Membuat Sub Menu Responsive Di Blogspot
1.Buka Blogger Kalian
2.Pergi ke tema
"Edit HTML"
3.Cari Kode
"</b:skin>" Lalu Masukkan Kode Css Di bawah Ini Tepat di Atas
"</b:skin>"
body{margin:0;}
#mbill-menu{background: #00ff80;color: #000;height: 40px;border-bottom: 5px solid #000;}
#mbill-menu ul{height:45px;width:100%;}
#mbill-menu ul,#mbill-menu li{margin:0 auto;padding:0 0;list-style:none}
#mbill-menu li a{display: block;line-height: 40px;padding: 0 14px;text-decoration: none;color: #000;}
#mbill-menu li{float:left;display:inline;position:relative;font:bold 1.2em Tahoma;}
#mbill-menu input{display:none;margin:0 0;padding:0 0;width:200px;height:40px;opacity:0;cursor:pointer}
#mbill-menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#mbill-menu label .wew{font-size:20px;position:absolute;right:50px;font-family:arial}
#mbill-menu .homee a{color:red}
#mbill-menu li a:hover, .dropdown-mbill:hover .dropbtn {background-color: #f1f1f1;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
#mbill-menu li.dropdown-mbill {display: inline-block;}
#mbill-menu .dropdown-content {display: none;position: absolute;background-color: #00ff80;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 9999;border-top:2px solid #000; }
#mbill-menu .dropdown-content a {color: black;text-decoration:none;display: block;text-align: left;}
#mbill-menu .dropdown-content a:hover {background-color: #f1f1f1;}
#mbill-menu .dropdown-mbill:hover .dropdown-content {display: block;}
#mbill-menu .dropdown-sub {display: none;position: static;background-color: #00ff80;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 9999;border-top:2px solid #000; }
#mbill-menu .dropdown-sub a {color: black;text-decoration:none;display: block;text-align: left;}
#mbill-menu .dropdown-sub a:hover {background-color: #f1f1f1;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
#mbill-menu .dropdown-sub1:hover .dropdown-sub {display: block;}
#bolosearch {padding:10px;font-size:20px;color:white;background:black}
#bolosearch:hover {background:#595959;}
#popup_searchBox{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000;opacity:0.8;z-index:9999999}
#popup_searchBox{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000;opacity:0.8}
.search-form-label,.search-text{position:absolute;left:0}
.search-form-label{bottom:100%;width:100%;display:block;color:#fff;font-size:40px;font-weight:100}
.search-text{top:46%;width:50%;right:0;margin:20px auto 0;background:0 0;border:none;border-bottom:1px dashed #ddd;font-size:30px;font-size:4vw;color:#fff;text-align:center;outline:0;position:fixed}
#search-form:after{content:"\f002";font-family:FontAwesome}
.keluar{height:100vh;width:100%;position:absolute;top:0;left:0;bottom:0;right:0;background:transparent;border:0}
@media screen and (max-width: 400px){
#mbill-menu li{display:block;float:none;width:auto; font:bold 1.0em tahoma;}
#mbill-menu{position:relative}
#mbill-menu ul{background:#00ff80;position:absolute;top:100%;right:0;left:0;z-index:99;height:auto;display:none;border-top:2px solid #000}
#mbill-menu input,#mbill-menu label{position:absolute;top:0;right:0;display:block}
#mbill-menu input{z-index:99}
#mbill-menu input:checked + label{color:black}
#mbill-menu input:checked ~ ul{display:block}
#mbill-menu .dropdown-mbill{width:100%;display:none;}
#mbill-menu .dropdown-content {position:static;}
#mbill-menu .dropdown-content:hover{width:100%;}
#mbill-menu .dropdown-sub {position:static;}
#mbill-menu .dropdown-sub:hover{width:100%;}
#mbill-menu label .wew{display:block;font-size:10px;}
}
4.Jiika Sudah Copy Kode HTML di bawah ini di tempat yang kalian mau
<nav id='mbill-menu'>
<input type='checkbox'/>
<label>≡</label><div class='homee'><a expr:href='data:blog.homepageUrl'><i class="fa fa-home" style='float:left;font-size:40px;background:#000;padding:0px 5px 0px 5px;'></i></a></div>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown-mbill">
<a href="javascript:void(0)" class="dropbtn">Dropdown <i class='fa fa-level-down'></i></a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<div class="dropdown-sub1">
<a href="javascript:void(0)" class="drop">Dropdown <i class='fa fa-level-down'></i></a>
<div class="dropdown-sub">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="dropdown-sub1">
<a href="javascript:void(0)" class="drop">Dropdown <i class='fa fa-level-down'></i></a>
<div class="dropdown-sub">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</li>
<li><a href="#news">News</a></li>
<li class="dropdown-mbill">
<a href="javascript:void(0)" class="dropbtn">Dropdown <i class='fa fa-level-down'></i></a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<div class="dropdown-sub1">
<a href="javascript:void(0)" class="drop">Dropdown <i class='fa fa-level-down'></i></a>
<div class="dropdown-sub">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="dropdown-sub1">
<a href="javascript:void(0)" class="drop">Dropdown <i class='fa fa-level-down'></i></a>
<div class="dropdown-sub">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</li>
<li><a href="#news">News</a></li>
<li><a href="#news">News</a></li>
<li style='float:right'><form action='/search' method='get' target='_top'>
<div id='bolosearch' name='q' onclick='document.getElementById('popup_searchBox').style.display = 'block';' type='text'><i class='fa fa-search'/></div>
</form>
</li>
</ul>
</nav>
<div id='popup_searchBox' style='display:none;'>
<button class='keluar' onclick='document.getElementById('popup_searchBox').style.display = 'none';'>Close</button>
<div id='popup_searchBox_Data'>
<!-- Search Box -->
<div class='search-form-wrapper' style='display: block;'>
<form action='/search' class='search-form' method='get'>
<input class='search-text' name='q' placeholder='Search Here' type='text' value=''/>
</form>
</div>
<!-- Search Box -->
</div>
</div>
Ubah kode
"#" Menjadi Link Kalian
5.Save Template
Jika Kalian Belum memasukkan Font-Awesome/Jquery Masukkan dulu Kode di bwah
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
Jika Belum Responsive Kalian Cari Kode Seperti Di bawah ini
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
Jika sudah ketemu Ganti kode di atas Menjadi kode dibawah
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
Mudah Bukan :D
Oke Sudah Selesai sobat :v
Cara membuat Dropdown Menu
Jika Error/Ada pertanyaan Boleh comment di bawah ya sobat
